@atlaskit/page-layout
Version:
A collection of components which let you compose an application's page layout.
103 lines (98 loc) • 4.37 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { useEffect } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
import { css, jsx } from '@emotion/react';
import { BANNER_HEIGHT, DEFAULT_RIGHT_SIDEBAR_WIDTH, RIGHT_PANEL_WIDTH, RIGHT_SIDEBAR_WIDTH, TOP_NAVIGATION_HEIGHT, VAR_RIGHT_SIDEBAR_WIDTH } from '../../common/constants';
import { getPageLayoutSlotSelector } from '../../common/get-page-layout-slot-selector';
import { resolveDimension } from '../../common/resolve-dimension';
import { publishGridState, useSkipLink } from '../../controllers';
import SlotFocusRing from './internal/slot-focus-ring';
import SlotDimensions from './slot-dimensions';
/**
* 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 = 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: 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(BANNER_HEIGHT, " + ").concat(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(RIGHT_PANEL_WIDTH, ")")
});
var staticInnerStyles = 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 = css({
width: 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 = 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: 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)
*
* @deprecated `@atlaskit/page-layout` is deprecated. Use `@atlaskit/navigation-system` instead.
*/
var RightSidebar = function RightSidebar(props) {
var children = props.children,
_props$width = props.width,
width = _props$width === void 0 ? DEFAULT_RIGHT_SIDEBAR_WIDTH : _props$width,
isFixed = props.isFixed,
shouldPersistWidth = props.shouldPersistWidth,
testId = props.testId,
id = props.id,
skipLinkTitle = props.skipLinkTitle;
var rightSidebarWidth = resolveDimension(VAR_RIGHT_SIDEBAR_WIDTH, width, shouldPersistWidth);
useEffect(function () {
publishGridState(_defineProperty({}, VAR_RIGHT_SIDEBAR_WIDTH, rightSidebarWidth));
return function () {
publishGridState(_defineProperty({}, VAR_RIGHT_SIDEBAR_WIDTH, 0));
};
}, [rightSidebarWidth, id]);
useSkipLink(id, skipLinkTitle);
return jsx(SlotFocusRing, {
isSidebar: true
}, function (_ref) {
var className = _ref.className;
return jsx("div", _extends({
"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
}, getPageLayoutSlotSelector('right-sidebar')), jsx(SlotDimensions, {
variableName: VAR_RIGHT_SIDEBAR_WIDTH,
value: rightSidebarWidth
}), jsx("div", {
css: [isFixed && fixedInnerStyles, !isFixed && staticInnerStyles]
}, children));
});
};
export default RightSidebar;