@atlaskit/navigation-system 0.166.0

package/dist/esm/ui/page-layout/panel-splitter/panel-splitter.js

@@ -0,0 +1,332 @@
+/* panel-splitter.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./panel-splitter.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { Fragment, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { bind } from 'bind-event-listener';
+import { createPortal } from 'react-dom';
+import invariant from 'tiny-invariant';
+import { useId } from '@atlaskit/ds-lib/use-id';
+import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
+import { useOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { blockDraggingToIFrames } from '@atlaskit/pragmatic-drag-and-drop/element/block-dragging-to-iframes';
+import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
+import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
+import VisuallyHidden from '@atlaskit/visually-hidden';
+import { PanelSplitterContext } from './context';
+import { convertResizeBoundToPixels } from './convert-resize-bound-to-pixels';
+import { getPercentageWithinPixelBounds } from './get-percentage-within-pixel-bounds';
+import { getPixelWidth, getWidthFromDragLocation } from './get-width';
+import { createKeyboardResizeManager } from './keyboard-resize-manager';
+import { useTextDirection } from './use-text-direction';
+var containerStyles = {
+  root: "_12ji1r31 _1qu2glyw _12y31o36 _1e0cglyw _kqswstnw _u7coidpf _152tidpf _1pbykb7n _181n1ule",
+  positionEnd: "_rjxpftgi",
+  positionStart: "_1e02zeo2"
+};
+var grabAreaStyles = {
+  root: "_1bsbl52n _4t3i1osq _kqswstnw _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _syaz1j28 _bfhk1j28 _k8m01ylx _1oec1yx9 _1lww5cps _d0aluf7j _1gavfnf5 _vp7gaqb7 _30l3aqb7 _1dr21ylx _1s5z1ylx _1cg4fnf5 _le1bfnf5 _1gglglyw _9h8h16c2"
+};
+var lineStyles = {
+  root: "_kqswstnw _1e0c1ule _1bsbjfq9 _4t3i1osq _syaz1kw7 _bfhk1r31 _1e021v6z"
+};
+var panelSplitterDragDataSymbol = Symbol('panel-splitter-drag-data');
+function signPanelSplitterDragData(data) {
+  return _objectSpread(_objectSpread({}, data), {}, _defineProperty({}, panelSplitterDragDataSymbol, true));
+}
+export function isPanelSplitterDragData(data) {
+  return data[panelSplitterDragDataSymbol] === true;
+}
+var PortaledPanelSplitter = function PortaledPanelSplitter(_ref) {
+  var label = _ref.label,
+    onResizeStart = _ref.onResizeStart,
+    onResizeEnd = _ref.onResizeEnd,
+    testId = _ref.testId;
+  var splitterRef = useRef(null);
+  var panelSplitterContext = useContext(PanelSplitterContext);
+  invariant(panelSplitterContext, 'Panel splitter context must be set');
+  var panelId = panelSplitterContext.panelId,
+    panelWidth = panelSplitterContext.panelWidth,
+    onCompleteResize = panelSplitterContext.onCompleteResize,
+    getResizeBounds = panelSplitterContext.getResizeBounds,
+    panelRef = panelSplitterContext.panelRef,
+    resizingCssVar = panelSplitterContext.resizingCssVar,
+    portalRef = panelSplitterContext.portalRef,
+    position = panelSplitterContext.position,
+    isEnabled = panelSplitterContext.isEnabled;
+  invariant(portalRef.current, 'Portal ref must be set');
+  var direction = useTextDirection(portalRef.current);
+  var labelId = useId();
+  // Separate state used for the input range width to remove the UI's dependency on the "persisted" layout state value being updated
+  var _useState = useState(panelWidth),
+    _useState2 = _slicedToArray(_useState, 2),
+    rangeInputValue = _useState2[0],
+    setRangeInputValue = _useState2[1];
+
+  /**
+   * We are using state to store the resize bounds _converted into pixel units_, so that we can update them when the window is resized.
+   * Otherwise they can become out of sync with the actual viewport size, and cause a broken experience (inaccurate width percentage)
+   * when the user tries to resize using the keyboard.
+   */
+  var _useState3 = useState({
+      // Using placeholder values here for the initial render. These will be calculated and updated when the range input is focused.
+      min: 200,
+      max: 500
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    rangeInputBounds = _useState4[0],
+    setRangeInputBounds = _useState4[1];
+  var openLayerObserver = useOpenLayerObserver();
+  useEffect(function () {
+    if (!isEnabled) {
+      return;
+    }
+    var splitter = splitterRef.current;
+    invariant(splitter, 'Splitter ref must be set');
+    return combine(blockDraggingToIFrames({
+      element: splitter
+    }), draggable({
+      element: splitter,
+      onGenerateDragPreview: function onGenerateDragPreview(_ref2) {
+        var nativeSetDragImage = _ref2.nativeSetDragImage;
+        // We will be moving the line to indicate a drag. We can disable the native drag preview
+        disableNativeDragPreview({
+          nativeSetDragImage: nativeSetDragImage
+        });
+        // We don't want any native drop animation for when the user does not drop on a drop target. We want the drag to finish immediately
+        preventUnhandled.start();
+      },
+      getInitialData: function getInitialData() {
+        invariant(panelRef.current, 'Panel ref must be set');
+        var initialWidth = getPixelWidth(panelRef.current);
+
+        /**
+         * The drag calculations require the actual computed width of the element
+         * For example, if the panel has loaded with a width of 2000px, but the max bound is 1000px and is visually 1000px (due to the CSS `clamp()`),
+         * the drag calculations should use the actual width of 1000px, not the width in state of 2000px.
+         */
+        return signPanelSplitterDragData({
+          panelId: panelId,
+          initialWidth: initialWidth,
+          resizingWidth: "".concat(initialWidth, "px"),
+          resizeBounds: getResizeBounds()
+        });
+      },
+      onDragStart: function onDragStart(_ref3) {
+        var source = _ref3.source;
+        invariant(isPanelSplitterDragData(source.data));
+        onResizeStart === null || onResizeStart === void 0 || onResizeStart({
+          initialWidth: source.data.initialWidth
+        });
+
+        // Close any open layers when the user starts resizing
+        openLayerObserver === null || openLayerObserver === void 0 || openLayerObserver.closeLayers();
+      },
+      onDrag: function onDrag(_ref4) {
+        var _panelRef$current;
+        var location = _ref4.location,
+          source = _ref4.source;
+        invariant(isPanelSplitterDragData(source.data));
+        var _source$data = source.data,
+          initialWidth = _source$data.initialWidth,
+          resizeBounds = _source$data.resizeBounds;
+
+        /**
+         * How wide the element would be if there were no width constraints,
+         * based on the pointer's position.
+         */
+        var targetWidth = getWidthFromDragLocation({
+          initialWidth: initialWidth,
+          location: location,
+          direction: direction,
+          position: position
+        });
+        var resizingWidth = "clamp(".concat(resizeBounds.min, ", ").concat(targetWidth, "px, ").concat(resizeBounds.max, ")");
+        (_panelRef$current = panelRef.current) === null || _panelRef$current === void 0 || _panelRef$current.style.setProperty(resizingCssVar, resizingWidth);
+        source.data.resizingWidth = resizingWidth;
+      },
+      onDrop: function onDrop(_ref5) {
+        var source = _ref5.source;
+        invariant(isPanelSplitterDragData(source.data));
+        preventUnhandled.stop();
+        invariant(panelRef.current, 'Panel ref must be set');
+        invariant(isPanelSplitterDragData(source.data));
+        var finalWidth = getPixelWidth(panelRef.current);
+        onCompleteResize(finalWidth);
+        onResizeEnd === null || onResizeEnd === void 0 || onResizeEnd({
+          initialWidth: source.data.initialWidth,
+          finalWidth: finalWidth
+        });
+        panelRef.current.style.removeProperty(resizingCssVar);
+      }
+    }));
+  }, [onCompleteResize, onResizeStart, onResizeEnd, panelRef, resizingCssVar, panelWidth, direction, position, isEnabled, openLayerObserver, panelId, getResizeBounds]);
+  var onResizeStartStableRef = useStableRef(onResizeStart);
+  var onResizeEndStableRef = useStableRef(onResizeEnd);
+  var _useState5 = useState(function () {
+      return createKeyboardResizeManager({
+        onResizeStart: function onResizeStart() {
+          var _onResizeStartStableR;
+          // Close any open layers when the user starts resizing with keyboard
+          openLayerObserver === null || openLayerObserver === void 0 || openLayerObserver.closeLayers();
+          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+          }
+          (_onResizeStartStableR = onResizeStartStableRef.current) === null || _onResizeStartStableR === void 0 || _onResizeStartStableR.call.apply(_onResizeStartStableR, [onResizeStartStableRef].concat(args));
+        },
+        onResizeEnd: function onResizeEnd() {
+          var _onResizeEndStableRef;
+          for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+            args[_key2] = arguments[_key2];
+          }
+          return (_onResizeEndStableRef = onResizeEndStableRef.current) === null || _onResizeEndStableRef === void 0 ? void 0 : _onResizeEndStableRef.call.apply(_onResizeEndStableRef, [onResizeEndStableRef].concat(args));
+        }
+      });
+    }),
+    _useState6 = _slicedToArray(_useState5, 1),
+    keyboardResizeManager = _useState6[0];
+  var handleSliderInputChange = useCallback(function (event) {
+    var value = parseInt(event.target.value);
+    setRangeInputValue(value);
+
+    /**
+     * We are intentionally _not_ debouncing `onCompleteResize` as we want it to be called anytime the user changes the range input value.
+     * It is an internal-only callback - it's provided by `PanelSplitterProvider`, and used by layout slots to update their layout width state.
+     */
+    onCompleteResize(value);
+    keyboardResizeManager.onResize({
+      initialWidth: panelWidth,
+      finalWidth: value
+    });
+  }, [onCompleteResize, panelWidth, keyboardResizeManager]);
+  var resizeEventListenerCleanupFn = useRef(null);
+  var handleSliderFocus = useCallback(function () {
+    var _resizeEventListenerC;
+    /**
+     * We are only updating the range input's properties when the element is focused, as a performance optimisation.
+     * It isn't necessary to recalculate these values until the element is going to be used.
+     */
+
+    // Clean up any left over listeners in case `focus` was triggered again without `blur`.
+    (_resizeEventListenerC = resizeEventListenerCleanupFn.current) === null || _resizeEventListenerC === void 0 || _resizeEventListenerC.call(resizeEventListenerCleanupFn);
+
+    // Update the range input value to match the current panel width.
+    setRangeInputValue(panelWidth);
+    var resizeBounds = getResizeBounds();
+
+    // Update the range input bounds to ensure they are accurate (in case the viewport was previously resized)
+    setRangeInputBounds({
+      min: convertResizeBoundToPixels(resizeBounds.min),
+      max: convertResizeBoundToPixels(resizeBounds.max)
+    });
+
+    /**
+     * _While the slider element is focused_, add a window resize event listener to update the range input bounds
+     * when the window is resized. This is needed to ensure the min and max widths accurately reflect the viewport
+     * size - in case they are provided in vw units.
+     *
+     * This listener is cleaned up when the element is blurred.
+     */
+    resizeEventListenerCleanupFn.current = bind(window, {
+      type: 'resize',
+      listener: function updateState() {
+        var resizeBounds = getResizeBounds();
+        setRangeInputBounds({
+          min: convertResizeBoundToPixels(resizeBounds.min),
+          max: convertResizeBoundToPixels(resizeBounds.max)
+        });
+      }
+    });
+  }, [panelWidth, getResizeBounds]);
+  var handleSliderBlur = useCallback(function () {
+    var _resizeEventListenerC2;
+    // Remove the resize event listener when the range input is blurred.
+    (_resizeEventListenerC2 = resizeEventListenerCleanupFn.current) === null || _resizeEventListenerC2 === void 0 || _resizeEventListenerC2.call(resizeEventListenerCleanupFn);
+  }, []);
+  useEffect(function () {
+    return function cleanup() {
+      var _resizeEventListenerC3;
+      // Cleanup the resize event listener when the component is unmounted.
+      (_resizeEventListenerC3 = resizeEventListenerCleanupFn.current) === null || _resizeEventListenerC3 === void 0 || _resizeEventListenerC3.call(resizeEventListenerCleanupFn);
+    };
+  }, []);
+  var ariaValueText = useMemo(function () {
+    return "".concat(getPercentageWithinPixelBounds({
+      currentWidth: rangeInputValue,
+      resizeBounds: rangeInputBounds
+    }), "% width");
+  }, [rangeInputValue, rangeInputBounds]);
+  if (!isEnabled) {
+    return null;
+  }
+  return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId ? "".concat(testId, "-container") : undefined,
+    className: ax([containerStyles.root, position === 'start' && containerStyles.positionStart, position === 'end' && containerStyles.positionEnd])
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: splitterRef,
+    "data-testid": testId,
+    className: ax([grabAreaStyles.root])
+  }, /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement("input", {
+    type: "range",
+    value: rangeInputValue,
+    step: 20,
+    min: rangeInputBounds.min,
+    max: rangeInputBounds.max,
+    "aria-valuetext": ariaValueText,
+    "aria-labelledby": labelId,
+    onChange: handleSliderInputChange,
+    onFocus: handleSliderFocus,
+    onBlur: handleSliderBlur
+  }), /*#__PURE__*/React.createElement("span", {
+    id: labelId
+  }, label)), /*#__PURE__*/React.createElement("span", {
+    className: ax([lineStyles.root])
+  }))), portalRef.current);
+};
+
+// Ensures that the component is only rendered on a client. Uses a `useEffect`, which is not run on servers.
+var ClientOnly = function ClientOnly(_ref6) {
+  var children = _ref6.children;
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    hasMounted = _useState8[0],
+    setHasMounted = _useState8[1];
+  useEffect(function () {
+    setHasMounted(true);
+  }, []);
+  return /*#__PURE__*/React.createElement(Fragment, null, hasMounted ? children : null);
+};
+
+/**
+ * _PanelSplitter_
+ *
+ * A component that allows the user to resize a layout area.
+ * It can be used within layout areas like `SideNav`, `Panel`, and `Aside`. The layout area component should
+ * provide the context for it using `<PanelSplitterProvider>`.
+ *
+ * Example usage in products:
+ * ```tsx
+ * <SideNav>
+ *   {/* other side nav content *}
+ *   <PanelSplitter label="Resize Side Nav" />
+ * </SideNav>
+ * ```
+ */
+export var PanelSplitter = function PanelSplitter(_ref7) {
+  var label = _ref7.label,
+    onResizeStart = _ref7.onResizeStart,
+    onResizeEnd = _ref7.onResizeEnd,
+    testId = _ref7.testId;
+  return /*#__PURE__*/React.createElement(ClientOnly, null, /*#__PURE__*/React.createElement(PortaledPanelSplitter, {
+    label: label,
+    onResizeStart: onResizeStart,
+    onResizeEnd: onResizeEnd,
+    testId: testId
+  }));
+};

package/dist/esm/ui/page-layout/panel-splitter/provider.js

@@ -0,0 +1,39 @@
+import React, { Fragment, useMemo, useRef } from 'react';
+import { PanelSplitterContext } from './context';
+/**
+ * Provides the context required for the panel splitter to work within a page layout slot.
+ *
+ * Should be used in the layout area components, e.g. SideNav, Aside etc, as opposed to products.
+ */
+export var PanelSplitterProvider = function PanelSplitterProvider(_ref) {
+  var panelId = _ref.panelId,
+    panelWidth = _ref.panelWidth,
+    onCompleteResize = _ref.onCompleteResize,
+    getResizeBounds = _ref.getResizeBounds,
+    resizingCssVar = _ref.resizingCssVar,
+    panelRef = _ref.panelRef,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? 'end' : _ref$position,
+    _ref$isEnabled = _ref.isEnabled,
+    isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled,
+    children = _ref.children;
+  var portalRef = useRef(null);
+  var context = useMemo(function () {
+    return {
+      panelId: panelId,
+      panelWidth: panelWidth,
+      onCompleteResize: onCompleteResize,
+      getResizeBounds: getResizeBounds,
+      portalRef: portalRef,
+      resizingCssVar: resizingCssVar,
+      position: position,
+      panelRef: panelRef,
+      isEnabled: isEnabled
+    };
+  }, [panelId, panelWidth, onCompleteResize, getResizeBounds, resizingCssVar, position, panelRef, isEnabled]);
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(PanelSplitterContext.Provider, {
+    value: context
+  }, children), /*#__PURE__*/React.createElement("div", {
+    ref: portalRef
+  }));
+};

package/dist/esm/ui/page-layout/panel-splitter/use-text-direction.js

@@ -0,0 +1,18 @@
+import { useMemo } from 'react';
+
+/**
+ * Returns the direction of the element's text.
+ *
+ * Because any element within the hierarchy can have the [`dir` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)
+ * set, we can't simply check the attribute on one element, the root document element or the current element's parent.
+ *
+ * Instead, we are using the [CSS `direction` property](https://developer.mozilla.org/en-US/docs/Web/CSS/direction) to determine the
+ * current computed direction value.
+ */
+export var useTextDirection = function useTextDirection(element) {
+  return useMemo(function () {
+    var _window$getComputedSt = window.getComputedStyle(element),
+      direction = _window$getComputedSt.direction;
+    return direction === 'rtl' ? 'rtl' : 'ltr';
+  }, [element]);
+};

package/dist/esm/ui/page-layout/panel.compiled.css

@@ -0,0 +1,19 @@
+
+._nd5l1b6c{grid-area:main/aside/aside/aside}
+._191wglyw{border-inline-start:none}._10fph9n0{justify-self:end}
+._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
+._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
+._18m91wug{overflow-y:auto}
+._1bsb1adv{width:min(90%,365px)}
+._1bsb1dxx{width:min(90%,var(--minWidth))}
+._1e0cglyw{display:none}
+._1pbykb7n{z-index:1}
+._1reo1wug{overflow-x:auto}
+._4t3i1osq{height:100%}
+._4t3ieqxy{height:calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._kqsw1if8{position:sticky}
+._vchhusvi{box-sizing:border-box}
+@media (min-width:48rem){._14b54rrg{width:var(--n_pnlRsz,var(--n_pnlW))}}
+@media (min-width:64rem){._1w6ezgxb{border-inline-start:1px solid var(--ds-border,#091e4224)}._scbpglyw{box-shadow:none}._4ap3vuon{background-color:var(--ds-surface,#fff)}}
+@media (min-width:90rem){._1dhy1c6w{grid-area:panel}._9sns1wug{z-index:auto}}

package/dist/esm/ui/page-layout/panel.js

@@ -0,0 +1,186 @@
+/* panel.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./panel.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { media } from '@atlaskit/primitives/responsive';
+import { useSkipLinkInternal } from '../../context/skip-links/skip-links-context';
+import { contentHeightWhenFixed, contentInsetBlockStart, localSlotLayers, panelPanelSplitterId, panelVar, sideNavLiveWidthVar, UNSAFE_panelLayoutVar } from './constants';
+import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
+import { DangerouslyHoistCssVarToDocumentRoot } from './hoist-utils';
+import { useLayoutId } from './id-utils';
+import { PanelSplitterProvider } from './panel-splitter/provider';
+import { useSideNavRef } from './side-nav/element-context';
+import { useResizingWidthCssVarOnRootElement } from './use-resizing-width-css-var-on-root-element';
+var panelSplitterResizingVar = '--n_pnlRsz';
+
+/**
+ * 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 oldPanelWidthSlotBounds = {
+  min: '0px',
+  max: '50vw'
+};
+var oldPanelWidthResizeBounds = {
+  min: '120px',
+  max: '50vw'
+};
+function getOldResizeBounds() {
+  return oldPanelWidthResizeBounds;
+}
+
+/**
+ * We typically use the `defaultWidth` as the minimum resizing width,
+ * but for large default widths we fallback to a standard value.
+ *
+ * This standard value of `400px` is to align with the Global Preview Panels.
+ */
+var fallbackResizeMinWidth = 400;
+var styles = {
+  root: "_nd5l1b6c _10fph9n0 _vchhusvi _1pbykb7n _4t3ieqxy _kqsw1if8 _152timx3 _14b54rrg _1dhy1c6w _9sns1wug",
+  backgroundColor: "_bfhk1bhr _4ap3vuon",
+  border: "_191wglyw _16qs1cd0 _1w6ezgxb _scbpglyw",
+  scrollContainer: "_1reo1wug _18m91wug _4t3i1osq",
+  hidden: "_1e0cglyw",
+  oldMobileWidth: "_1bsb1adv",
+  newMobileWidth: "_1bsb1dxx"
+};
+
+/**
+ * The Panel layout area is rendered to the right (inline end) of the Main area, or the Aside area if it is present.
+ *
+ * On small viewports (below 64rem, or 1024px), the Panel slot will become an overlay.
+ *
+ * You can optionally render a `PanelSplitter` as a child to make the panel area resizable.
+ */
+export function Panel(_ref) {
+  var children = _ref.children,
+    _ref$defaultWidth = _ref.defaultWidth,
+    defaultWidth = _ref$defaultWidth === void 0 ? 365 : _ref$defaultWidth,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? 'Panel' : _ref$label,
+    _ref$skipLinkLabel = _ref.skipLinkLabel,
+    skipLinkLabel = _ref$skipLinkLabel === void 0 ? label : _ref$skipLinkLabel,
+    testId = _ref.testId,
+    providedId = _ref.id,
+    xcss = _ref.xcss,
+    _ref$hasBorder = _ref.hasBorder,
+    hasBorder = _ref$hasBorder === void 0 ? fg('platform_design_system_nav4_panel_default_border') : _ref$hasBorder;
+  var dangerouslyHoistSlotSizes = useContext(DangerouslyHoistSlotSizes);
+  var id = useLayoutId({
+    providedId: providedId
+  });
+  /**
+   * Don't show the skip link if the slot has 0 width.
+   *
+   * Remove `isHidden` usage after https://jplat.atlassian.net/browse/BLU-3951
+   */
+  useSkipLinkInternal({
+    id: id,
+    label: skipLinkLabel,
+    isHidden: defaultWidth === 0
+  });
+  var ref = useRef(null);
+  var _useState = useState(defaultWidth),
+    _useState2 = _slicedToArray(_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 defaultWidthRef = useRef(defaultWidth);
+
+  /**
+   * TODO: Remove this useEffect once the `width: 0` usage is removed from Jira.
+   * It updates the width state based on changes to `defaultWidth`, as a temporary stopgap to support Jira's current usage.
+   * https://jplat.atlassian.net/browse/BLU-3951
+   */
+  useEffect(function () {
+    if (defaultWidthRef.current === defaultWidth) {
+      return;
+    }
+    defaultWidthRef.current = defaultWidth;
+    setWidth(defaultWidth);
+    if (process.env.NODE_ENV !== 'production') {
+      // eslint-disable-next-line no-console
+      console.warn('Page Layout warning\n\n', 'The value of the `defaultWidth` prop on the `Panel` 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]);
+  var sideNavRef = useSideNavRef();
+
+  /**
+   * The minimum width that the panel can be resized to by the user.
+   *
+   * We only use the `defaultWidth` up to a point to avoid huge panels.
+   */
+  var minWidth = Math.min(defaultWidth, fallbackResizeMinWidth);
+  var getNewResizeBounds = useCallback(function () {
+    var _sideNavRef$current$o, _sideNavRef$current;
+    var sideNavWidth = (_sideNavRef$current$o = (_sideNavRef$current = sideNavRef.current) === null || _sideNavRef$current === void 0 ? void 0 : _sideNavRef$current.offsetWidth) !== null && _sideNavRef$current$o !== void 0 ? _sideNavRef$current$o : 0;
+    /**
+     * The panel should not resize larger than the page content, equivalent to the `Main` + `Aside` slots.
+     *
+     * This maximum width is equivalent to half the viewport width, after removing the sidebar width.
+     */
+    var maxWidth = Math.round((window.innerWidth - sideNavWidth) / 2);
+    return {
+      min: "".concat(minWidth, "px"),
+      max: "".concat(maxWidth, "px")
+    };
+  }, [minWidth, sideNavRef]);
+  var panelWidthSlotBounds = fg('platform_design_system_nav4_preview_panel_support') ? {
+    min: "".concat(minWidth, "px"),
+    // `sideNavLiveWidthVar` is not defined if the `SideNav` is not mounted, so we fallback to `0px`.
+    max: "round(nearest, calc((100vw - var(".concat(sideNavLiveWidthVar, ", 0px)) / 2), 1px)")
+  } : oldPanelWidthSlotBounds;
+  var panelVariableWidth = "clamp(".concat(panelWidthSlotBounds.min, ", ").concat(width, "px, ").concat(panelWidthSlotBounds.max, ")");
+  useResizingWidthCssVarOnRootElement({
+    isEnabled: dangerouslyHoistSlotSizes && fg('platform_design_system_nav4_live_resizing_css_vars'),
+    cssVar: panelSplitterResizingVar,
+    panelId: panelPanelSplitterId
+  });
+  return /*#__PURE__*/React.createElement("section", {
+    id: id,
+    "data-layout-slot": true,
+    "aria-label": label,
+    className: ax([styles.root, defaultWidth === 0 && styles.hidden, hasBorder && styles.border, fg('platform_design_system_nav4_panel_default_bg_color') && styles.backgroundColor, fg('platform_design_system_nav4_panel_mobile_width_fix') ? styles.newMobileWidth : styles.oldMobileWidth, xcss]),
+    style: _defineProperty(_defineProperty({}, panelVar, panelVariableWidth), '--minWidth', fg('platform_design_system_nav4_panel_mobile_width_fix') ? "".concat(minWidth, "px") : undefined),
+    "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, {
+    variableName: UNSAFE_panelLayoutVar,
+    value: "0px",
+    mediaQuery: media.above.lg,
+    responsiveValue: fg('platform_design_system_nav4_live_resizing_css_vars') ? "var(".concat(panelSplitterResizingVar, ", ").concat(panelVariableWidth, ")") : panelVariableWidth
+  })
+  // ------ END UNSAFE STYLES ------
+  , /*#__PURE__*/React.createElement(PanelSplitterProvider, {
+    panelId: panelPanelSplitterId,
+    panelRef: ref,
+    panelWidth: width,
+    onCompleteResize: setWidth,
+    getResizeBounds: fg('platform_design_system_nav4_preview_panel_support') ? getNewResizeBounds : getOldResizeBounds,
+    resizingCssVar: panelSplitterResizingVar,
+    position: "start"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax([styles.scrollContainer])
+  }, children)));
+}

package/dist/esm/ui/page-layout/root.compiled.css

@@ -0,0 +1,8 @@
+._1ciragmp >:not([data-layout-slot]){display:none!important}
+._1e0c11p5{display:grid}
+._1lmcq9em{grid-template-areas:"banner" "top-bar" "main" "aside"}
+._1tke1kxc{min-height:100vh}
+._2z0516ab{grid-template-rows:auto auto 1fr auto}
+._yv0ei47z{grid-template-columns:minmax(0,1fr)}
+@media (min-width:64rem){._12fkuz0r{grid-template-areas:"banner banner banner" "top-bar top-bar top-bar" "side-nav main aside"}._12qzrxre{grid-template-rows:auto auto 3fr}._1rqt70if{grid-template-columns:auto minmax(0,1fr) auto}}
+@media (min-width:90rem){._xkmgbaui{grid-template-areas:"banner banner banner banner" "top-bar top-bar top-bar top-bar" "side-nav main aside panel"}._jbc7rxre{grid-template-rows:auto auto 3fr}._tyve1jg8{grid-template-columns:auto minmax(0,1fr) auto auto}}

package/dist/esm/ui/page-layout/root.js

@@ -0,0 +1,57 @@
+/* root.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./root.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useEffect, useRef } from 'react';
+import { OpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import { SkipLinksContainer } from '../../components/skip-links/skip-links-container';
+import { SkipLinksProvider } from '../../context/skip-links/skip-links-provider';
+import { TopNavStartProvider } from '../../context/top-nav-start/top-nav-start-context-provider';
+import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
+import { SideNavElementProvider } from './side-nav/element-context';
+import { SideNavToggleButtonProvider } from './side-nav/toggle-button-provider';
+import { SideNavVisibilityProvider } from './side-nav/visibility-provider';
+
+// ID of the root element that the banner and top bar slots hoist their sizes to. Only internally exported.
+export var gridRootId = 'unsafe-design-system-page-layout-root';
+var styles = {
+  root: "_1e0c11p5 _1tke1kxc _1lmcq9em _yv0ei47z _2z0516ab _1ciragmp _12fkuz0r _12qzrxre _1rqt70if _xkmgbaui _jbc7rxre _tyve1jg8"
+};
+
+/**
+ * The root component of the navigation system. It wraps the underlying components with the necessary contexts allowing to use certain data and hooks
+ * @param skipLinksLabel - The very first element of the layout is a skip links container that can be accessed by pressing Tab button and holds the links to the other sections of the layout thus improving accessibility. This parameter defines the header text for this container
+ */
+export function Root(_ref) {
+  var children = _ref.children,
+    xcss = _ref.xcss,
+    _ref$UNSAFE_dangerous = _ref.UNSAFE_dangerouslyHoistSlotSizes,
+    UNSAFE_dangerouslyHoistSlotSizes = _ref$UNSAFE_dangerous === void 0 ? false : _ref$UNSAFE_dangerous,
+    _ref$skipLinksLabel = _ref.skipLinksLabel,
+    skipLinksLabel = _ref$skipLinksLabel === void 0 ? 'Skip to:' : _ref$skipLinksLabel,
+    testId = _ref.testId;
+  var ref = useRef(null);
+  useEffect(function () {
+    if (process.env.NODE_ENV !== 'production') {
+      var IGNORED_ELEMENTS = ['SCRIPT', 'STYLE'];
+      if (ref.current) {
+        Array.from(ref.current.children).forEach(function (child) {
+          if (!IGNORED_ELEMENTS.includes(child.tagName) && !child.hasAttribute('data-layout-slot')) {
+            // eslint-disable-next-line no-console
+            console.error("Page Layout Error\n\nThis element has been forcibly hidden:\n\n", child, "\n\nAn element was rendered as a child of the page layout root that isn't a page layout component! Resolve this error by moving it into a page layout component.\n\nThis message will not be displayed in production.\n");
+          }
+        });
+      }
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement(SideNavVisibilityProvider, null, /*#__PURE__*/React.createElement(SideNavToggleButtonProvider, null, /*#__PURE__*/React.createElement(SideNavElementProvider, null, /*#__PURE__*/React.createElement(TopNavStartProvider, null, /*#__PURE__*/React.createElement(OpenLayerObserver, null, /*#__PURE__*/React.createElement(DangerouslyHoistSlotSizes.Provider, {
+    value: UNSAFE_dangerouslyHoistSlotSizes
+  }, /*#__PURE__*/React.createElement(SkipLinksProvider, null, /*#__PURE__*/React.createElement(SkipLinksContainer, {
+    label: skipLinksLabel,
+    testId: testId
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: ax([styles.root, xcss]),
+    id: gridRootId,
+    "data-testid": testId
+  }, children))))))));
+}