@atlaskit/navigation-system/dist/cjs/ui/page-layout/aside.js

The latest navigation system for Atlassian apps.

/* aside.tsx generated by @compiled/babel-plugin v3.0.2 */
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Aside = Aside;
require("./aside.compiled.css");
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _runtime = require("@compiled/react/runtime");
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _usePreviousValue = _interopRequireDefault(require("@atlaskit/ds-lib/use-previous-value"));
var _fg = require("@atlaskit/platform-feature-flags/fg");
var _useSkipLinkInternal = require("../../context/skip-links/use-skip-link-internal");
var _constants = require("./constants");
var _dangerouslyHoistCssVarToDocumentRoot = require("./dangerously-hoist-css-var-to-document-root");
var _hoistSlotSizesContext = require("./hoist-slot-sizes-context");
var _provider = require("./panel-splitter/provider");
var _useLayoutId = require("./use-layout-id");
var _useResizingWidthCssVarOnRootElement = require("./use-resizing-width-css-var-on-root-element");
var _useSafeDefaultWidth = require("./use-safe-default-width");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- TODO: migrate to @atlaskit/primitives/compiled
var panelSplitterResizingVar = '--n_asdRsz';
/**
 * The bounds for Aside and Panel are purposely set to support the current usage in Jira.
 *
 * Jira sets the slot's width to `0px` when there is no active content to display in it.
 *   - This means the min width needs to support `0px`.
 * The Conversation Assistant component in Jira (rendered in a nav3 RightSidebar, or a nav4 Aside) has a custom resizing
 * implementation, which has a maximum width of `50vw`.
 *   - This means the max width needs to support `50vw`.
 *
 * This is not the final implementation and will be updated once Jira's usage has been fixed.
 * Ticket to track this is: https://jplat.atlassian.net/browse/BLU-3951
 *
 * We're using two different bounds for each slot here, to support the `0px` min width when programatically set using the
 * `defaultWidth` prop, and another one that is used when resizing the slots which has a sensible min width.
 */
var asideWidthSlotBounds = {
  min: '0px',
  max: '50vw'
};
var asideWidthResizeBounds = {
  min: '120px',
  max: '50vw'
};
function getResizeBounds() {
  return asideWidthResizeBounds;
}
var styles = {
  root: "_nd5lns35 _vchhusvi _kqswh2mm _glte1kzp _ndwch9n0",
  inner: "_1reo1wug _18m91wug _152timx3 _4t3i1osq _165teqxy _13wn1if8"
};
var fallbackDefaultWidth = 330;

/**
 * The Aside is rendered to the right (inline end) of the Main area.
 *
 * You can optionally render a `PanelSplitter` as a child to make the aside area resizable.
 *
 * @deprecated Use `Panel` instead.
 */
function Aside(_ref) {
  var children = _ref.children,
    xcss = _ref.xcss,
    _ref$defaultWidth = _ref.defaultWidth,
    defaultWidthProp = _ref$defaultWidth === void 0 ? fallbackDefaultWidth : _ref$defaultWidth,
    _ref$label = _ref.label,
    label = _ref$label === void 0 ? 'Aside' : _ref$label,
    _ref$skipLinkLabel = _ref.skipLinkLabel,
    skipLinkLabel = _ref$skipLinkLabel === void 0 ? label : _ref$skipLinkLabel,
    testId = _ref.testId,
    providedId = _ref.id;
  var dangerouslyHoistSlotSizes = (0, _react.useContext)(_hoistSlotSizesContext.DangerouslyHoistSlotSizes);
  var id = (0, _useLayoutId.useLayoutId)({
    providedId: providedId
  });
  var defaultWidth = (0, _useSafeDefaultWidth.useSafeDefaultWidth)({
    defaultWidthProp: defaultWidthProp,
    fallbackDefaultWidth: fallbackDefaultWidth,
    slotName: 'Aside'
  });

  /**
   * Don't show the skip link if the slot has 0 width.
   *
   * Remove `isHidden` usage after https://jplat.atlassian.net/browse/BLU-3951
   *
   * TODO: when cleaning up 'platform_dst_nav4_skip_link_a11y_1' remove this call entirely
   */
  (0, _useSkipLinkInternal.useSkipLinkInternal)({
    id: id,
    label: skipLinkLabel,
    isHidden: defaultWidth === 0 || (0, _fg.fg)('platform_dst_nav4_skip_link_a11y_1')
  });
  var ref = (0, _react.useRef)(null);
  var _useState = (0, _react.useState)(defaultWidth),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    width = _useState2[0],
    setWidth = _useState2[1];
  // Used to track the previous value of the `defaultWidth` prop, for logging dev warnings when it changes.
  var previousWidthProp = (0, _usePreviousValue.default)(defaultWidth);

  /**
   * Updates the width state based on changes to `defaultWidth`.
   * This is temporary and needed to support the current usage in Jira, and will be removed once it is no longer needed.
   * https://jplat.atlassian.net/browse/BLU-3951
   */
  (0, _react.useEffect)(function () {
    setWidth(defaultWidth);
  }, [defaultWidth]);

  // Putting the warning in a separate effect to avoid adding `previousWidthProp` as an effect dependency when updating width.
  (0, _react.useEffect)(function () {
    if (process.env.NODE_ENV !== 'production') {
      if (previousWidthProp !== undefined && defaultWidth !== previousWidthProp) {
        // eslint-disable-next-line no-console
        console.warn('Page Layout warning\n\n', 'The value of the `defaultWidth` prop on the `Aside` layout slot component has changed. This should not be changed after the component has been mounted.\n\n', 'In the future, changes to the `defaultWidth` prop will not be respected. It is only supported as a stopgap to enable migration from Nav3 to Nav4.\n\n');
      }
    }
  }, [defaultWidth, previousWidthProp]);
  var asideVariableWidth = "clamp(".concat(asideWidthSlotBounds.min, ", ").concat(width, "px, ").concat(asideWidthSlotBounds.max, ")");
  (0, _useResizingWidthCssVarOnRootElement.useResizingWidthCssVarOnRootElement)({
    isEnabled: dangerouslyHoistSlotSizes,
    panelId: _constants.asidePanelSplitterId,
    cssVar: panelSplitterResizingVar
  });
  return /*#__PURE__*/React.createElement("aside", {
    id: id,
    "data-layout-slot": true,
    "aria-label": label,
    className: (0, _runtime.ax)([styles.root, xcss])
    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values
    ,
    style: (0, _defineProperty2.default)({}, _constants.asideVar, asideVariableWidth),
    "data-testid": testId,
    ref: ref
  }, dangerouslyHoistSlotSizes &&
  /*#__PURE__*/
  // ------ START UNSAFE STYLES ------
  // These styles are only needed for the UNSAFE legacy use case for Jira + Confluence.
  // When they aren't needed anymore we can delete them wholesale.
  React.createElement(_dangerouslyHoistCssVarToDocumentRoot.DangerouslyHoistCssVarToDocumentRoot, {
    variableName: _constants.UNSAFE_asideLayoutVar,
    value: "0px",
    mediaQuery: '@media (min-width: 64rem)',
    responsiveValue: "var(".concat(panelSplitterResizingVar, ", ").concat(asideVariableWidth, ")")
  })
  // ------ END UNSAFE STYLES ------
  , /*#__PURE__*/React.createElement(_provider.PanelSplitterProvider, {
    panelId: _constants.asidePanelSplitterId,
    panelRef: ref,
    panelWidth: width,
    onCompleteResize: setWidth,
    getResizeBounds: getResizeBounds,
    resizingCssVar: panelSplitterResizingVar,
    position: "start"
  }, /*#__PURE__*/React.createElement("div", {
    "data-testid": testId ? "".concat(testId, "--inner") : undefined,
    className: (0, _runtime.ax)([styles.inner])
  }, children)));
}