@atlaskit/page-layout
Version:
A collection of components which let you compose an application's page layout.
59 lines (56 loc) • 2.16 kB
JavaScript
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import { prefersReducedMotion } from '@atlaskit/motion';
import { TRANSITION_DURATION } from '../../../common/constants';
import { useIsSidebarCollapsing } from '../../../common/hooks';
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
const prefersReducedMotionStyles = css(prefersReducedMotion());
/**
* The transition duration is intentionally set to 0ms.
*
* A transition is being used here to delay the setting of
* opacity and visibility so that it syncs collapsing sidebar.
*/
const hideLeftSidebarContentsStyles = css({
opacity: 0,
transition: 'opacity 0ms linear, visibility 0ms linear',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
transitionDelay: `${TRANSITION_DURATION - 100}ms`,
visibility: 'hidden'
});
const resizableChildrenWrapperStyles = css({
height: '100%',
opacity: 1,
overflow: 'hidden auto',
transition: 'none',
visibility: 'visible'
});
const fixedChildrenWrapperStyles = css({
minWidth: 240,
height: '100%'
});
const ResizableChildrenWrapper = ({
children,
isLeftSidebarCollapsed = false,
hasCollapsedState = false,
isFlyoutOpen = false,
testId
}) => {
const isCollapsing = useIsSidebarCollapsing();
const isCollapsed = isLeftSidebarCollapsed || hasCollapsedState;
const isHidden = isCollapsing || isCollapsed && !isFlyoutOpen;
return jsx("div", {
css: [resizableChildrenWrapperStyles, isHidden && hideLeftSidebarContentsStyles, prefersReducedMotionStyles],
"aria-hidden": isHidden,
"data-testid": testId,
tabIndex: isHidden ? -1 : 0
}, jsx("div", {
css: fixedChildrenWrapperStyles
}, children));
};
// eslint-disable-next-line @repo/internal/react/require-jsdoc
export default ResizableChildrenWrapper;