;
@@ -224,6 +232,11 @@ ListItemButton.propTypes /* remove-proptypes */ = {
* if needed.
*/
focusVisibleClassName: PropTypes.string,
+ /**
+ * The content direction flow.
+ * @default 'horizontal'
+ */
+ orientation: PropTypes.oneOf(['horizontal', 'vertical']),
/**
* @ignore
*/
diff --git a/packages/mui-joy/src/ListItemButton/ListItemButtonOrientationContext.ts b/packages/mui-joy/src/ListItemButton/ListItemButtonOrientationContext.ts
new file mode 100644
index 00000000000000..94065dbc891508
--- /dev/null
+++ b/packages/mui-joy/src/ListItemButton/ListItemButtonOrientationContext.ts
@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+const ListItemButtonOrientationContext = React.createContext<'horizontal' | 'vertical'>(
+ 'horizontal',
+);
+
+export default ListItemButtonOrientationContext;
diff --git a/packages/mui-joy/src/ListItemButton/ListItemButtonProps.ts b/packages/mui-joy/src/ListItemButton/ListItemButtonProps.ts
index e178b9014127fa..87c2cdc95ad1f8 100644
--- a/packages/mui-joy/src/ListItemButton/ListItemButtonProps.ts
+++ b/packages/mui-joy/src/ListItemButton/ListItemButtonProps.ts
@@ -55,6 +55,11 @@ export interface ListItemButtonTypeMap {
const slots = {
@@ -19,13 +20,21 @@ const ListItemDecoratorRoot = styled('span', {
name: 'JoyListItemDecorator',
slot: 'Root',
overridesResolver: (props, styles) => styles.root,
-})<{ ownerState: ListItemDecoratorProps }>({
- boxSizing: 'border-box',
- display: 'inline-flex',
- alignItems: 'center',
- color: `var(--List-decorator-color)`,
- minInlineSize: 'var(--List-decorator-width)',
-});
+})<{ ownerState: ListItemDecoratorProps & { parentOrientation?: 'horizontal' | 'vertical' } }>(
+ ({ ownerState }) => ({
+ boxSizing: 'border-box',
+ display: 'inline-flex',
+ alignItems: 'center',
+ color: `var(--List-decorator-color)`,
+ ...(ownerState.parentOrientation === 'horizontal'
+ ? {
+ minInlineSize: 'var(--List-decorator-size)',
+ }
+ : {
+ minBlockSize: 'var(--List-decorator-size)',
+ }),
+ }),
+);
const ListItemDecorator = React.forwardRef(function ListItemDecorator(inProps, ref) {
const props = useThemeProps({
@@ -34,8 +43,10 @@ const ListItemDecorator = React.forwardRef(function ListItemDecorator(inProps, r
});
const { component, className, children, ...other } = props;
+ const parentOrientation = React.useContext(ListItemButtonOrientationContext);
const ownerState = {
+ parentOrientation,
...props,
};
diff --git a/packages/mui-joy/src/MenuItem/MenuItem.tsx b/packages/mui-joy/src/MenuItem/MenuItem.tsx
index bc578e9b3545b3..24d0997a53c320 100644
--- a/packages/mui-joy/src/MenuItem/MenuItem.tsx
+++ b/packages/mui-joy/src/MenuItem/MenuItem.tsx
@@ -34,7 +34,7 @@ const MenuItem = React.forwardRef(function MenuItem(inProps, ref) {
name: 'JoyMenuItem',
});
- const orientation = React.useContext(ListOrientationContext);
+ const parentOrientation = React.useContext(ListOrientationContext);
const {
children,
@@ -58,7 +58,7 @@ const MenuItem = React.forwardRef(function MenuItem(inProps, ref) {
disabled,
focusVisible,
selected,
- orientation,
+ parentOrientation,
variant,
};
diff --git a/packages/mui-joy/src/Option/Option.tsx b/packages/mui-joy/src/Option/Option.tsx
index ef85789e4a2d67..b23f5057ac3219 100644
--- a/packages/mui-joy/src/Option/Option.tsx
+++ b/packages/mui-joy/src/Option/Option.tsx
@@ -49,7 +49,7 @@ const Option = React.forwardRef(function Option(inProps, ref) {
...other
} = props;
- const orientation = React.useContext(ListOrientationContext);
+ const parentOrientation = React.useContext(ListOrientationContext);
const selectContext = React.useContext(SelectUnstyledContext) as SelectUnstyledContextType & {
color: ColorPaletteProp;
};
@@ -81,7 +81,7 @@ const Option = React.forwardRef(function Option(inProps, ref) {
component,
variant,
color,
- orientation,
+ parentOrientation,
};
const optionRef = React.useRef(null);
diff --git a/packages/mui-joy/src/Tab/Tab.tsx b/packages/mui-joy/src/Tab/Tab.tsx
index 14cfe7f5006a2a..0e4f26b234ed55 100644
--- a/packages/mui-joy/src/Tab/Tab.tsx
+++ b/packages/mui-joy/src/Tab/Tab.tsx
@@ -11,13 +11,15 @@ import styled from '../styles/styled';
import { getTabUtilityClass } from './tabClasses';
import { TabOwnerState, TabTypeMap } from './TabProps';
import ListOrientationContext from '../List/ListOrientationContext';
+import ListItemButtonOrientationContext from '../ListItemButton/ListItemButtonOrientationContext';
const useUtilityClasses = (ownerState: TabOwnerState) => {
- const { selected, disabled, focusVisible, variant, color } = ownerState;
+ const { selected, disabled, focusVisible, variant, color, orientation } = ownerState;
const slots = {
root: [
'root',
+ orientation,
disabled && 'disabled',
focusVisible && 'focusVisible',
selected && 'selected',
@@ -57,7 +59,7 @@ const Tab = React.forwardRef(function Tab(inProps, ref) {
name: 'JoyTab',
});
- const orientation = React.useContext(ListOrientationContext);
+ const parentOrientation = React.useContext(ListOrientationContext);
const {
action,
@@ -68,6 +70,7 @@ const Tab = React.forwardRef(function Tab(inProps, ref) {
onClick,
onFocus,
component = 'button',
+ orientation = 'horizontal',
variant = 'plain',
color = 'neutral',
...other
@@ -95,6 +98,7 @@ const Tab = React.forwardRef(function Tab(inProps, ref) {
const ownerState = {
...props,
orientation,
+ parentOrientation,
active,
focusVisible,
disabled,
@@ -118,8 +122,12 @@ const Tab = React.forwardRef(function Tab(inProps, ref) {
className: classes.root,
});
- // @ts-ignore `onChange` is conflicted
- return {children};
+ return (
+
+ {/* @ts-ignore ListItemButton base is div which conflict with TabProps 'button' */}
+ {children}
+
+ );
}) as OverridableComponent;
Tab.propTypes /* remove-proptypes */ = {
@@ -172,6 +180,11 @@ Tab.propTypes /* remove-proptypes */ = {
* @ignore
*/
onFocus: PropTypes.func,
+ /**
+ * The content direction flow.
+ * @default 'horizontal'
+ */
+ orientation: PropTypes.oneOf(['horizontal', 'vertical']),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
diff --git a/packages/mui-joy/src/Tab/TabProps.ts b/packages/mui-joy/src/Tab/TabProps.ts
index ade4a64a30c1a1..41ef321cdc1aa7 100644
--- a/packages/mui-joy/src/Tab/TabProps.ts
+++ b/packages/mui-joy/src/Tab/TabProps.ts
@@ -26,6 +26,11 @@ export interface TabTypeMap {
* @default false
*/
disabled?: boolean;
+ /**
+ * The content direction flow.
+ * @default 'horizontal'
+ */
+ orientation?: 'horizontal' | 'vertical';
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/