[Timeline] Add alternate reverse position

docs/data/material/components/timeline/AlternateReverseTimeline.js

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import Timeline from '@mui/lab/Timeline';
+import TimelineItem from '@mui/lab/TimelineItem';
+import TimelineSeparator from '@mui/lab/TimelineSeparator';
+import TimelineConnector from '@mui/lab/TimelineConnector';
+import TimelineContent from '@mui/lab/TimelineContent';
+import TimelineDot from '@mui/lab/TimelineDot';
+
+export default function AlternateReverseTimeline() {
+  return (
+    <Timeline position="alternate-reverse">
+      <TimelineItem>
+        <TimelineSeparator>
+          <TimelineDot />
+          <TimelineConnector />
+        </TimelineSeparator>
+        <TimelineContent>Eat</TimelineContent>
+      </TimelineItem>
+      <TimelineItem>
+        <TimelineSeparator>
+          <TimelineDot />
+          <TimelineConnector />
+        </TimelineSeparator>
+        <TimelineContent>Code</TimelineContent>
+      </TimelineItem>
+      <TimelineItem>
+        <TimelineSeparator>
+          <TimelineDot />
+          <TimelineConnector />
+        </TimelineSeparator>
+        <TimelineContent>Sleep</TimelineContent>
+      </TimelineItem>
+      <TimelineItem>
+        <TimelineSeparator>
+          <TimelineDot />
+        </TimelineSeparator>
+        <TimelineContent>Repeat</TimelineContent>
+      </TimelineItem>
+    </Timeline>
+  );
+}

docs/data/material/components/timeline/AlternateReverseTimeline.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import Timeline from '@mui/lab/Timeline';
+import TimelineItem from '@mui/lab/TimelineItem';
+import TimelineSeparator from '@mui/lab/TimelineSeparator';
+import TimelineConnector from '@mui/lab/TimelineConnector';
+import TimelineContent from '@mui/lab/TimelineContent';
+import TimelineDot from '@mui/lab/TimelineDot';
+
+export default function AlternateReverseTimeline() {
+  return (
+    <Timeline position="alternate-reverse">
+      <TimelineItem>
+        <TimelineSeparator>
+          <TimelineDot />
+          <TimelineConnector />
+        </TimelineSeparator>
+        <TimelineContent>Eat</TimelineContent>
+      </TimelineItem>
+      <TimelineItem>
+        <TimelineSeparator>
+          <TimelineDot />
+          <TimelineConnector />
+        </TimelineSeparator>
+        <TimelineContent>Code</TimelineContent>
+      </TimelineItem>
+      <TimelineItem>
+        <TimelineSeparator>
+          <TimelineDot />
+          <TimelineConnector />
+        </TimelineSeparator>
+        <TimelineContent>Sleep</TimelineContent>
+      </TimelineItem>
+      <TimelineItem>
+        <TimelineSeparator>
+          <TimelineDot />
+        </TimelineSeparator>
+        <TimelineContent>Repeat</TimelineContent>
+      </TimelineItem>
+    </Timeline>
+  );
+}

docs/data/material/components/timeline/timeline.md

@@ -34,6 +34,12 @@ The timeline can display the events on alternating sides.
 
 {{"demo": "AlternateTimeline.js"}}
 
+## Reverse Alternating timeline
+
+The timeline can display the events on alternating sides in reverse order.
+
+{{"demo": "AlternateReverseTimeline.js"}}
+
 ## Color
 
 The `TimelineDot` can appear in different colors from theme palette.

docs/pages/material-ui/api/timeline-content.json

@@ -11,7 +11,13 @@
   },
   "name": "TimelineContent",
   "styles": {
-    "classes": ["root", "positionRight", "positionLeft", "positionAlternate"],
+    "classes": [
+      "root",
+      "positionRight",
+      "positionLeft",
+      "positionAlternate",
+      "positionAlternateReverse"
+    ],
     "globalClasses": {},
     "name": "MuiTimelineContent"
   },

docs/pages/material-ui/api/timeline-item.json

@@ -2,7 +2,12 @@
   "props": {
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" } },
-    "position": { "type": { "name": "enum", "description": "'left'<br>&#124;&nbsp;'right'" } },
+    "position": {
+      "type": {
+        "name": "enum",
+        "description": "'alternate-reverse'<br>&#124;&nbsp;'alternate'<br>&#124;&nbsp;'left'<br>&#124;&nbsp;'right'"
+      }
+    },
     "sx": {
       "type": {
         "name": "union",
@@ -17,6 +22,7 @@
       "positionLeft",
       "positionRight",
       "positionAlternate",
+      "positionAlternateReverse",
       "missingOppositeContent"
     ],
     "globalClasses": {},

docs/pages/material-ui/api/timeline-opposite-content.json

@@ -11,7 +11,13 @@
   },
   "name": "TimelineOppositeContent",
   "styles": {
-    "classes": ["root", "positionRight", "positionLeft", "positionAlternate"],
+    "classes": [
+      "root",
+      "positionRight",
+      "positionLeft",
+      "positionAlternate",
+      "positionAlternateReverse"
+    ],
     "globalClasses": {},
     "name": "MuiTimelineOppositeContent"
   },

docs/pages/material-ui/api/timeline.json

@@ -6,7 +6,7 @@
     "position": {
       "type": {
         "name": "enum",
-        "description": "'alternate'<br>&#124;&nbsp;'left'<br>&#124;&nbsp;'right'"
+        "description": "'alternate-reverse'<br>&#124;&nbsp;'alternate'<br>&#124;&nbsp;'left'<br>&#124;&nbsp;'right'"
       },
       "default": "'right'"
     },
@@ -19,7 +19,13 @@
   },
   "name": "Timeline",
   "styles": {
-    "classes": ["root", "positionLeft", "positionRight", "positionAlternate"],
+    "classes": [
+      "root",
+      "positionLeft",
+      "positionRight",
+      "positionAlternate",
+      "positionAlternateReverse"
+    ],
     "globalClasses": {},
     "name": "MuiTimeline"
   },

docs/translations/api-docs/timeline-content/timeline-content-pt.json

@@ -23,6 +23,11 @@
       "description": "Estilos aplicados para {{nodeName}} se {{conditions}}.",
       "nodeName": "o elemento raiz",
       "conditions": "<code>position=\"alternate\"</code>"
+    },
+    "positionAlternateReverse": {
+      "description": "Estilos aplicados para {{nodeName}} se {{conditions}}.",
+      "nodeName": "o elemento raiz",
+      "conditions": "<code>position=\"alternate-reverse\"</code>"
     }
   }
 }

docs/translations/api-docs/timeline-content/timeline-content-zh.json

@@ -23,6 +23,11 @@
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>position=\"alternate\"</code>"
+    },
+    "positionAlternateReverse": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>position=\"alternate-reverse\"</code>"
     }
   }
 }

docs/translations/api-docs/timeline-content/timeline-content.json

@@ -21,6 +21,11 @@
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>position=\"alternate\"</code>"
+    },
+    "positionAlternateReverse": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>position=\"alternate-reverse\"</code>"
     }
   }
 }

docs/translations/api-docs/timeline-item/timeline-item-pt.json

@@ -25,6 +25,11 @@
       "nodeName": "o elemento raiz",
       "conditions": "<code>position=\"alternate\"</code>"
     },
+    "positionAlternateReverse": {
+      "description": "Estilos aplicados para {{nodeName}} se {{conditions}}.",
+      "nodeName": "o elemento raiz",
+      "conditions": "<code>position=\"alternate-reverse\"</code>"
+    },
     "missingOppositeContent": {
       "description": "Estilos aplicados para {{nodeName}} se {{conditions}}.",
       "nodeName": "o elemento raiz",

docs/translations/api-docs/timeline-item/timeline-item-zh.json

@@ -25,6 +25,11 @@
       "nodeName": "the root element",
       "conditions": "<code>position=\"alternate\"</code>"
     },
+    "positionAlternateReverse": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>position=\"alternate-reverse\"</code>"
+    },
     "missingOppositeContent": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",

docs/translations/api-docs/timeline-item/timeline-item.json

@@ -23,6 +23,11 @@
       "nodeName": "the root element",
       "conditions": "<code>position=\"alternate\"</code>"
     },
+    "positionAlternateReverse": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>position=\"alternate-reverse\"</code>"
+    },
     "missingOppositeContent": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",

docs/translations/api-docs/timeline-opposite-content/timeline-opposite-content-pt.json

@@ -23,6 +23,11 @@
       "description": "Estilos aplicados para {{nodeName}} se {{conditions}}.",
       "nodeName": "o elemento raiz",
       "conditions": "<code>position=\"alternate\"</code>"
+    },
+    "positionAlternateReverse": {
+      "description": "Estilos aplicados para {{nodeName}} se {{conditions}}.",
+      "nodeName": "o elemento raiz",
+      "conditions": "<code>position=\"alternate-reverse\"</code>"
     }
   }
 }

docs/translations/api-docs/timeline-opposite-content/timeline-opposite-content-zh.json

@@ -23,6 +23,11 @@
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>position=\"alternate\"</code>"
+    },
+    "positionAlternateReverse": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>position=\"alternate-reverse\"</code>"
     }
   }
 }

docs/translations/api-docs/timeline-opposite-content/timeline-opposite-content.json

@@ -21,6 +21,11 @@
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>position=\"alternate\"</code>"
+    },
+    "positionAlternateReverse": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>position=\"alternate-reverse\"</code>"
     }
   }
 }

docs/translations/api-docs/timeline/timeline-pt.json

@@ -25,6 +25,11 @@
       "description": "Estilos aplicados para {{nodeName}} se {{conditions}}.",
       "nodeName": "o elemento raiz",
       "conditions": "<code>position=\"alternate\"</code>"
+    },
+    "positionAlternateReverse": {
+      "description": "Estilos aplicados para {{nodeName}} se {{conditions}}.",
+      "nodeName": "o elemento raiz",
+      "conditions": "<code>position=\"alternate-reverse\"</code>"
     }
   }
 }

docs/translations/api-docs/timeline/timeline-zh.json

@@ -25,6 +25,11 @@
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>position=\"alternate\"</code>"
+    },
+    "positionAlternateReverse": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>position=\"alternate-reverse\"</code>"
     }
   }
 }

docs/translations/api-docs/timeline/timeline.json

@@ -23,6 +23,11 @@
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>position=\"alternate\"</code>"
+    },
+    "positionAlternateReverse": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>position=\"alternate-reverse\"</code>"
     }
   }
 }

packages/mui-lab/src/Timeline/Timeline.tsx

@@ -17,7 +17,7 @@ export interface TimelineProps extends StandardProps<React.HTMLAttributes<HTMLUL
    * The position where the TimelineContent should appear relative to the time axis.
    * @default 'right'
    */
-  position?: 'left' | 'right' | 'alternate';
+  position?: 'left' | 'right' | 'alternate' | 'alternate-reverse';
   /**
    * The content of the component.
    */
@@ -34,6 +34,8 @@ export interface TimelineProps extends StandardProps<React.HTMLAttributes<HTMLUL
     positionRight?: string;
     /** Styles applied to the root element if `position="alternate"`. */
     positionAlternate?: string;
+    /** Styles applied to the root element if `position="alternate-reverse"`. */
+    positionAlternateReverse?: string;
   };
 
   /**
@@ -128,7 +130,7 @@ Timeline.propTypes /* remove-proptypes */ = {
    * The position where the TimelineContent should appear relative to the time axis.
    * @default 'right'
    */
-  position: PropTypes.oneOf(['alternate', 'left', 'right']),
+  position: PropTypes.oneOf(['alternate-reverse', 'alternate', 'left', 'right']),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

packages/mui-lab/src/Timeline/timelineClasses.ts

@@ -10,6 +10,7 @@ const timelineClasses = generateUtilityClasses('MuiTimeline', [
   'positionLeft',
   'positionRight',
   'positionAlternate',
+  'positionAlternateReverse',
 ]);
 
 export default timelineClasses;

packages/mui-lab/src/TimelineContent/timelineContentClasses.ts

@@ -10,6 +10,8 @@ export interface TimelineContentClasses {
   positionLeft: string;
   /** Styles applied to the root element if `position="alternate"`. */
   positionAlternate: string;
+  /** Styles applied to the root element if `position="alternate-reverse"`. */
+  positionAlternateReverse: string;
 }
 
 export type TimelineContentClassKey = keyof TimelineContentClasses;
@@ -20,7 +22,7 @@ export function getTimelineContentUtilityClass(slot: string): string {
 
 const timelineContentClasses: TimelineContentClasses = generateUtilityClasses(
   'MuiTimelineContent',
-  ['root', 'positionLeft', 'positionRight', 'positionAlternate'],
+  ['root', 'positionLeft', 'positionRight', 'positionAlternate', 'positionAlternateReverse'],
 );
 
 export default timelineContentClasses;

packages/mui-lab/src/TimelineItem/TimelineItem.d.ts

@@ -8,7 +8,7 @@ export interface TimelineItemProps extends StandardProps<React.HTMLAttributes<HT
   /**
    * The position where the timeline's item should appear.
    */
-  position?: 'left' | 'right';
+  position?: 'left' | 'right' | 'alternate' | 'alternate-reverse';
   /**
    * The content of the component.
    */

packages/mui-lab/src/TimelineItem/TimelineItem.js

@@ -39,8 +39,8 @@ const TimelineItemRoot = styled('li', {
   ...(ownerState.position === 'left' && {
     flexDirection: 'row-reverse',
   }),
-  ...(ownerState.position === 'alternate' && {
-    '&:nth-of-type(even)': {
+  ...((ownerState.position === 'alternate' || ownerState.position === 'alternate-reverse') && {
+    [`&:nth-of-type(${ownerState.position === 'alternate' ? 'even' : 'odd'})`]: {
       flexDirection: 'row-reverse',
       [`& .${timelineContentClasses.root}`]: {
         textAlign: 'right',
@@ -117,7 +117,7 @@ TimelineItem.propTypes /* remove-proptypes */ = {
   /**
    * The position where the timeline's item should appear.
    */
-  position: PropTypes.oneOf(['left', 'right']),
+  position: PropTypes.oneOf(['alternate-reverse', 'alternate', 'left', 'right']),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */