@atlaskit/page-layout
Version:
A collection of components which let you compose an application's page layout.
132 lines (129 loc) • 6.57 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { forwardRef, useContext } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
import { UNSAFE_media } from '@atlaskit/primitives/responsive';
import { COLLAPSED_LEFT_SIDEBAR_WIDTH, LEFT_SIDEBAR_FLYOUT_WIDTH, LEFT_SIDEBAR_WIDTH, MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH, MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH, TRANSITION_DURATION } from '../../../common/constants';
import { getPageLayoutSlotSelector } from '../../../common/get-page-layout-slot-selector';
import { useIsSidebarDragging } from '../../../common/hooks';
import { SidebarResizeContext } from '../../../controllers';
import SlotFocusRing from './slot-focus-ring';
// 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
var prefersReducedMotionStyles = css(prefersReducedMotion());
var mobileStyles = css(_defineProperty({}, UNSAFE_media.below.sm, {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
width: MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH,
cursor: 'pointer',
opacity: 1,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
transition: "width ".concat(TRANSITION_DURATION, "ms ").concat(easeOut, " 0s"),
'&::after': {
display: 'inline-block',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
maxWidth: MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH,
content: "''"
}
}));
var mobileFlyoutStyles = css(_defineProperty({}, UNSAFE_media.below.sm, {
cursor: 'revert'
}));
var outerStyles = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
width: LEFT_SIDEBAR_WIDTH,
position: 'relative',
zIndex: 1,
marginInlineStart: "var(--ds-space-0, 0px)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
transition: "width ".concat(TRANSITION_DURATION, "ms ").concat(easeOut, " 0s"),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
':hover': {
'--ds--resize-button--opacity': 1
}
});
var draggingStyles = css({
cursor: 'ew-resize',
// Make sure drag to resize does not animate as the user drags
transition: 'none'
});
/**
* In fixed mode this element's child is taken out of the document flow.
* It doesn't take up the width as expected,
* so the pseudo element forces it to take up the necessary width.
*/
var fixedStyles = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
'::after': {
display: 'inline-block',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
width: "".concat(LEFT_SIDEBAR_WIDTH),
content: "''"
}
});
var flyoutStyles = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
width: LEFT_SIDEBAR_FLYOUT_WIDTH
});
var flyoutFixedStyles = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
width: COLLAPSED_LEFT_SIDEBAR_WIDTH
});
var selector = getPageLayoutSlotSelector('left-sidebar');
var LeftSidebarOuterComponent = function LeftSidebarOuterComponent(_ref, ref) {
var children = _ref.children,
_ref$isFixed = _ref.isFixed,
isFixed = _ref$isFixed === void 0 ? false : _ref$isFixed,
testId = _ref.testId,
onMouseLeave = _ref.onMouseLeave,
onMouseOver = _ref.onMouseOver,
onClick = _ref.onClick,
id = _ref.id;
var isDragging = useIsSidebarDragging();
var _useContext = useContext(SidebarResizeContext),
isFlyoutOpen = _useContext.leftSidebarState.isFlyoutOpen;
return jsx(SlotFocusRing, {
isSidebar: true
}, function (_ref2) {
var className = _ref2.className;
return (
/**
* On desktop, the `onMouseOver|onMouseLeave` handlers controls the temporary flyout behavior.
* This is an intentionally mouse-only experience, it may even be disruptive with keyboard navigation.
*
* On mobile, the `onClick` handler controls the toggled flyout behaviour.
* This is not intended to be how you use this with a keyboard, there is a ResizeButton for this intentionally instead.
*/
// eslint-disable-next-line @atlassian/a11y/click-events-have-key-events, @atlassian/a11y/interactive-element-not-keyboard-focusable, @atlassian/a11y/no-static-element-interactions
jsx("div", _extends({
css: [
// mobile viewport styles
mobileStyles, isFlyoutOpen && mobileFlyoutStyles,
// generic styles
outerStyles, isFixed && fixedStyles, isFlyoutOpen && flyoutStyles, isFlyoutOpen && isFixed && flyoutFixedStyles, isDragging && draggingStyles, prefersReducedMotionStyles]
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: className,
"data-testid": testId,
id: id
// We are adding additional functionality for hover, so this should
// not have associated key events.
// eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
,
onMouseOver: onMouseOver
// eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
,
onMouseLeave: onMouseLeave,
onClick: onClick,
ref: ref
}, selector), children)
);
});
};
var LeftSidebarOuter = /*#__PURE__*/forwardRef(LeftSidebarOuterComponent);
// eslint-disable-next-line @repo/internal/react/require-jsdoc
export default LeftSidebarOuter;