@atlaskit/page-layout/dist/cjs/components/slots/internal/left-sidebar-inner.js

A collection of components which let you compose an application's page layout.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("@emotion/react");
var _motion = require("@atlaskit/motion");
var _responsive = require("@atlaskit/primitives/responsive");
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)());
var mobileStyles = (0, _react.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: "".concat(_constants.MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH, "px"),
  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
  insetInlineStart: "".concat(_constants.LEFT_PANEL_WIDTH),
  // 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")
}));
var mobileInnerFlyoutStyles = (0, _react.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: "min(90vw, ".concat(_constants.MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH, "px)"),
  // 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,
  // 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, box-shadow ").concat(_constants.TRANSITION_DURATION, "ms ").concat(_motion.easeOut, " 0s")
}));

/**
 * 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, _react.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: "".concat(_constants.LEFT_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
  insetInlineStart: "".concat(_constants.LEFT_PANEL_WIDTH),
  // 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")
});
var fixedInnerFlyoutStyles = (0, _react.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
});

/**
 * Static in the sense of `position: static`.
 *
 * It will expand the page height to fit its content.
 */
var staticInnerStyles = (0, _react.css)({
  height: '100%'
});
var draggingStyles = (0, _react.css)({
  cursor: 'ew-resize',
  // Make sure drag to resize does not animate as the user drags
  transition: 'none'
});
var LeftSidebarInner = function LeftSidebarInner(_ref) {
  var children = _ref.children,
    _ref$isFixed = _ref.isFixed,
    isFixed = _ref$isFixed === void 0 ? false : _ref$isFixed,
    _ref$isFlyoutOpen = _ref.isFlyoutOpen,
    isFlyoutOpen = _ref$isFlyoutOpen === void 0 ? false : _ref$isFlyoutOpen;
  var isDragging = (0, _hooks.useIsSidebarDragging)();
  return (0, _react.jsx)("div", {
    css: [
    // mobile viewport styles
    mobileStyles, isFlyoutOpen && mobileInnerFlyoutStyles,
    // generic styles
    !isFixed && staticInnerStyles, isFixed && fixedInnerStyles, isFixed && isFlyoutOpen && fixedInnerFlyoutStyles, isDragging && draggingStyles, prefersReducedMotionStyles]
  }, children);
};

// eslint-disable-next-line @repo/internal/react/require-jsdoc
var _default = exports.default = LeftSidebarInner;