@moderneinc/design-system-components 7.7.0-next.19b91c → 7.7.0-next.7feadd

package/dist/index.js

@@ -11,9 +11,10 @@ var Alert = require('@mui/material/Alert');
 var ButtonBase = require('@mui/material/ButtonBase');
 var lucideReact = require('lucide-react');
 var IconButton = require('@mui/material/IconButton');
-var React = require('react');
+var react = require('react');
 var Breadcrumbs = require('@mui/material/Breadcrumbs');
 var Link = require('@mui/material/Link');
+var Button = require('@mui/material/Button');
 var CircularProgress = require('@mui/material/CircularProgress');
 var MuiToggleButton = require('@mui/material/ToggleButton');
 var MuiToggleButtonGroup = require('@mui/material/ToggleButtonGroup');
@@ -21,7 +22,6 @@ var MuiCard = require('@mui/material/Card');
 var Checkbox = require('@mui/material/Checkbox');
 var xDataGrid = require('@mui/x-data-grid');
 var xDataGridPro = require('@mui/x-data-grid-pro');
-var Button = require('@mui/material/Button');
 var Divider = require('@mui/material/Divider');
 var InputAdornment = require('@mui/material/InputAdornment');
 var InputBase = require('@mui/material/InputBase');
@@ -664,7 +664,7 @@ const StyledIconButton = styles.styled(IconButton, {
     },
 }));
 const ModBanner = ({ intent = 'info', type = 'outlined', message, messagePosition = 'left', linkText, showClose = false, icon, onClose, onLinkClick, ...props }) => {
-    const [dismissed, setDismissed] = React.useState(false);
+    const [dismissed, setDismissed] = react.useState(false);
     const handleClose = () => {
         setDismissed(true);
         onClose?.();
@@ -742,39 +742,34 @@ function ModBreadcrumbs({ children, className }) {
     return (jsxRuntime.jsx(StyledBreadcrumbs, { separator: jsxRuntime.jsx(lucideReact.ChevronRight, { size: 10.67, color: designSystemTokens.semanticColors.color.icon.utility }), className: className, "aria-label": "breadcrumb", children: children }));
 }
 
-// Props that should not be forwarded to ButtonBase (Button-specific props that ButtonBase doesn't support)
-const buttonOnlyProps = [
-    'variant',
-    'size',
-    'loading',
-    'startIcon',
-    'endIcon',
-    'fullWidth',
-    'disableElevation',
-];
-const StyledButtonBase$1 = styles.styled(ButtonBase, {
-    shouldForwardProp: prop => !buttonOnlyProps.includes(prop),
-})(({ theme, variant = 'primary', size = 'medium', loading = false }) => {
+const StyledButton = styles.styled(Button, {
+    shouldForwardProp: prop => prop !== 'buttonVariant' && prop !== 'buttonSize',
+})(({ theme, buttonVariant: variant, buttonSize: size }) => {
     // Size configurations
     const sizeConfig = {
         small: {
             height: 32,
-            padding: `0 ${designSystemTokens.spacing.spacing_1_1_2}px`,
+            paddingX: designSystemTokens.spacing.spacing_1_1_2,
             fontSize: theme.typography.pxToRem(14),
         },
         medium: {
             height: designSystemTokens.spacing.spacing_5,
-            padding: `0 ${designSystemTokens.spacing.spacing_2}px`,
+            paddingX: designSystemTokens.spacing.spacing_2,
             fontSize: theme.typography.pxToRem(14),
         },
     };
     const sizeStyles = sizeConfig[size];
+    const paddingX = variant === 'tertiary' ? 0 : sizeStyles.paddingX;
+    const spinnerSize = size === 'small' ? designSystemTokens.iconSize.md : designSystemTokens.iconSize.xl;
+    const disabled = `&.${Button.buttonClasses.disabled}:not(.${Button.buttonClasses.loading})`;
     // Base styles shared by all variants
     const baseStyles = {
         height: sizeStyles.height,
-        padding: sizeStyles.padding,
+        padding: `0 ${paddingX}px`,
+        fontFamily: 'inherit',
         fontSize: sizeStyles.fontSize,
         fontWeight: designSystemTokens.typography.fontWeight.semiBold,
+        letterSpacing: 'inherit',
         lineHeight: '1.25rem',
         borderRadius: designSystemTokens.borderRadius.button,
         textTransform: 'none',
@@ -784,13 +779,56 @@ const StyledButtonBase$1 = styles.styled(ButtonBase, {
         position: 'relative',
         minWidth: 'fit-content',
         gap: designSystemTokens.spacing.spacing_1,
+        // `gap` spaces the icons; MUI's slot margins would add to it
+        [`& .${Button.buttonClasses.startIcon}, & .${Button.buttonClasses.endIcon}`]: {
+            margin: 0,
+        },
+        // MUI sets font-size on the icon slot's first child; IconSlot takes it so 1em icons keep the label's size
+        [`& .${Button.buttonClasses.startIcon} > *:nth-of-type(1), & .${Button.buttonClasses.endIcon} > *:nth-of-type(1)`]: {
+            fontSize: 'inherit',
+        },
+        // MUI's indicator is a sibling of the icon; anchoring sizes and places it on the icon
+        [`&.${Button.buttonClasses.loadingPositionStart} .${Button.buttonClasses.startIcon}, &.${Button.buttonClasses.loadingPositionEnd} .${Button.buttonClasses.endIcon}`]: {
+            anchorName: '--mod-button-icon',
+            // MUI fades the icon out while the spinner appears at full opacity
+            transition: 'none',
+        },
+        [`&.${Button.buttonClasses.loadingPositionStart} .${Button.buttonClasses.loadingIndicator}, &.${Button.buttonClasses.loadingPositionEnd} .${Button.buttonClasses.loadingIndicator}`]: {
+            // MUI switches it to relative for fullWidth
+            position: 'absolute',
+            positionAnchor: '--mod-button-icon',
+            // Square on the icon's centre; the slot can be taller than the icon, and a non-square box wobbles
+            inset: 'auto auto auto anchor(left)',
+            alignSelf: 'anchor-center',
+            width: 'anchor-size(width)',
+            height: 'anchor-size(width)',
+        },
+        // Without anchor positioning, the spinner takes the standard icon size at the icon's edge
+        '@supports not (anchor-name: --a)': {
+            [`&.${Button.buttonClasses.loadingPositionStart} .${Button.buttonClasses.loadingIndicator}`]: {
+                inset: 'auto',
+                left: paddingX,
+                width: spinnerSize,
+                height: spinnerSize,
+            },
+            [`&.${Button.buttonClasses.loadingPositionEnd} .${Button.buttonClasses.loadingIndicator}`]: {
+                inset: 'auto',
+                right: paddingX,
+                width: spinnerSize,
+                height: spinnerSize,
+            },
+        },
+        // Hide the label at once when loading starts, so it doesn't fade out under the spinner
+        [`&.${Button.buttonClasses.loading}`]: {
+            transitionProperty: 'background-color, border-color',
+        },
         // Disabled state (always show cursor)
-        [`&.${ButtonBase.buttonBaseClasses.disabled}`]: {
+        [`&.${Button.buttonClasses.disabled}`]: {
             cursor: 'not-allowed',
             pointerEvents: 'auto',
         },
         // Focus visible for keyboard navigation
-        [`&.${ButtonBase.buttonBaseClasses.focusVisible}`]: {
+        [`&.${Button.buttonClasses.focusVisible}`]: {
             outline: `2px solid ${designSystemTokens.semanticColors.color.border.focus}`,
             outlineOffset: 2,
         },
@@ -807,14 +845,10 @@ const StyledButtonBase$1 = styles.styled(ButtonBase, {
             '&:active': {
                 backgroundColor: designSystemTokens.semanticColors.button.primary.bgPressed,
             },
-            ...(loading
-                ? {}
-                : {
-                    [`&.${ButtonBase.buttonBaseClasses.disabled}`]: {
-                        backgroundColor: designSystemTokens.semanticColors.button.primary.bgDisabled,
-                        color: designSystemTokens.semanticColors.button.fgDisabled,
-                    },
-                }),
+            [disabled]: {
+                backgroundColor: designSystemTokens.semanticColors.button.primary.bgDisabled,
+                color: designSystemTokens.semanticColors.button.fgDisabled,
+            },
         },
         secondary: {
             backgroundColor: designSystemTokens.semanticColors.button.secondary.bg,
@@ -826,15 +860,11 @@ const StyledButtonBase$1 = styles.styled(ButtonBase, {
             '&:active': {
                 backgroundColor: designSystemTokens.semanticColors.button.secondary.bgPressed,
             },
-            ...(loading
-                ? {}
-                : {
-                    [`&.${ButtonBase.buttonBaseClasses.disabled}`]: {
-                        backgroundColor: designSystemTokens.semanticColors.button.secondary.bgDisabled,
-                        borderColor: designSystemTokens.semanticColors.color.border.primary,
-                        color: designSystemTokens.semanticColors.button.fgDisabled,
-                    },
-                }),
+            [disabled]: {
+                backgroundColor: designSystemTokens.semanticColors.button.secondary.bgDisabled,
+                borderColor: designSystemTokens.semanticColors.color.border.primary,
+                color: designSystemTokens.semanticColors.button.fgDisabled,
+            },
         },
         destructive: {
             backgroundColor: designSystemTokens.semanticColors.button.destructive.bg,
@@ -847,20 +877,15 @@ const StyledButtonBase$1 = styles.styled(ButtonBase, {
                 backgroundColor: designSystemTokens.semanticColors.color.status.error.fg,
                 filter: 'brightness(0.9)',
             },
-            ...(loading
-                ? {}
-                : {
-                    [`&.${ButtonBase.buttonBaseClasses.disabled}`]: {
-                        backgroundColor: designSystemTokens.semanticColors.button.primary.bgDisabled,
-                        color: designSystemTokens.semanticColors.button.fgDisabled,
-                    },
-                }),
+            [disabled]: {
+                backgroundColor: designSystemTokens.semanticColors.button.primary.bgDisabled,
+                color: designSystemTokens.semanticColors.button.fgDisabled,
+            },
         },
         tertiary: {
             backgroundColor: 'transparent',
             color: designSystemTokens.semanticColors.color.text.input,
             border: 'none',
-            padding: 0,
             lineHeight: 1,
             '&:hover': {
                 backgroundColor: 'transparent',
@@ -869,24 +894,26 @@ const StyledButtonBase$1 = styles.styled(ButtonBase, {
             '&:active': {
                 color: designSystemTokens.semanticColors.button.tertiary.fgPressed,
             },
-            ...(loading
-                ? {}
-                : {
-                    [`&.${ButtonBase.buttonBaseClasses.disabled}`]: {
-                        backgroundColor: 'transparent',
-                        color: designSystemTokens.semanticColors.button.tertiary.fgDisabled,
-                    },
-                }),
+            [disabled]: {
+                backgroundColor: 'transparent',
+                color: designSystemTokens.semanticColors.button.tertiary.fgDisabled,
+            },
         },
     };
+    // MUI greys a loading button as disabled; keep the label in the variant's colour
+    const { color } = variantStyles[variant];
     return {
         ...baseStyles,
         ...variantStyles[variant],
+        [`&.${Button.buttonClasses.loadingPositionStart}, &.${Button.buttonClasses.loadingPositionEnd}`]: { color },
     };
 });
+const IconSlot = styles.styled('span')({
+    display: 'contents',
+});
 const LoadingSpinner = styles.styled(CircularProgress, {
-    shouldForwardProp: prop => prop !== '$variant',
-})(({ $variant }) => {
+    shouldForwardProp: prop => prop !== 'buttonVariant',
+})(({ buttonVariant }) => {
     // Use appropriate spinner color for each variant to ensure visibility
     const spinnerColors = {
         primary: designSystemTokens.semanticColors.color.surface.raised,
@@ -895,14 +922,22 @@ const LoadingSpinner = styles.styled(CircularProgress, {
         tertiary: designSystemTokens.semanticColors.button.tertiary.fg,
     };
     return {
-        color: spinnerColors[$variant],
+        color: spinnerColors[buttonVariant],
     };
 });
 /**
- * ModButton - Text button component based on MUI ButtonBase
+ * ModButton - Text button component based on MUI Button
  */
-function ModButton({ variant = 'primary', size = 'medium', loading = false, children, disabled, startIcon, endIcon, ...rest }) {
-    return (jsxRuntime.jsx(StyledButtonBase$1, { variant: variant, size: size, loading: loading, disabled: disabled || loading, ...rest, children: loading ? (jsxRuntime.jsx(LoadingSpinner, { "$variant": variant, size: size === 'small' ? 16 : 20 })) : (jsxRuntime.jsxs(React.Fragment, { children: [startIcon, children, endIcon] })) }));
+function ModButton({ variant = 'primary', size = 'medium', loading = false, children, startIcon, endIcon, ...rest }) {
+    const loadingPosition = startIcon ? 'start' : endIcon ? 'end' : 'center';
+    // Mirrors MUI: the spinner is named by the button, which gets an id while loading
+    const generatedId = react.useId();
+    const id = rest.id ?? (loading ? generatedId : undefined);
+    return (jsxRuntime.jsx(StyledButton, { buttonVariant: variant, buttonSize: size, 
+        // Pinned so theme defaultProps or a ButtonGroup can't restyle it; ButtonBase had no focus ripple
+        variant: "text", size: "medium", color: "primary", disableFocusRipple: true, loading: loading, loadingPosition: loadingPosition, loadingIndicator: jsxRuntime.jsx(LoadingSpinner, { buttonVariant: variant, 
+            // With an icon, the anchored indicator is the icon's size and the spinner fills it
+            size: loadingPosition === 'center' ? (size === 'small' ? designSystemTokens.iconSize.md : designSystemTokens.iconSize.xl) : '100%', "aria-labelledby": id }), startIcon: startIcon && jsxRuntime.jsx(IconSlot, { children: startIcon }), endIcon: endIcon && jsxRuntime.jsx(IconSlot, { children: endIcon }), "aria-busy": loading || undefined, ...rest, id: id, children: children }));
 }
 ModButton.displayName = 'ModButton';
 
@@ -939,8 +974,8 @@ const StyledButtonTab = styles.styled(MuiToggleButton)(({ theme }) => ({
  * the Mui-selected class — we mirror that to aria-selected for tab semantics.
  */
 function useTabAriaSync() {
-    const observerRef = React.useRef(null);
-    return React.useCallback((node) => {
+    const observerRef = react.useRef(null);
+    return react.useCallback((node) => {
         if (observerRef.current) {
             observerRef.current.disconnect();
             observerRef.current = null;
@@ -1764,9 +1799,9 @@ sx: _sx, theme: _theme, ...props }) => {
     const apiRef = xDataGrid.useGridApiContext();
     const columns = xDataGrid.useGridSelector(apiRef, xDataGrid.gridColumnDefinitionsSelector);
     const columnVisibilityModel = xDataGrid.useGridSelector(apiRef, xDataGrid.gridColumnVisibilityModelSelector);
-    const [searchText, setSearchText] = React.useState('');
+    const [searchText, setSearchText] = react.useState('');
     // Filter columns based on search
-    const filteredColumns = React.useMemo(() => {
+    const filteredColumns = react.useMemo(() => {
         if (!searchText) {
             return columns;
         }
@@ -2205,7 +2240,7 @@ StyledGridFilterPanel.displayName = 'StyledGridFilterPanel';
  * <ModDataGrid rows={rows} columns={columns} slots={{ baseSelect: ModDataGridSelect }} />
  * ```
  */
-const ModDataGridSelect = React.forwardRef(function ModDataGridSelect({ id, label, labelId, disabled, fullWidth, size, style, slotProps, material, onChange, onClose, onKeyDown, ...rest }, ref) {
+const ModDataGridSelect = react.forwardRef(function ModDataGridSelect({ id, label, labelId, disabled, fullWidth, size, style, slotProps, material, onChange, onClose, onKeyDown, ...rest }, ref) {
     const theme = styles.useTheme();
     const hasLabel = label !== undefined;
     // The grid omits `size` in edit cells, where MUI's adapter falls back to the theme's TextField
@@ -3552,13 +3587,13 @@ ModIconWrapper.displayName = 'ModIconWrapper';
 function ModInfiniteScrollGrid({ onLoadMore, hasNextPage = true, loadMoreAtScrollPercent = 0.85, slots, slotProps: userSlotProps, sx: userSx, ...props }) {
     const defaultApiRef = xDataGridPro.useGridApiRef();
     const apiRef = props?.apiRef ? props.apiRef : defaultApiRef;
-    const scrollerRef = React.useRef(null);
-    const isLoadingRef = React.useRef(false);
-    const [isScrolling, setIsScrolling] = React.useState(false);
-    const scrollTimeoutRef = React.useRef(null);
+    const scrollerRef = react.useRef(null);
+    const isLoadingRef = react.useRef(false);
+    const [isScrolling, setIsScrolling] = react.useState(false);
+    const scrollTimeoutRef = react.useRef(null);
     // Infinite scroll handler
     // Based on moderne-ui implementation
-    React.useEffect(() => {
+    react.useEffect(() => {
         if (!onLoadMore) {
             return;
         }
@@ -4704,10 +4739,10 @@ const ModNavigationAvatar = ({ children, ...props }) => {
 };
 ModNavigationAvatar.displayName = 'ModNavigationAvatar';
 
-const ModSideNavContext = React.createContext({
+const ModSideNavContext = react.createContext({
     collapsed: false,
 });
-const useModSideNav = () => React.useContext(ModSideNavContext);
+const useModSideNav = () => react.useContext(ModSideNavContext);
 
 /**
  * Variant color configuration
@@ -4943,11 +4978,11 @@ function ModPageContent({ pageTitle, subtitle, breadcrumbs, action, sticky = fal
     const isFullBleed = layout === 'fullBleed';
     const contentMaxWidth = isFullBleed ? false : contentMaxWidthProp;
     const disableGutters = isFullBleed || disableGuttersProp;
-    const [showBackToTopButton, setShowBackToTopButton] = React.useState(false);
-    const headerRef = React.useRef(null);
-    const containerRef = React.useRef(null);
+    const [showBackToTopButton, setShowBackToTopButton] = react.useState(false);
+    const headerRef = react.useRef(null);
+    const containerRef = react.useRef(null);
     // Intersection observer for back to top button
-    React.useEffect(() => {
+    react.useEffect(() => {
         if (!showBackToTop || !headerRef.current) {
             return;
         }
@@ -5465,7 +5500,7 @@ const ModSelectField = ({ size = 'medium', destructive = false, label, required
 ModSelectField.displayName = 'ModSelectField';
 
 // Measure before paint so the fades don't flash; useEffect on the server.
-const useIsomorphicLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? react.useEffect : react.useLayoutEffect;
 const EXPANDED_WIDTH = 98;
 const COLLAPSED_WIDTH = 68;
 // The fade overlay must end on the same color as the rail to blend cleanly.
@@ -5595,14 +5630,14 @@ const Handle = styles.styled(ButtonBase)(({ theme }) => ({
  * Attach both `ref` and `onScroll` to the scroll element.
  */
 function useScrollEdges() {
-    const ref = React.useRef(null);
-    const contentRef = React.useRef(null);
+    const ref = react.useRef(null);
+    const contentRef = react.useRef(null);
     // Both start hidden; the layout effect corrects them before first paint.
-    const [edges, setEdges] = React.useState({
+    const [edges, setEdges] = react.useState({
         canScrollUp: false,
         canScrollDown: false,
     });
-    const measure = React.useCallback(() => {
+    const measure = react.useCallback(() => {
         const el = ref.current;
         if (!el) {
             return;
@@ -5619,7 +5654,7 @@ function useScrollEdges() {
     // Mount only; later changes come via the observer or onScroll.
     useIsomorphicLayoutEffect(measure, [measure]);
     // Resizes fire no scroll event: watch the viewport box and the content box.
-    React.useEffect(() => {
+    react.useEffect(() => {
         const el = ref.current;
         // Absent in jsdom; without it only resize tracking is lost.
         if (!el || typeof ResizeObserver === 'undefined') {
@@ -5652,7 +5687,7 @@ function useScrollEdges() {
  * pattern.
  */
 function ModSideNav({ collapsed, onCollapsedChange, header, footer, children, className, id, 'aria-label': ariaLabel, }) {
-    const contextValue = React.useMemo(() => ({ collapsed }), [collapsed]);
+    const contextValue = react.useMemo(() => ({ collapsed }), [collapsed]);
     const { ref: scrollRef, contentRef, onScroll, canScrollUp, canScrollDown } = useScrollEdges();
     const HandleIcon = collapsed ? lucideReact.ChevronRight : lucideReact.ChevronLeft;
     return (jsxRuntime.jsx(ModSideNavContext.Provider, { value: contextValue, children: jsxRuntime.jsxs(Frame, { collapsed: collapsed, children: [jsxRuntime.jsxs(Root, { collapsed: collapsed, "aria-label": ariaLabel, className: className, id: id, children: [jsxRuntime.jsxs(HeaderRegion, { children: [header, jsxRuntime.jsx(Fade, { edge: "header", visible: canScrollUp })] }), jsxRuntime.jsx(Scroll, { ref: scrollRef, onScroll: onScroll, "data-testid": "mod-side-nav-scroll", children: jsxRuntime.jsx(Stack, { ref: contentRef, sx: {
@@ -6272,8 +6307,8 @@ const ModToggleButtonGroup = ({ size = 'medium', variant = 'default', children,
     // Forward size and variant to each ModToggleButton child so consumers don't
     // have to set them on every button. MUI's group already does this via
     // context for its own size prop, but our shapes don't pass through unchanged.
-    const sized = React.Children.map(children, child => React.isValidElement(child) && child.type === ModToggleButton
-        ? React.cloneElement(child, { size, variant })
+    const sized = react.Children.map(children, child => react.isValidElement(child) && child.type === ModToggleButton
+        ? react.cloneElement(child, { size, variant })
         : child);
     return (jsxRuntime.jsx(StyledToggleButtonGroup$1, { groupVariant: variant, ...props, children: sized }));
 };
@@ -6351,7 +6386,7 @@ const ModTreeItemLabel = (props) => {
  *
  * Slot data is read from the item model (passed via `items` on ModTreeView).
  */
-const ModTreeItem = React.forwardRef(function ModTreeItem({ slots, slotProps, ...props }, ref) {
+const ModTreeItem = react.forwardRef(function ModTreeItem({ slots, slotProps, ...props }, ref) {
     return (jsxRuntime.jsx(TreeItem.TreeItem, { ref: ref, slots: { label: ModTreeItemLabel, ...slots }, 
         // itemId is not in MUI's label slot type but ModTreeItemLabel needs it for useTreeItemModel
         slotProps: {