diff --git a/docs/data/material/components/timeline/AlternateReverseTimeline.js b/docs/data/material/components/timeline/AlternateReverseTimeline.js
new file mode 100644
index 00000000000000..365ae472f990df
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+ Eat
+
+
+
+
+
+
+ Code
+
+
+
+
+
+
+ Sleep
+
+
+
+
+
+ Repeat
+
+
+ );
+}
diff --git a/docs/data/material/components/timeline/AlternateReverseTimeline.tsx b/docs/data/material/components/timeline/AlternateReverseTimeline.tsx
new file mode 100644
index 00000000000000..365ae472f990df
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+ Eat
+
+
+
+
+
+
+ Code
+
+
+
+
+
+
+ Sleep
+
+
+
+
+
+ Repeat
+
+
+ );
+}
diff --git a/docs/data/material/components/timeline/timeline.md b/docs/data/material/components/timeline/timeline.md
index d4c45eef716c6e..4f5dc67b8d0be5 100644
--- a/docs/data/material/components/timeline/timeline.md
+++ b/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.
diff --git a/docs/pages/material-ui/api/timeline-content.json b/docs/pages/material-ui/api/timeline-content.json
index b7a913412b8b9d..4f01714a919ead 100644
--- a/docs/pages/material-ui/api/timeline-content.json
+++ b/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"
},
diff --git a/docs/pages/material-ui/api/timeline-item.json b/docs/pages/material-ui/api/timeline-item.json
index ced818dac2016d..a335f7950848e8 100644
--- a/docs/pages/material-ui/api/timeline-item.json
+++ b/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'
| 'right'" } },
+ "position": {
+ "type": {
+ "name": "enum",
+ "description": "'alternate-reverse'
| 'alternate'
| 'left'
| 'right'"
+ }
+ },
"sx": {
"type": {
"name": "union",
@@ -17,6 +22,7 @@
"positionLeft",
"positionRight",
"positionAlternate",
+ "positionAlternateReverse",
"missingOppositeContent"
],
"globalClasses": {},
diff --git a/docs/pages/material-ui/api/timeline-opposite-content.json b/docs/pages/material-ui/api/timeline-opposite-content.json
index eae159e827f2f7..235a89d8e619a5 100644
--- a/docs/pages/material-ui/api/timeline-opposite-content.json
+++ b/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"
},
diff --git a/docs/pages/material-ui/api/timeline.json b/docs/pages/material-ui/api/timeline.json
index 866c82757dbf0e..fed6226ddafe3e 100644
--- a/docs/pages/material-ui/api/timeline.json
+++ b/docs/pages/material-ui/api/timeline.json
@@ -6,7 +6,7 @@
"position": {
"type": {
"name": "enum",
- "description": "'alternate'
| 'left'
| 'right'"
+ "description": "'alternate-reverse'
| 'alternate'
| 'left'
| 'right'"
},
"default": "'right'"
},
@@ -19,7 +19,13 @@
},
"name": "Timeline",
"styles": {
- "classes": ["root", "positionLeft", "positionRight", "positionAlternate"],
+ "classes": [
+ "root",
+ "positionLeft",
+ "positionRight",
+ "positionAlternate",
+ "positionAlternateReverse"
+ ],
"globalClasses": {},
"name": "MuiTimeline"
},
diff --git a/docs/translations/api-docs/timeline-content/timeline-content-pt.json b/docs/translations/api-docs/timeline-content/timeline-content-pt.json
index 858df7ec284e21..f08c3b56a9c975 100644
--- a/docs/translations/api-docs/timeline-content/timeline-content-pt.json
+++ b/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": "position=\"alternate\"
"
+ },
+ "positionAlternateReverse": {
+ "description": "Estilos aplicados para {{nodeName}} se {{conditions}}.",
+ "nodeName": "o elemento raiz",
+ "conditions": "position=\"alternate-reverse\"
"
}
}
}
diff --git a/docs/translations/api-docs/timeline-content/timeline-content-zh.json b/docs/translations/api-docs/timeline-content/timeline-content-zh.json
index 4310b7651c8561..2bfd73a7adb6fc 100644
--- a/docs/translations/api-docs/timeline-content/timeline-content-zh.json
+++ b/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": "position=\"alternate\"
"
+ },
+ "positionAlternateReverse": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "position=\"alternate-reverse\"
"
}
}
}
diff --git a/docs/translations/api-docs/timeline-content/timeline-content.json b/docs/translations/api-docs/timeline-content/timeline-content.json
index fe7780d3b79d08..17631e1745563a 100644
--- a/docs/translations/api-docs/timeline-content/timeline-content.json
+++ b/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": "position=\"alternate\"
"
+ },
+ "positionAlternateReverse": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "position=\"alternate-reverse\"
"
}
}
}
diff --git a/docs/translations/api-docs/timeline-item/timeline-item-pt.json b/docs/translations/api-docs/timeline-item/timeline-item-pt.json
index f17c73d40f7933..0ef0fd946b6478 100644
--- a/docs/translations/api-docs/timeline-item/timeline-item-pt.json
+++ b/docs/translations/api-docs/timeline-item/timeline-item-pt.json
@@ -25,6 +25,11 @@
"nodeName": "o elemento raiz",
"conditions": "position=\"alternate\"
"
},
+ "positionAlternateReverse": {
+ "description": "Estilos aplicados para {{nodeName}} se {{conditions}}.",
+ "nodeName": "o elemento raiz",
+ "conditions": "position=\"alternate-reverse\"
"
+ },
"missingOppositeContent": {
"description": "Estilos aplicados para {{nodeName}} se {{conditions}}.",
"nodeName": "o elemento raiz",
diff --git a/docs/translations/api-docs/timeline-item/timeline-item-zh.json b/docs/translations/api-docs/timeline-item/timeline-item-zh.json
index efbf8398ed4167..e37bfb0784c6b5 100644
--- a/docs/translations/api-docs/timeline-item/timeline-item-zh.json
+++ b/docs/translations/api-docs/timeline-item/timeline-item-zh.json
@@ -25,6 +25,11 @@
"nodeName": "the root element",
"conditions": "position=\"alternate\"
"
},
+ "positionAlternateReverse": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "position=\"alternate-reverse\"
"
+ },
"missingOppositeContent": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
diff --git a/docs/translations/api-docs/timeline-item/timeline-item.json b/docs/translations/api-docs/timeline-item/timeline-item.json
index f843be34566b50..886d84221d1491 100644
--- a/docs/translations/api-docs/timeline-item/timeline-item.json
+++ b/docs/translations/api-docs/timeline-item/timeline-item.json
@@ -23,6 +23,11 @@
"nodeName": "the root element",
"conditions": "position=\"alternate\"
"
},
+ "positionAlternateReverse": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "position=\"alternate-reverse\"
"
+ },
"missingOppositeContent": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
diff --git a/docs/translations/api-docs/timeline-opposite-content/timeline-opposite-content-pt.json b/docs/translations/api-docs/timeline-opposite-content/timeline-opposite-content-pt.json
index 858df7ec284e21..f08c3b56a9c975 100644
--- a/docs/translations/api-docs/timeline-opposite-content/timeline-opposite-content-pt.json
+++ b/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": "position=\"alternate\"
"
+ },
+ "positionAlternateReverse": {
+ "description": "Estilos aplicados para {{nodeName}} se {{conditions}}.",
+ "nodeName": "o elemento raiz",
+ "conditions": "position=\"alternate-reverse\"
"
}
}
}
diff --git a/docs/translations/api-docs/timeline-opposite-content/timeline-opposite-content-zh.json b/docs/translations/api-docs/timeline-opposite-content/timeline-opposite-content-zh.json
index 4310b7651c8561..2bfd73a7adb6fc 100644
--- a/docs/translations/api-docs/timeline-opposite-content/timeline-opposite-content-zh.json
+++ b/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": "position=\"alternate\"
"
+ },
+ "positionAlternateReverse": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "position=\"alternate-reverse\"
"
}
}
}
diff --git a/docs/translations/api-docs/timeline-opposite-content/timeline-opposite-content.json b/docs/translations/api-docs/timeline-opposite-content/timeline-opposite-content.json
index fe7780d3b79d08..17631e1745563a 100644
--- a/docs/translations/api-docs/timeline-opposite-content/timeline-opposite-content.json
+++ b/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": "position=\"alternate\"
"
+ },
+ "positionAlternateReverse": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "position=\"alternate-reverse\"
"
}
}
}
diff --git a/docs/translations/api-docs/timeline/timeline-pt.json b/docs/translations/api-docs/timeline/timeline-pt.json
index 7711b0c9f2a23a..d61fcb68d74929 100644
--- a/docs/translations/api-docs/timeline/timeline-pt.json
+++ b/docs/translations/api-docs/timeline/timeline-pt.json
@@ -25,6 +25,11 @@
"description": "Estilos aplicados para {{nodeName}} se {{conditions}}.",
"nodeName": "o elemento raiz",
"conditions": "position=\"alternate\"
"
+ },
+ "positionAlternateReverse": {
+ "description": "Estilos aplicados para {{nodeName}} se {{conditions}}.",
+ "nodeName": "o elemento raiz",
+ "conditions": "position=\"alternate-reverse\"
"
}
}
}
diff --git a/docs/translations/api-docs/timeline/timeline-zh.json b/docs/translations/api-docs/timeline/timeline-zh.json
index a1793d8cd67352..100336ad6f7429 100644
--- a/docs/translations/api-docs/timeline/timeline-zh.json
+++ b/docs/translations/api-docs/timeline/timeline-zh.json
@@ -25,6 +25,11 @@
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "position=\"alternate\"
"
+ },
+ "positionAlternateReverse": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "position=\"alternate-reverse\"
"
}
}
}
diff --git a/docs/translations/api-docs/timeline/timeline.json b/docs/translations/api-docs/timeline/timeline.json
index d803e513778edd..d6a1aee5a2429c 100644
--- a/docs/translations/api-docs/timeline/timeline.json
+++ b/docs/translations/api-docs/timeline/timeline.json
@@ -23,6 +23,11 @@
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "position=\"alternate\"
"
+ },
+ "positionAlternateReverse": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "position=\"alternate-reverse\"
"
}
}
}
diff --git a/packages/mui-lab/src/Timeline/Timeline.tsx b/packages/mui-lab/src/Timeline/Timeline.tsx
index fcc942d5fe3306..e4da2a1cf72d34 100644
--- a/packages/mui-lab/src/Timeline/Timeline.tsx
+++ b/packages/mui-lab/src/Timeline/Timeline.tsx
@@ -17,7 +17,7 @@ export interface TimelineProps extends StandardProps