@atlaskit/page-layout/dist/esm/components/slots/left-panel.js

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

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 -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import { DEFAULT_LEFT_PANEL_WIDTH, LEFT_PANEL, LEFT_PANEL_WIDTH, VAR_LEFT_PANEL_WIDTH } from '../../common/constants';
import { getPageLayoutSlotSelector, resolveDimension } from '../../common/utils';
import { publishGridState, useSkipLink } from '../../controllers';
import SlotFocusRing from './internal/slot-focus-ring';
import SlotDimensions from './slot-dimensions';
var leftPanelStyles = 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: LEFT_PANEL
});
var leftPanelFixedStyles = 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: 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 ? DEFAULT_LEFT_PANEL_WIDTH : _props$width,
    shouldPersistWidth = props.shouldPersistWidth,
    testId = props.testId,
    id = props.id,
    skipLinkTitle = props.skipLinkTitle;
  var leftPanelWidth = resolveDimension(VAR_LEFT_PANEL_WIDTH, width, shouldPersistWidth);
  useEffect(function () {
    publishGridState(_defineProperty({}, VAR_LEFT_PANEL_WIDTH, leftPanelWidth));
    return function () {
      publishGridState(_defineProperty({}, VAR_LEFT_PANEL_WIDTH, 0));
    };
  }, [leftPanelWidth]);
  useSkipLink(id, skipLinkTitle);
  return jsx(SlotFocusRing, null, function (_ref) {
    var className = _ref.className;
    return jsx("div", _extends({
      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
    }, getPageLayoutSlotSelector('left-panel')), jsx(SlotDimensions, {
      variableName: VAR_LEFT_PANEL_WIDTH,
      value: leftPanelWidth
    }), children);
  });
};
export default LeftPanel;