@atlaskit/page-layout
Version:
A collection of components which let you compose an application's page layout.
107 lines (101 loc) • 4.69 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 _constants = require("../../common/constants");
var _utils = require("../../common/utils");
var _controllers = require("../../controllers");
var _slotFocusRing = _interopRequireDefault(require("./internal/slot-focus-ring"));
var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
/**
* This inner wrapper is required to allow the sidebar to be `position: fixed`.
*
* If we were to apply `position: fixed` to the outer wrapper, it will be popped
* out of its flex container and Main would stretch to occupy all the space.
*/
var fixedInnerStyles = (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.RIGHT_SIDEBAR_WIDTH,
position: 'fixed',
insetBlockEnd: 0,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
insetBlockStart: "calc(".concat(_constants.BANNER_HEIGHT, " + ").concat(_constants.TOP_NAVIGATION_HEIGHT, ")"),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
insetInlineEnd: "calc(".concat(_constants.RIGHT_PANEL_WIDTH, ")")
});
var staticInnerStyles = (0, _react2.css)({
height: '100%'
});
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
var outerStyles = (0, _react2.css)({
width: _constants.RIGHT_SIDEBAR_WIDTH
});
/**
* 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 fixedOuterStyles = (0, _react2.css)({
'&::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: _constants.RIGHT_SIDEBAR_WIDTH,
content: "''"
}
});
/**
* __Right sidebar__
*
* Provides a slot for a right sidebar within the PageLayout.
*
* - [Examples](https://atlassian.design/components/page-layout/examples)
* - [Code](https://atlassian.design/components/page-layout/code)
*/
var RightSidebar = function RightSidebar(props) {
var children = props.children,
_props$width = props.width,
width = _props$width === void 0 ? _constants.DEFAULT_RIGHT_SIDEBAR_WIDTH : _props$width,
isFixed = props.isFixed,
shouldPersistWidth = props.shouldPersistWidth,
testId = props.testId,
id = props.id,
skipLinkTitle = props.skipLinkTitle;
var rightSidebarWidth = (0, _utils.resolveDimension)(_constants.VAR_RIGHT_SIDEBAR_WIDTH, width, shouldPersistWidth);
(0, _react.useEffect)(function () {
(0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_RIGHT_SIDEBAR_WIDTH, rightSidebarWidth));
return function () {
(0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_RIGHT_SIDEBAR_WIDTH, 0));
};
}, [rightSidebarWidth, id]);
(0, _controllers.useSkipLink)(id, skipLinkTitle);
return (0, _react2.jsx)(_slotFocusRing.default, {
isSidebar: true
}, function (_ref) {
var className = _ref.className;
return (0, _react2.jsx)("div", (0, _extends2.default)({
"data-testid": testId,
css: [outerStyles, isFixed && fixedOuterStyles]
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: className,
id: id
}, (0, _utils.getPageLayoutSlotSelector)('right-sidebar')), (0, _react2.jsx)(_slotDimensions.default, {
variableName: _constants.VAR_RIGHT_SIDEBAR_WIDTH,
value: rightSidebarWidth
}), (0, _react2.jsx)("div", {
css: [isFixed && fixedInnerStyles, !isFixed && staticInnerStyles]
}, children));
});
};
var _default = exports.default = RightSidebar;