@moderneinc/neo-styled-components 2.0.2-next.b7dcad → 2.0.3-next.901bb3

package/dist/PageContent/PageContent.d.ts

@@ -1,6 +1,15 @@
 import type { BoxProps } from '@mui/material/Box';
 import type { Breakpoint } from '@mui/material/styles';
 import { type ReactNode } from 'react';
+/**
+ * Breadcrumb item configuration
+ */
+export interface BreadcrumbItem {
+    /** Link label */
+    label: ReactNode;
+    /** Link href (omit for current/last item) */
+    href?: string;
+}
 export interface NeoPageContentProps extends BoxProps {
     /**
      * Main heading displayed on the page
@@ -12,6 +21,20 @@ export interface NeoPageContentProps extends BoxProps {
      * Optional subtitle displayed below the page title
      */
     subtitle?: ReactNode | string;
+    /**
+     * Optional breadcrumbs navigation displayed above the page title.
+     * Last item is automatically marked as current.
+     *
+     * @example
+     * ```tsx
+     * breadcrumbs={[
+     *   { label: 'Settings', href: '/settings' },
+     *   { label: 'Team', href: '/team' },
+     *   { label: 'Team Details' },
+     * ]}
+     * ```
+     */
+    breadcrumbs?: BreadcrumbItem[];
     /**
      * Action button displayed in the top-right corner
      *
@@ -28,6 +51,11 @@ export interface NeoPageContentProps extends BoxProps {
      * @default false
      */
     contentMaxWidth?: Breakpoint | false;
+    /**
+     * Center content when using contentMaxWidth
+     * @default true
+     */
+    centerContent?: boolean;
     /**
      * Disable gutters/padding
      * @default false
@@ -103,7 +131,7 @@ export interface NeoPageContentProps extends BoxProps {
  * </NeoPageContent>
  * ```
  */
-export declare function NeoPageContent({ pageTitle, subtitle, action, sticky, contentMaxWidth, disableGutters, isLoading, showBackToTop, children, sx, ...boxProps }: NeoPageContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function NeoPageContent({ pageTitle, subtitle, breadcrumbs, action, sticky, contentMaxWidth, centerContent, disableGutters, isLoading, showBackToTop, children, sx, ...boxProps }: NeoPageContentProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace NeoPageContent {
     var displayName: string;
 }

package/dist/index.d.ts

@@ -1596,6 +1596,15 @@ declare const NeoModalFooter: {
     displayName: string;
 };
 
+/**
+ * Breadcrumb item configuration
+ */
+interface BreadcrumbItem {
+    /** Link label */
+    label: ReactNode;
+    /** Link href (omit for current/last item) */
+    href?: string;
+}
 interface NeoPageContentProps extends BoxProps {
     /**
      * Main heading displayed on the page
@@ -1607,6 +1616,20 @@ interface NeoPageContentProps extends BoxProps {
      * Optional subtitle displayed below the page title
      */
     subtitle?: ReactNode | string;
+    /**
+     * Optional breadcrumbs navigation displayed above the page title.
+     * Last item is automatically marked as current.
+     *
+     * @example
+     * ```tsx
+     * breadcrumbs={[
+     *   { label: 'Settings', href: '/settings' },
+     *   { label: 'Team', href: '/team' },
+     *   { label: 'Team Details' },
+     * ]}
+     * ```
+     */
+    breadcrumbs?: BreadcrumbItem[];
     /**
      * Action button displayed in the top-right corner
      *
@@ -1623,6 +1646,11 @@ interface NeoPageContentProps extends BoxProps {
      * @default false
      */
     contentMaxWidth?: Breakpoint | false;
+    /**
+     * Center content when using contentMaxWidth
+     * @default true
+     */
+    centerContent?: boolean;
     /**
      * Disable gutters/padding
      * @default false
@@ -1698,7 +1726,7 @@ interface NeoPageContentProps extends BoxProps {
  * </NeoPageContent>
  * ```
  */
-declare function NeoPageContent({ pageTitle, subtitle, action, sticky, contentMaxWidth, disableGutters, isLoading, showBackToTop, children, sx, ...boxProps }: NeoPageContentProps): react_jsx_runtime.JSX.Element;
+declare function NeoPageContent({ pageTitle, subtitle, breadcrumbs, action, sticky, contentMaxWidth, centerContent, disableGutters, isLoading, showBackToTop, children, sx, ...boxProps }: NeoPageContentProps): react_jsx_runtime.JSX.Element;
 declare namespace NeoPageContent {
     var displayName: string;
 }
@@ -2702,4 +2730,4 @@ declare module '@mui/x-data-grid-pro' {
 declare const version: string
 
 export { ActivityScene, CIRCLE_RADIUS, NeoActivityHeader, NeoActivityIndicatorCell, NeoAvatar, NeoBadge, NeoBanner, NeoBreadcrumbLink, NeoBreadcrumbs, NeoButton, NeoButtonGroup, NeoCheckbox, NeoCodeSnippet, NeoDataGrid, NeoDataGridCellContent, NeoDataGridColumnsButton, NeoDataGridColumnsPanel, NeoDataGridFilterPanel, NeoDataGridFilterPanelAddIcon, NeoDataGridFilterPanelDeleteIcon, NeoDataGridFilterPanelRemoveAllIcon, NeoDataGridFiltersButton, NeoDataGridHeaderLabel, NeoSelect as NeoDataGridSelect, NeoDatePicker, NeoDivider, NeoDot, NeoFooter, NeoIconButton, NeoInfiniteScrollGrid, NeoInputField, NeoListItem, NeoListItemButton, NeoLoadingSpinner, NeoMarketplaceCard, NeoMenu, NeoMenuItem, NeoModal, NeoModalContent, NeoModalFooter, NeoModalHeader, NeoMultiBadgesCell, NeoPageContent, NeoPaginatedGrid, NeoProgressbar, NeoQuickFilter, NeoRadio, NeoSelect, NeoMenuItem as NeoSelectOption, NeoSkeleton, NeoStatusBadgeCell, NeoStatusBanner, NeoTab, NeoTabs, NeoTag, NeoToast, NeoToastButton, NeoToggle, NeoToolbar, NeoTooltip, StyledToggleButton as NeoTypologyButton, NeoTypologyControl, NeoUserAvatarCell, SortedAscendingIcon, SortedDescendingIcon, UnsortedIcon, getDataGridHeaderStyles, version };
-export type { ActivityColor, ActivityEvent, ActivityHeaderSize, DataGridSize, NeoActivityHeaderProps, NeoActivityIndicatorCellProps, NeoAvatarProps, NeoBadgeProps, NeoBannerProps, NeoBreadcrumbLinkProps, NeoBreadcrumbsProps, NeoButtonGroupProps, NeoButtonProps, NeoCheckboxProps, NeoCodeSnippetProps, NeoDataGridCellContentProps, NeoDataGridHeaderLabelProps, NeoDataGridProps, NeoDatePickerProps, NeoDividerProps, NeoDotProps, NeoFooterProps, NeoIconButtonProps, NeoInfiniteScrollGridProps, NeoInputFieldProps, NeoListItemButtonProps, NeoListItemProps, NeoLoadingSpinnerProps, NeoMarketplaceCardProps, NeoMenuItemProps, NeoMenuProps, NeoModalContentProps, NeoModalFooterProps, NeoModalHeaderProps, NeoModalProps, NeoMultiBadgesCellProps, NeoPageContentProps, NeoPaginatedGridProps, NeoProgressbarProps, NeoQuickFilterProps, NeoRadioProps, NeoSelectProps, NeoSkeletonProps, NeoStatusBadgeCellProps, NeoStatusBannerProps, NeoTabProps, NeoTagProps, NeoToastProps, NeoToggleProps, NeoToolbarProps, NeoTooltipProps, NeoTypologyControlProps, NeoUserAvatarCellProps };
+export type { ActivityColor, ActivityEvent, ActivityHeaderSize, BreadcrumbItem, DataGridSize, NeoActivityHeaderProps, NeoActivityIndicatorCellProps, NeoAvatarProps, NeoBadgeProps, NeoBannerProps, NeoBreadcrumbLinkProps, NeoBreadcrumbsProps, NeoButtonGroupProps, NeoButtonProps, NeoCheckboxProps, NeoCodeSnippetProps, NeoDataGridCellContentProps, NeoDataGridHeaderLabelProps, NeoDataGridProps, NeoDatePickerProps, NeoDividerProps, NeoDotProps, NeoFooterProps, NeoIconButtonProps, NeoInfiniteScrollGridProps, NeoInputFieldProps, NeoListItemButtonProps, NeoListItemProps, NeoLoadingSpinnerProps, NeoMarketplaceCardProps, NeoMenuItemProps, NeoMenuProps, NeoModalContentProps, NeoModalFooterProps, NeoModalHeaderProps, NeoModalProps, NeoMultiBadgesCellProps, NeoPageContentProps, NeoPaginatedGridProps, NeoProgressbarProps, NeoQuickFilterProps, NeoRadioProps, NeoSelectProps, NeoSkeletonProps, NeoStatusBadgeCellProps, NeoStatusBannerProps, NeoTabProps, NeoTagProps, NeoToastProps, NeoToggleProps, NeoToolbarProps, NeoTooltipProps, NeoTypologyControlProps, NeoUserAvatarCellProps };

package/dist/index.esm.js

@@ -4047,12 +4047,13 @@ const StyledListItemButton$1 = styled(ListItemButton, {
         prop !== 'secondaryText' &&
         prop !== 'badge' &&
         prop !== 'icon' &&
-        prop !== 'isLink',
-})(({ theme, size = 'medium', isLink }) => {
+        prop !== 'isLink' &&
+        prop !== 'hasSecondaryText',
+})(({ theme, size = 'medium', isLink, hasSecondaryText }) => {
     const config = sizeConfig[size];
     return {
         minHeight: config.height,
-        height: config.height,
+        height: hasSecondaryText ? 'auto' : config.height,
         paddingTop: config.paddingTop,
         paddingRight: config.paddingRight,
         paddingBottom: config.paddingBottom,
@@ -4060,6 +4061,8 @@ const StyledListItemButton$1 = styled(ListItemButton, {
         borderRadius: spacing.spacing_3_4, // 6px
         backgroundColor: semanticColors.input.background,
         gap: config.gap,
+        // Icon is always centered vertically per Figma design
+        alignItems: 'center',
         transition: theme.transitions.create(['background-color'], {
             duration: theme.transitions.duration.short,
         }),
@@ -4092,15 +4095,14 @@ const StyledListItemButton$1 = styled(ListItemButton, {
             fontWeight: typography.fontWeight.regular,
             color: semanticColors.typography.bodySecondary,
         },
-        // Secondary text styling
+        // Secondary text styling - wraps with word break
         '& .list-item-secondary': {
             fontSize: theme.typography.pxToRem('secondaryFontSize' in config ? config.secondaryFontSize : config.fontSize),
             lineHeight: size === 'large' ? 1.5 : 1.4,
             fontWeight: typography.fontWeight.regular,
             color: semanticColors.typography.bodySecondary,
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
+            wordBreak: 'break-word',
+            whiteSpace: 'normal',
             ...(size === 'large' && {
                 marginBottom: -2,
             }),
@@ -4192,7 +4194,7 @@ const NeoListItem = ({ size = 'medium', primaryText, secondaryText, badge, icon,
     const showBadge = badge && size === 'xxlarge';
     // Prepare primary text with badge if needed
     const primaryContent = showBadge ? (jsxs(Fragment, { children: [primaryText, ' ', jsx(Typography, { component: "span", className: "list-item-badge", children: badge })] })) : (primaryText);
-    return (jsxs(StyledListItemButton$1, { size: size, isLink: isLink, ...(component && { component }), ...props, children: [icon && jsx(ListItemIcon, { children: icon }), jsx(ListItemText, { primary: primaryContent, secondary: showSecondaryText ? secondaryText : undefined, slotProps: {
+    return (jsxs(StyledListItemButton$1, { size: size, isLink: isLink, hasSecondaryText: !!showSecondaryText, ...(component && { component }), ...props, children: [icon && jsx(ListItemIcon, { children: icon }), jsx(ListItemText, { primary: primaryContent, secondary: showSecondaryText ? secondaryText : undefined, sx: { minWidth: 0, flex: 1 }, slotProps: {
                     primary: { className: 'list-item-primary' },
                     secondary: { className: 'list-item-secondary' },
                 } })] }));
@@ -4769,7 +4771,7 @@ const Subtitle = styled(Typography)(() => ({
  * </NeoPageContent>
  * ```
  */
-function NeoPageContent({ pageTitle, subtitle, action, sticky = false, contentMaxWidth = false, disableGutters = false, isLoading = false, showBackToTop = true, children, sx, ...boxProps }) {
+function NeoPageContent({ pageTitle, subtitle, breadcrumbs, action, sticky = false, contentMaxWidth = false, centerContent = true, disableGutters = false, isLoading = false, showBackToTop = true, children, sx, ...boxProps }) {
     const [showBackToTopButton, setShowBackToTopButton] = useState(false);
     const headerRef = useRef(null);
     const containerRef = useRef(null);
@@ -4799,8 +4801,8 @@ function NeoPageContent({ pageTitle, subtitle, action, sticky = false, contentMa
         // Also try to scroll window in case component is in a different context
         window.scrollTo({ top: 0, behavior: 'smooth' });
     };
-    const headerContent = (jsxs(Stack, { ref: headerRef, direction: "row", justifyContent: "space-between", alignItems: "flex-start", sx: { flexShrink: 0, gap: spacing.spacing_2 }, children: [jsxs(Stack, { sx: { gap: spacing.spacing_1, flexGrow: 1 }, children: [jsx(PageTitle, { children: pageTitle }), subtitle &&
-                        (typeof subtitle === 'string' ? (jsx(Subtitle, { variant: "caption", children: subtitle })) : (subtitle))] }), action] }));
+    const headerContent = (jsxs(Stack, { ref: headerRef, sx: { flexShrink: 0, gap: '0.5rem' }, children: [breadcrumbs && breadcrumbs.length > 0 && (jsx(NeoBreadcrumbs, { children: breadcrumbs.map((item, index) => (jsx(NeoBreadcrumbLink, { href: item.href, current: index === breadcrumbs.length - 1, children: item.label }, item.href ?? index))) })), jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "flex-start", sx: { gap: '1rem' }, children: [jsxs(Stack, { sx: { gap: '0.5rem', flexGrow: 1 }, children: [jsx(PageTitle, { children: pageTitle }), subtitle &&
+                                (typeof subtitle === 'string' ? (jsx(Subtitle, { variant: "caption", children: subtitle })) : (subtitle))] }), action] })] }));
     const content = isLoading ? (jsx(Box, { sx: {
             display: 'flex',
             alignItems: 'center',
@@ -4831,8 +4833,8 @@ function NeoPageContent({ pageTitle, subtitle, action, sticky = false, contentMa
                                 flexDirection: 'column',
                                 ...(contentMaxWidth !== false && {
                                     maxWidth: theme => theme.breakpoints.values[contentMaxWidth],
-                                    mx: 'auto',
                                     width: '100%',
+                                    ...(centerContent ? { mx: 'auto' } : { alignSelf: 'flex-start' }),
                                 }),
                             }, children: content })] }) }), showBackToTop && (jsx(Fade, { in: showBackToTopButton, children: jsx(Box, { sx: {
                         position: 'fixed',