@atlaskit/page-layout/dist/cjs/components/slots/left-panel.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 _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

var leftPanelStyles = (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
  gridArea: _constants.LEFT_PANEL
});
var leftPanelFixedStyles = (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_PANEL_WIDTH,
  position: 'fixed',
  insetBlockEnd: 0,
  insetBlockStart: 0,
  insetInlineStart: 0
});

/**
 * __Left panel__
 *
 * Provides a slot for a left panel within the PageLayout.
 *
 * - [Examples](https://atlassian.design/components/page-layout/examples)
 * - [Code](https://atlassian.design/components/page-layout/code)
 */
var LeftPanel = function LeftPanel(props) {
  var children = props.children,
    isFixed = props.isFixed,
    _props$width = props.width,
    width = _props$width === void 0 ? _constants.DEFAULT_LEFT_PANEL_WIDTH : _props$width,
    shouldPersistWidth = props.shouldPersistWidth,
    testId = props.testId,
    id = props.id,
    skipLinkTitle = props.skipLinkTitle;
  var leftPanelWidth = (0, _utils.resolveDimension)(_constants.VAR_LEFT_PANEL_WIDTH, width, shouldPersistWidth);
  (0, _react.useEffect)(function () {
    (0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_LEFT_PANEL_WIDTH, leftPanelWidth));
    return function () {
      (0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_LEFT_PANEL_WIDTH, 0));
    };
  }, [leftPanelWidth]);
  (0, _controllers.useSkipLink)(id, skipLinkTitle);
  return (0, _react2.jsx)(_slotFocusRing.default, null, function (_ref) {
    var className = _ref.className;
    return (0, _react2.jsx)("div", (0, _extends2.default)({
      css: [leftPanelStyles, isFixed && leftPanelFixedStyles]
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
      ,
      className: className,
      "data-testid": testId,
      id: id
    }, (0, _utils.getPageLayoutSlotSelector)('left-panel')), (0, _react2.jsx)(_slotDimensions.default, {
      variableName: _constants.VAR_LEFT_PANEL_WIDTH,
      value: leftPanelWidth
    }), children);
  });
};
var _default = exports.default = LeftPanel;