@atlaskit/navigation-system 0.166.0

package/dist/cjs/ui/page-layout/side-nav/side-nav.js

@@ -0,0 +1,608 @@
+/* side-nav.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SideNav = SideNav;
+require("./side-nav.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _bindEventListener = require("bind-event-listener");
+var _reactDom = require("react-dom");
+var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
+var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
+var _responsive = require("@atlaskit/primitives/responsive");
+var _skipLinksContext = require("../../../context/skip-links/skip-links-context");
+var _topNavStartContext = require("../../../context/top-nav-start/top-nav-start-context");
+var _constants = require("../constants");
+var _hoistSlotSizesContext = require("../hoist-slot-sizes-context");
+var _hoistUtils = require("../hoist-utils");
+var _idUtils = require("../id-utils");
+var _provider = require("../panel-splitter/provider");
+var _useResizingWidthCssVarOnRootElement = require("../use-resizing-width-css-var-on-root-element");
+var _elementContext = require("./element-context");
+var _flyoutCloseDelayMs = require("./flyout-close-delay-ms");
+var _toggleButtonContext = require("./toggle-button-context");
+var _useExpandSideNav = require("./use-expand-side-nav");
+var _useSideNavVisibility2 = require("./use-side-nav-visibility");
+var _useSideNavVisibilityCallbacks = require("./use-side-nav-visibility-callbacks");
+var _useToggleSideNav = require("./use-toggle-side-nav");
+var _visibilityContext = require("./visibility-context");
+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); }
+var panelSplitterResizingVar = '--n_snvRsz';
+var widthResizeBounds = {
+  min: '240px',
+  max: '50vw'
+};
+function getResizeBounds() {
+  return widthResizeBounds;
+}
+var openLayerObserverSideNavNamespace = 'side-nav';
+var styles = {
+  root: "_nd5l1b6c _bfhk1bhr _16qs1cd0 _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _4ap3vuon _scbpglyw",
+  oldBorder: "_t51zzgxb",
+  newBorder: "_191wglyw _t51zglyw _p5clzgxb",
+  newBorderFlyoutOpen: "_p5clglyw",
+  flyoutOpen: "_qiln1gzg _4ap31bhr _scbp1cd0 _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
+  flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _139f8iot _1tpvfnf5 _sylc1a5r _1uwsjq3t",
+  flexContainer: "_4t3i1osq _1e0c1txw _2lx21bp4 _1bah1yb4",
+  hiddenMobileAndDesktop: "_1e0cglyw",
+  hiddenMobileOnly: "_1e0cglyw _dm2518uv",
+  hiddenDesktopOnly: "_dm25glyw"
+};
+/**
+ * We need an additional component layer so we can wrap the side nav in a `OpenLayerObserver` and have access to the
+ * context value.
+ */
+function SideNavInternal(_ref) {
+  var children = _ref.children,
+    defaultCollapsed = _ref.defaultCollapsed,
+    _ref$defaultWidth = _ref.defaultWidth,
+    defaultWidth = _ref$defaultWidth === void 0 ? 320 : _ref$defaultWidth,
+    testId = _ref.testId,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? 'Sidebar' : _ref$label,
+    _ref$skipLinkLabel = _ref.skipLinkLabel,
+    skipLinkLabel = _ref$skipLinkLabel === void 0 ? label : _ref$skipLinkLabel,
+    onExpand = _ref.onExpand,
+    onCollapse = _ref.onCollapse,
+    providedId = _ref.id;
+  var id = (0, _idUtils.useLayoutId)({
+    providedId: providedId
+  });
+  var expandSideNav = (0, _useExpandSideNav.useExpandSideNav)();
+  /**
+   * Called after clicking on the side nav skip link, and ensures the side nav is expanded so that it is focusable.
+   *
+   * We need to update the DOM synchronously because `.focus()` is called synchronously after this state update.
+   */
+  var synchronouslyExpandSideNav = (0, _react.useCallback)(function () {
+    (0, _reactDom.flushSync)(function () {
+      /**
+       * Calling this unconditionally and relying on it to avoid no-op renders.
+       *
+       * We _could_ call it conditionally, but we'd be duplicating the screen size checks `expandSideNav` makes.
+       */
+      expandSideNav();
+    });
+  }, [expandSideNav]);
+  (0, _skipLinksContext.useSkipLinkInternal)({
+    id: id,
+    label: skipLinkLabel,
+    onBeforeNavigate: synchronouslyExpandSideNav
+  });
+  var sideNavState = (0, _react.useContext)(_visibilityContext.SideNavVisibilityState);
+  var setSideNavState = (0, _react.useContext)(_visibilityContext.SetSideNavVisibilityState);
+  var _useSideNavVisibility = (0, _useSideNavVisibility2.useSideNavVisibility)({
+      defaultCollapsed: defaultCollapsed
+    }),
+    isExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop,
+    isExpandedOnMobile = _useSideNavVisibility.isExpandedOnMobile;
+  // We are placing `defaultCollapsed` into a state container so we can have a stable reference to the initial value.
+  // This is so we can use it in an effect _that only runs once_, after the initial render on the client,
+  // to sync the side nav context (provided in `<Root>`) with the `defaultCollapsed` prop provided to `<SideNav>`.
+  var _useState = (0, _react.useState)(defaultCollapsed),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 1),
+    initialDefaultCollapsed = _useState2[0];
+  var _useState3 = (0, _react.useState)(defaultWidth),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    width = _useState4[0],
+    setWidth = _useState4[1];
+  var clampedWidth = "clamp(".concat(widthResizeBounds.min, ", ").concat(width, "px, ").concat(widthResizeBounds.max, ")");
+  var dangerouslyHoistSlotSizes = (0, _react.useContext)(_hoistSlotSizesContext.DangerouslyHoistSlotSizes);
+  var navRef = (0, _react.useRef)(null);
+  /**
+   * Used to share the side nav element with the `Panel`,
+   * which observes the side nav to determine its maximum width.
+   */
+  var sharedRef = (0, _elementContext.useSideNavRef)();
+  var mergedRef = (0, _mergeRefs.default)([navRef, sharedRef]);
+  var toggleButtonElement = (0, _react.useContext)(_toggleButtonContext.SideNavToggleButtonElement);
+  var topNavStartElement = (0, _react.useContext)(_topNavStartContext.TopNavStartElement);
+  var devTimeOnlyAttributes = {};
+  var openLayerObserver = (0, _openLayerObserver.useOpenLayerObserver)();
+  var flyoutStateRef = (0, _react.useRef)({
+    type: 'not-active'
+  });
+  var isFlyoutVisible = (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open';
+  var updateFlyoutState = (0, _react.useMemo)(function () {
+    function tryAbortPendingClose() {
+      if (flyoutStateRef.current.type === 'waiting-for-close') {
+        flyoutStateRef.current.abort();
+      }
+    }
+    function open() {
+      tryAbortPendingClose();
+      flyoutStateRef.current = {
+        type: 'open'
+      };
+      setSideNavState(function (currentState) {
+        if ((currentState === null || currentState === void 0 ? void 0 : currentState.desktop) === 'collapsed' && (currentState === null || currentState === void 0 ? void 0 : currentState.flyout) !== 'open') {
+          return {
+            desktop: currentState.desktop,
+            mobile: currentState.mobile,
+            flyout: 'open'
+          };
+        }
+        return currentState;
+      });
+    }
+    function close() {
+      tryAbortPendingClose();
+      flyoutStateRef.current = {
+        type: 'not-active'
+      };
+      setSideNavState(function (currentState) {
+        if ((currentState === null || currentState === void 0 ? void 0 : currentState.desktop) === 'collapsed' && (currentState === null || currentState === void 0 ? void 0 : currentState.flyout) === 'open') {
+          return {
+            desktop: currentState.desktop,
+            mobile: currentState.mobile,
+            flyout: 'triggered-animate-close'
+          };
+        }
+        return currentState;
+      });
+    }
+    return function onAction(action) {
+      if (action === 'drag-from-flyout-started') {
+        open();
+        flyoutStateRef.current = {
+          type: 'is-dragging-from-flyout'
+        };
+        return;
+      }
+      if (action === 'drag-from-flyout-finished') {
+        open();
+        return;
+      }
+
+      // ignoring all actions until the drag is finished
+      if (flyoutStateRef.current.type === 'is-dragging-from-flyout') {
+        return;
+      }
+      if (action === 'open') {
+        open();
+        return;
+      }
+      if (action === 'waiting-for-close') {
+        if (flyoutStateRef.current.type === 'waiting-for-close') {
+          return;
+        }
+
+        // A timeout is used to close the flyout after a delay when the user mouses out of the flyout area, and to allow
+        // us to cancel the close if the user mouses back in.
+        var timeout = setTimeout(function () {
+          updateFlyoutState('ready-to-close');
+        }, _flyoutCloseDelayMs.sideNavFlyoutCloseDelayMs);
+        flyoutStateRef.current = {
+          type: 'waiting-for-close',
+          abort: function abort() {
+            clearTimeout(timeout);
+          }
+        };
+        return;
+      }
+      if (action === 'ready-to-close') {
+        // If there are no open layers, we can close the flyout.
+        if (openLayerObserver.getCount({
+          namespace: openLayerObserverSideNavNamespace
+        }) === 0) {
+          close();
+          return;
+        }
+        flyoutStateRef.current = {
+          type: 'ready-to-close'
+        };
+        return;
+      }
+      if (action === 'force-close') {
+        close();
+        return;
+      }
+    };
+  }, [openLayerObserver, setSideNavState]);
+  var toggleVisibility = (0, _useToggleSideNav.useToggleSideNav)();
+  (0, _react.useEffect)(function () {
+    // Sync the visibility in context (provided in `<Root>`) with the local `defaultCollapsed` prop provided to `SideNav`
+    // after SSR hydration. This should only run once, after the initial render on the client.
+    setSideNavState({
+      desktop: initialDefaultCollapsed ? 'collapsed' : 'expanded',
+      mobile: 'collapsed',
+      flyout: 'closed'
+    });
+  }, [initialDefaultCollapsed, setSideNavState]);
+  var handleExpand = (0, _react.useCallback)(function (_ref2) {
+    var screen = _ref2.screen;
+    onExpand === null || onExpand === void 0 || onExpand({
+      screen: screen
+    });
+
+    // When the side nav gets expanded, we close the flyout to reset it.
+    // This prevents the flyout from staying open and ensures we are respecting the user's intent to expand.
+    updateFlyoutState('force-close');
+  }, [onExpand, updateFlyoutState]);
+  var handleCollapse = (0, _react.useCallback)(function (_ref3) {
+    var screen = _ref3.screen;
+    onCollapse === null || onCollapse === void 0 || onCollapse({
+      screen: screen
+    });
+
+    // When the side nav gets collapsed, we close the flyout to reset it.
+    // This prevents the flyout from staying open and ensures we are respecting the user's intent to collapse.
+    updateFlyoutState('force-close');
+  }, [onCollapse, updateFlyoutState]);
+  (0, _useSideNavVisibilityCallbacks.useSideNavVisibilityCallbacks)({
+    onExpand: handleExpand,
+    onCollapse: handleCollapse,
+    isExpandedOnDesktop: isExpandedOnDesktop,
+    isExpandedOnMobile: isExpandedOnMobile
+  });
+  (0, _react.useEffect)(function () {
+    var mediaQueryList = window.matchMedia('(min-width: 64rem)');
+    return (0, _bindEventListener.bind)(mediaQueryList, {
+      type: 'change',
+      listener: function listener() {
+        if (mediaQueryList.matches) {
+          // We're transitioning from tablet to desktop viewport size.
+          // We forcibly show the side nav if it was shown on mobile.
+          if (isExpandedOnMobile && !isExpandedOnDesktop) {
+            toggleVisibility();
+          }
+        }
+      }
+    });
+  }, [toggleVisibility, isExpandedOnDesktop, isExpandedOnMobile]);
+
+  /**
+   * Close the mobile side nav if there is a click outside.
+   *
+   * Binding/unbinding on changes to `isExpandedOnMobile` instead of window size changes for simplicity.
+   * If we listened to window size changes we'd need nested `bind()` calls.
+   */
+  (0, _react.useEffect)(function () {
+    if (!isExpandedOnMobile) {
+      return;
+    }
+
+    /**
+     * The expected URL fragment used by the side nav skip link.
+     */
+    var skipLinkUrlFragment = "#".concat(id);
+    return (0, _bindEventListener.bind)(window, {
+      type: 'click',
+      listener: function listener(event) {
+        if (window.matchMedia('(min-width: 64rem)').matches) {
+          // Clicks on desktop should do nothing
+          return;
+        }
+        var sideNav = navRef.current;
+        if (!sideNav || !(event.target instanceof Node)) {
+          // Ignore if our element references are invalid
+          return;
+        }
+        if (sideNav.contains(event.target)) {
+          // Clicks inside the side nav should not close it
+          return;
+        }
+        if (toggleButtonElement !== null && toggleButtonElement !== void 0 && toggleButtonElement.contains(event.target)) {
+          // Clicks on the toggle button will already toggle the side nav,
+          // so we need to ignore it or we end up doing a double toggle
+          return;
+        }
+        if (event.target instanceof HTMLAnchorElement &&
+        /**
+         * Intentionally using `.getAttribute()` for simplicity to match exactly what we expect
+         * for skip links.
+         *
+         * Alternatives considered:
+         *
+         * - Using `.href` returns a full URL, which would then require extra parsing.
+         * - Using `.hash` could incorrectly capture `<a href="/another-page#skip-link-id>` so we'd need extra checks.
+         *
+         * This approach has an edge case of `<a href="/same-page#skip-link-id>` not being captured,
+         * but we are okay with that trade-off.
+         */
+        event.target.getAttribute('href') === skipLinkUrlFragment) {
+          // This was a click on a link to the side nav, so we shouldn't try to collapse the SideNav.
+          // It was most likely the skip link, although anyone can render a link with the ID.
+          // In either case keeping the SideNav expanded makes sense.
+          return;
+        }
+        toggleVisibility();
+      }
+    });
+  }, [id, isExpandedOnMobile, toggleButtonElement, toggleVisibility]);
+  (0, _react.useEffect)(function () {
+    if (!toggleButtonElement) {
+      return;
+    }
+    return (0, _bindEventListener.bind)(toggleButtonElement, {
+      type: 'mouseenter',
+      listener: function listener() {
+        // Only flyout the side nav if the user hovered while the side nav was collapsed
+        if (isExpandedOnDesktop) {
+          return;
+        }
+
+        // Only flyout the side nav on desktop viewports
+        var _window$matchMedia = window.matchMedia('(min-width: 64rem)'),
+          matches = _window$matchMedia.matches;
+        if (matches) {
+          updateFlyoutState('open');
+        }
+      }
+    });
+  }, [updateFlyoutState, toggleButtonElement, isExpandedOnDesktop]);
+  (0, _react.useEffect)(function () {
+    if (!toggleButtonElement) {
+      return;
+    }
+    return (0, _bindEventListener.bind)(toggleButtonElement, {
+      type: 'mouseleave',
+      listener: function listener() {
+        // If the side nav is not in flyout mode, we don't need to do anything
+        if (!isFlyoutVisible) {
+          return;
+        }
+        updateFlyoutState('waiting-for-close');
+      }
+    });
+  }, [isFlyoutVisible, toggleButtonElement, updateFlyoutState]);
+  (0, _react.useEffect)(function () {
+    if (!navRef.current) {
+      return;
+    }
+    return (0, _bindEventListener.bind)(navRef.current, {
+      type: 'mouseenter',
+      listener: function listener() {
+        // If the side nav is not in flyout mode, we don't need to do anything
+        if (isExpandedOnDesktop || !isFlyoutVisible) {
+          return;
+        }
+
+        // The user mouses has moused back over the side nav
+        updateFlyoutState('open');
+      }
+    });
+  }, [isFlyoutVisible, updateFlyoutState, isExpandedOnDesktop]);
+  (0, _react.useEffect)(function () {
+    if (!navRef.current) {
+      return;
+    }
+    return (0, _bindEventListener.bind)(navRef.current, {
+      type: 'mouseleave',
+      listener: function listener() {
+        // If the side nav is not in flyout mode, we don't need to do anything
+        if (!isFlyoutVisible) {
+          return;
+        }
+        updateFlyoutState('waiting-for-close');
+      }
+    });
+  }, [isFlyoutVisible, updateFlyoutState]);
+  (0, _react.useEffect)(function () {
+    var nav = navRef.current;
+    if (!nav) {
+      return;
+    }
+    if (!isFlyoutVisible) {
+      return;
+    }
+
+    // Using a monitor rather than a drop target. Rationale:
+    // - We are not creating a drop target for the users to drop on,
+    //   we are just interested in listening to events within an element
+    // - We do not want to impact `location.{*}.dropTargets` in events
+    return (0, _adapter.monitorForElements)({
+      canMonitor: function canMonitor(_ref4) {
+        var source = _ref4.source;
+        return nav.contains(source.element);
+      },
+      onGenerateDragPreview: function onGenerateDragPreview() {
+        updateFlyoutState('drag-from-flyout-started');
+      },
+      onDrop: function onDrop(_ref5) {
+        var location = _ref5.location;
+        // Always marking the drag and done
+        updateFlyoutState('drag-from-flyout-finished');
+
+        // If the user dropped outside of the flyout, we will close the flyout
+        var underUsersPointer = document.elementFromPoint(location.current.input.clientX, location.current.input.clientY);
+        if (!nav.contains(underUsersPointer)) {
+          updateFlyoutState('waiting-for-close');
+        }
+      }
+    });
+  }, [isFlyoutVisible, updateFlyoutState]);
+  (0, _react.useEffect)(function () {
+    if (!topNavStartElement || !toggleButtonElement) {
+      return;
+    }
+    return (0, _bindEventListener.bind)(topNavStartElement, {
+      type: 'mouseover',
+      listener: function listener(event) {
+        // If the side nav is not in flyout mode, we don't need to do anything
+        if (isExpandedOnDesktop || !isFlyoutVisible) {
+          return;
+        }
+        if (event.target === topNavStartElement) {
+          // The mouse is directly over the TopNavStart element, so cancel any pending flyout closes.
+          updateFlyoutState('open');
+          return;
+        }
+        if (event.target instanceof Element && toggleButtonElement.contains(event.target)) {
+          // The mouse is over the toggle button or any of its children, so we don't want to close the flyout.
+          // We also don't need to cancel any pending closes, as we have separate event listeners for the toggle button mouse events.
+          return;
+        }
+
+        // The user has moused over a child element of the TopNavStart element that isn't the toggle button, e.g. the app switcher or nav logo,
+        // so we should close the flyout (with a delay).
+        updateFlyoutState('waiting-for-close');
+      }
+    });
+  }, [topNavStartElement, isFlyoutVisible, toggleButtonElement, isExpandedOnDesktop, updateFlyoutState]);
+  (0, _react.useEffect)(function () {
+    if (!topNavStartElement) {
+      return;
+    }
+    return (0, _bindEventListener.bind)(topNavStartElement, {
+      type: 'mouseleave',
+      listener: function listener() {
+        // If the side nav is not in flyout mode, we don't need to do anything
+        if (!isFlyoutVisible) {
+          return;
+        }
+
+        // The mouse has left the TopNavStart element, so we should close the flyout with a delay.
+        updateFlyoutState('waiting-for-close');
+      }
+    });
+  }, [topNavStartElement, isFlyoutVisible, updateFlyoutState]);
+  (0, _react.useEffect)(function () {
+    // Close the flyout if there are no more layers open and the user is not mousing over the
+    // flyout areas (side nav, TopNavStart element)
+
+    return openLayerObserver.onChange(function (_ref6) {
+      var count = _ref6.count;
+      if (flyoutStateRef.current.type === 'ready-to-close' && count === 0) {
+        updateFlyoutState('force-close');
+      }
+    }, {
+      namespace: openLayerObserverSideNavNamespace
+    });
+  }, [openLayerObserver, updateFlyoutState]);
+  (0, _react.useEffect)(function () {
+    // Clear flyout close timer if being unmounted
+    return function cleanupPendingFlyoutClose() {
+      if (flyoutStateRef.current.type === 'waiting-for-close') {
+        flyoutStateRef.current.abort();
+      }
+    };
+  }, []);
+  if (process.env.NODE_ENV !== 'production') {
+    var visible = [];
+    if (isExpandedOnMobile) {
+      visible.push('small');
+    }
+    if (isExpandedOnDesktop) {
+      visible.push('large');
+    }
+    if (isFlyoutVisible) {
+      visible.push('flyout');
+    }
+    devTimeOnlyAttributes['data-visible'] = visible.length ? visible.join(',') : 'false';
+  }
+  (0, _useResizingWidthCssVarOnRootElement.useResizingWidthCssVarOnRootElement)({
+    isEnabled: (0, _platformFeatureFlags.fg)('platform_design_system_nav4_preview_panel_support'),
+    cssVar: panelSplitterResizingVar,
+    panelId: _constants.sideNavPanelSplitterId
+  });
+  return /*#__PURE__*/React.createElement("nav", (0, _extends2.default)({
+    id: id
+  }, devTimeOnlyAttributes, {
+    "data-layout-slot": true,
+    "aria-label": label,
+    style: (0, _defineProperty2.default)({}, _constants.sideNavVar, clampedWidth),
+    ref: (0, _platformFeatureFlags.fg)('platform_design_system_nav4_preview_panel_support') ? mergedRef : navRef,
+    "data-testid": testId,
+    className: (0, _runtime.ax)([styles.root, (0, _platformFeatureFlags.fg)('platform_design_system_nav4_sidenav_border') ? styles.newBorder : styles.oldBorder, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && (0, _platformFeatureFlags.fg)('platform_design_system_nav4_sidenav_border') && styles.newBorderFlyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && styles.flyoutAnimateClosed])
+  }), (0, _platformFeatureFlags.fg)('platform_design_system_nav4_preview_panel_support') &&
+  /*#__PURE__*/
+  // This CSS var is used by the `Panel` slot to enforce its maximum width constraint.
+  // When we remove the UNSAFE legacy usage, we can change this to `HoistCssVarToLocalGrid`
+  React.createElement(_hoistUtils.DangerouslyHoistCssVarToDocumentRoot, {
+    variableName: _constants.sideNavLiveWidthVar,
+    value: "0px",
+    mediaQuery: _responsive.media.above.md,
+    responsiveValue: isExpandedOnDesktop ? "var(".concat(panelSplitterResizingVar, ", ").concat(clampedWidth, ")") : 0
+  }), dangerouslyHoistSlotSizes && ((0, _platformFeatureFlags.fg)('platform_design_system_nav4_preview_panel_support') ?
+  /*#__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(_hoistUtils.DangerouslyHoistCssVarToDocumentRoot, {
+    variableName: _constants.UNSAFE_sideNavLayoutVar,
+    value: "var(".concat(_constants.sideNavLiveWidthVar, ")")
+  }) : /*#__PURE__*/React.createElement(_hoistUtils.DangerouslyHoistCssVarToDocumentRoot, {
+    variableName: _constants.UNSAFE_sideNavLayoutVar,
+    value: "0px",
+    mediaQuery: _responsive.media.above.md,
+    responsiveValue: isExpandedOnDesktop ? clampedWidth : 0
+  })
+  // ------ END UNSAFE STYLES ------
+  ), /*#__PURE__*/React.createElement(_provider.PanelSplitterProvider, {
+    panelId: _constants.sideNavPanelSplitterId,
+    panelRef: navRef,
+    panelWidth: width,
+    onCompleteResize: setWidth,
+    getResizeBounds: getResizeBounds,
+    resizingCssVar: panelSplitterResizingVar,
+    isEnabled: isExpandedOnDesktop && !isFlyoutVisible
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([styles.flexContainer])
+  }, children)));
+}
+
+/**
+ * The side navigation layout area. It will show on the left (inline start) of the screen.
+ *
+ * Use the side nav area components (`SideNavHeader`, `SideNavContent`, `SideNavFooter`) to position
+ * content within areas of the side nav.
+ *
+ * You can optionally render a `PanelSplitter` as a child to make the side navigation slot resizable.
+ */
+function SideNav(_ref8) {
+  var children = _ref8.children,
+    defaultCollapsed = _ref8.defaultCollapsed,
+    _ref8$defaultWidth = _ref8.defaultWidth,
+    defaultWidth = _ref8$defaultWidth === void 0 ? 320 : _ref8$defaultWidth,
+    testId = _ref8.testId,
+    label = _ref8.label,
+    _ref8$skipLinkLabel = _ref8.skipLinkLabel,
+    skipLinkLabel = _ref8$skipLinkLabel === void 0 ? label : _ref8$skipLinkLabel,
+    onExpand = _ref8.onExpand,
+    onCollapse = _ref8.onCollapse,
+    id = _ref8.id;
+  return /*#__PURE__*/React.createElement(_openLayerObserver.OpenLayerObserverNamespaceProvider, {
+    namespace: openLayerObserverSideNavNamespace
+  }, /*#__PURE__*/React.createElement(SideNavInternal, {
+    defaultCollapsed: defaultCollapsed,
+    defaultWidth: defaultWidth,
+    testId: testId,
+    label: label,
+    skipLinkLabel: skipLinkLabel,
+    onExpand: onExpand,
+    onCollapse: onCollapse,
+    id: id
+  }, children));
+}

package/dist/cjs/ui/page-layout/side-nav/toggle-button-context.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SideNavToggleButtonElement = exports.SideNavToggleButtonAttachRef = void 0;
+var _react = require("react");
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+/**
+ * Context for the side nav toggle button element.
+ * Used to power the side nav flyout by allowing the side nav to bind event listeners to the button element.
+ */
+var SideNavToggleButtonElement = exports.SideNavToggleButtonElement = /*#__PURE__*/(0, _react.createContext)(null);
+
+/**
+ * Context for the callback ref used to respond to toggle button ref being attached. It is used to update the
+ * `SideNavToggleButtonRef` state so consumers can react to the ref being attached.
+ *
+ * e.g. Once the side nav toggle button has been mounted, the side nav can bind mouse event listeners to it
+ * to power the sidenav flyout.
+ *
+ * A callback ref is needed because the side nav can be mounted before the elements in the top bar (e.g. if the element
+ *  is lazy loaded, which happens in Jira and Confluence), which would prevent the event listeners from being set up.
+ */
+var SideNavToggleButtonAttachRef = exports.SideNavToggleButtonAttachRef = /*#__PURE__*/(0, _react.createContext)(_noop.default);

package/dist/cjs/ui/page-layout/side-nav/toggle-button-provider.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SideNavToggleButtonProvider = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _toggleButtonContext = require("./toggle-button-context");
+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); }
+/**
+ * Provider for the side nav toggle button contexts.
+ *
+ * We are using a [ref callback](https://react.dev/reference/react-dom/components/common#ref-callback) along with a state
+ * for storing the button element once it has mounted, so that the side nav can bind event listeners to the button
+ * once it is mounted.
+ *
+ * Otherwise, the side nav can be mounted before the button (e.g. if the button is lazy loaded), which would prevent the
+ * event listeners from being set up.
+ *
+ * State is required as opposed to just a ref so that the effects in the side nav can react the element actually being mounted,
+ * as ref values cannot be added as effect dependencies.
+ */
+var SideNavToggleButtonProvider = exports.SideNavToggleButtonProvider = function SideNavToggleButtonProvider(_ref) {
+  var children = _ref.children;
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    element = _useState2[0],
+    setElement = _useState2[1];
+  return /*#__PURE__*/_react.default.createElement(_toggleButtonContext.SideNavToggleButtonElement.Provider, {
+    value: element
+  }, /*#__PURE__*/_react.default.createElement(_toggleButtonContext.SideNavToggleButtonAttachRef.Provider, {
+    value: setElement
+  }, children));
+};

package/dist/cjs/ui/page-layout/side-nav/toggle-button.compiled.css

@@ -0,0 +1,2 @@
+._1e0c1bgi{display:contents}
+._lcxvglyw{pointer-events:none}