@itwin/itwinui-react
Version:
A react component library for iTwinUI
106 lines (105 loc) • 2.98 kB
JavaScript
import * as React from 'react';
import cx from 'classnames';
import { SvgChevronRight, Box, useControlledState } from '../../utils/index.js';
import { IconButton } from '../Buttons/IconButton.js';
import { FloatingDelayGroup } from '@floating-ui/react';
import { defaultTooltipDelay } from '../Tooltip/Tooltip.js';
export const SidenavExpandedContext = React.createContext(void 0);
export const SideNavigation = React.forwardRef((props, forwardedRef) => {
let {
items,
secondaryItems,
expanderPlacement = 'top',
className,
isExpanded: isExpandedProp,
onExpanderClick,
submenu,
isSubmenuOpen = false,
wrapperProps,
contentProps,
topProps,
bottomProps,
...rest
} = props;
let [isExpanded, setIsExpanded] = useControlledState(false, isExpandedProp);
let ExpandButton = React.createElement(
IconButton,
{
label: 'Toggle icon labels',
'aria-expanded': isExpanded,
className: 'iui-sidenav-button iui-expand',
size: 'small',
onClick: React.useCallback(() => {
setIsExpanded(!isExpanded);
onExpanderClick?.();
}, [isExpanded, onExpanderClick, setIsExpanded]),
},
React.createElement(SvgChevronRight, null),
);
return React.createElement(
SidenavExpandedContext.Provider,
{
value: isExpanded,
},
React.createElement(
Box,
{
as: 'nav',
...wrapperProps,
className: cx('iui-side-navigation-wrapper', wrapperProps?.className),
ref: forwardedRef,
},
React.createElement(
FloatingDelayGroup,
{
delay: defaultTooltipDelay,
},
React.createElement(
Box,
{
className: cx(
'iui-side-navigation',
{
'iui-expanded': isExpanded,
'iui-collapsed': !isExpanded,
},
className,
),
...rest,
},
'top' === expanderPlacement && ExpandButton,
React.createElement(
Box,
{
as: 'div',
...contentProps,
className: cx('iui-sidenav-content', contentProps?.className),
},
React.createElement(
Box,
{
as: 'div',
...topProps,
className: cx('iui-top', topProps?.className),
},
items,
),
React.createElement(
Box,
{
as: 'div',
...bottomProps,
className: cx('iui-bottom', bottomProps?.className),
},
secondaryItems,
),
),
'bottom' === expanderPlacement && ExpandButton,
),
),
submenu && isSubmenuOpen ? submenu : null,
),
);
});
if ('development' === process.env.NODE_ENV)
SideNavigation.displayName = 'SideNavigation';