@atlaskit/page-layout
Version:
A collection of components which let you compose an application's page layout.
138 lines (133 loc) • 6.87 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("react");
var _react2 = require("@emotion/react");
var _motion = require("@atlaskit/motion");
var _responsive = require("@atlaskit/primitives/responsive");
var _constants = require("../../../common/constants");
var _hooks = require("../../../common/hooks");
var _utils = require("../../../common/utils");
var _controllers = require("../../../controllers");
var _slotFocusRing = _interopRequireDefault(require("./slot-focus-ring"));
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
// 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 = (0, _react2.css)((0, _motion.prefersReducedMotion)());
var mobileStyles = (0, _react2.css)((0, _defineProperty2.default)({}, _responsive.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: _constants.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(_constants.TRANSITION_DURATION, "ms ").concat(_motion.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: _constants.MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH,
content: "''"
}
}));
var mobileFlyoutStyles = (0, _react2.css)((0, _defineProperty2.default)({}, _responsive.UNSAFE_media.below.sm, {
cursor: 'revert'
}));
var outerStyles = (0, _react2.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: _constants.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(_constants.TRANSITION_DURATION, "ms ").concat(_motion.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 = (0, _react2.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 = (0, _react2.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(_constants.LEFT_SIDEBAR_WIDTH),
content: "''"
}
});
var flyoutStyles = (0, _react2.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: _constants.LEFT_SIDEBAR_FLYOUT_WIDTH
});
var flyoutFixedStyles = (0, _react2.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: _constants.COLLAPSED_LEFT_SIDEBAR_WIDTH
});
var selector = (0, _utils.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 = (0, _hooks.useIsSidebarDragging)();
var _useContext = (0, _react.useContext)(_controllers.SidebarResizeContext),
isFlyoutOpen = _useContext.leftSidebarState.isFlyoutOpen;
return (0, _react2.jsx)(_slotFocusRing.default, {
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 jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
(0, _react2.jsx)("div", (0, _extends2.default)({
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 jsx-a11y/mouse-events-have-key-events
,
onMouseOver: onMouseOver,
onMouseLeave: onMouseLeave,
onClick: onClick,
ref: ref
}, selector), children)
);
});
};
var LeftSidebarOuter = /*#__PURE__*/(0, _react.forwardRef)(LeftSidebarOuterComponent);
// eslint-disable-next-line @repo/internal/react/require-jsdoc
var _default = exports.default = LeftSidebarOuter;