@atlaskit/page-layout
Version:
A collection of components which let you compose an application's page layout.
68 lines (63 loc) • 2.74 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("@emotion/react");
var _motion = require("@atlaskit/motion");
var _constants = require("../../../common/constants");
var _hooks = require("../../../common/hooks");
/**
* @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, _react.css)((0, _motion.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.
*/
var hideLeftSidebarContentsStyles = (0, _react.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: "".concat(_constants.TRANSITION_DURATION - 100, "ms"),
visibility: 'hidden'
});
var resizableChildrenWrapperStyles = (0, _react.css)({
height: '100%',
opacity: 1,
overflow: 'hidden auto',
transition: 'none',
visibility: 'visible'
});
var fixedChildrenWrapperStyles = (0, _react.css)({
minWidth: 240,
height: '100%'
});
var ResizableChildrenWrapper = function ResizableChildrenWrapper(_ref) {
var children = _ref.children,
_ref$isLeftSidebarCol = _ref.isLeftSidebarCollapsed,
isLeftSidebarCollapsed = _ref$isLeftSidebarCol === void 0 ? false : _ref$isLeftSidebarCol,
_ref$hasCollapsedStat = _ref.hasCollapsedState,
hasCollapsedState = _ref$hasCollapsedStat === void 0 ? false : _ref$hasCollapsedStat,
_ref$isFlyoutOpen = _ref.isFlyoutOpen,
isFlyoutOpen = _ref$isFlyoutOpen === void 0 ? false : _ref$isFlyoutOpen,
testId = _ref.testId;
var isCollapsing = (0, _hooks.useIsSidebarCollapsing)();
var isCollapsed = isLeftSidebarCollapsed || hasCollapsedState;
var isHidden = isCollapsing || isCollapsed && !isFlyoutOpen;
return (0, _react.jsx)("div", {
css: [resizableChildrenWrapperStyles, isHidden && hideLeftSidebarContentsStyles, prefersReducedMotionStyles],
"aria-hidden": isHidden,
"data-testid": testId,
tabIndex: isHidden ? -1 : 0
}, (0, _react.jsx)("div", {
css: fixedChildrenWrapperStyles
}, children));
};
// eslint-disable-next-line @repo/internal/react/require-jsdoc
var _default = exports.default = ResizableChildrenWrapper;