/* top-nav-start.tsx generated by @compiled/babel-plugin v0.38.1 */
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.TopNavStart = TopNavStart;
require("./top-nav-start.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _useStableRef = _interopRequireDefault(require("@atlaskit/ds-lib/use-stable-ref"));
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _compiled = require("@atlaskit/primitives/compiled");
var _topNavStartContext = require("../../../context/top-nav-start/top-nav-start-context");
var _useSideNavVisibility3 = require("../side-nav/use-side-nav-visibility");
var _visibilityContext = require("../side-nav/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); }
/**
 * Firefox does support these reorder animations, but only partially enabling layout animations would look odd.
 *
 * We are using JS to detect Firefox and disable animations, instead of using CSS, as Compiled currently does not merge duplicate
 * CSS at-rules when at-rules are nested: https://github.com/atlassian-labs/compiled/blob/e04a325915e1d13010205089e4915de0e53bc2d4/packages/css/src/plugins/merge-duplicate-at-rules.ts#L5
 * Avoiding nesting the `@supports` at-rule inside of `@media` means Compiled can remove duplicate styles from the generated CSS.
 */
var isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;

// Placed in a variable, as the value is used in the translateX value for the children wrapper animation.
var flexGap = "var(--ds-space-050, 4px)";

/**
 * Styles for the TopNavStart element.
 *
 * When `navx-full-height-sidebar` is enabled this is the styling for the inner element,
 * which re-enables pointer events.
 */
var innerStyles = {
  root: "_zulp1b66 _yyhykb7n _4t3i1osq _4cvr1h6o _1e0c1txw _glte1ris _15ri1mjv _1gs5usvi",
  jiraProductLogoUpdate: "_15rip2n4",
  fullHeightSidebar: "_lcxv1wug",
  fullHeightSidebarExpanded: "_15rin7od _glte1osq"
};

/**
 * Styles for the outer element, that does not have re-enabled pointer events and spans the entire
 * width of the TopNavStart area.
 *
 * This wrapper element is only rendered when `navx-full-height-sidebar` is enabled.
 */
var wrapperStyles = {
  root: "_vchhusvi _bozgutpp _4t3i1osq",
  fullHeightSidebarExpanded: "_glte93mn _exxmpxbi"
};

/**
 * We use a fixed translateX offset for the slide animation (used when the TopNavStart children elements are reordered).
 * This fixed offset makes the elements appear to animate smoothly from the old to the new position.
 * This offset is calculated based on:
 * - 32px (2rem) width of the side nav toggle button (IconButton)
 * - 4px gap ('space.050' token) of the flex container
 *
 * The benefit of hardcoding this offset is that we don't need to calculate it using JS each time the sidebar is toggled.
 * However, it could become out of sync if the width of IconButton changes.
 *
 * The alternative is using JS to store the previous position of the children wrapper element, and calculate the offset based on
 * the new position, and then transforming using that offset. This would prevent the animation from going out of sync.
 */
var childrenWrapperAnimationOffset = "calc(2rem + ".concat(flexGap, ")");
var childrenWrapperStyles = {
  root: "_zulp1kw7 _1e0c1kw7 _1ul9idpf _15yekb7n _65m41mrw",
  animationBaseStyles: "_10t81e03",
  finalPosition: "_mjvcz12g _xrrpfnf5",
  expandAnimationStartPosition: "_mjvcyrjp",
  collapseAnimationStartPosition: "_mjvco0k7"
};

/**
 * We use a fixed translateX offset for the toggle button slide animation (used when the TopNavStart children elements are reordered).
 * The specific value doesn't matter too much for the toggle button animation, so we are using `100%`, which will match the toggle button width.
 *
 * By combining the `translateX` animation with an `opacity` fade, the feel and experience is actually quite similar to animating the
 * element from the exact old position (offset), and it avoids the additional complexity of needing to track and calculate the exact offset.
 */
var toggleButtonWrapperStyles = {
  root: "_15yekb7n _65m41mrw _10t81rjc",
  finalPosition: "_mjvcz12g _xrrpfnf5 _bgpzkb7n",
  expandAnimationStartPosition: "_mjvc1p9u _bgpzidpf",
  collapseAnimationStartPosition: "_mjvc1efy _bgpzidpf",
  expandAnimationTimingFunction: "_1xq51ytf",
  collapseAnimationTimingFunction: "_1xq55ucs",
  alignEnd: "_ahbq1wug"
};

/**
 * The consistent key used for the side nav toggle button to ensure it does not get remounted
 * when it is reordered.
 *
 * This ensures we get focus restoration for free.
 */
var sideNavToggleButtonKey = 'side-nav-toggle-button';
var TopNavStartInnerOld = /*#__PURE__*/(0, _react.forwardRef)(function TopNavStartInner(_ref, ref) {
  var children = _ref.children,
    testId = _ref.testId;
  return /*#__PURE__*/_react.default.createElement("div", {
    ref: ref,
    "data-testid": testId,
    className: (0, _runtime.ax)([innerStyles.root, (0, _platformFeatureFlags.fg)('team25-eu-jira-logo-updates-csm-jsm') && innerStyles.jiraProductLogoUpdate])
  }, children);
});
var TopNavStartInnerFHS = /*#__PURE__*/(0, _react.forwardRef)(function TopNavStartInnerFHS(_ref2, ref) {
  var children = _ref2.children,
    testId = _ref2.testId;
  // This needs the real `defaultCollapsed` state or will not SSR properly
  // TODO: lift `defaultCollapsed` state to `Root` (DSP-23683)
  // then context value will be correct in SSR / from initial render
  var _useSideNavVisibility = (0, _useSideNavVisibility3.useSideNavVisibility)({
      defaultCollapsed: true
    }),
    isExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop;
  return /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _runtime.ax)([wrapperStyles.root, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded])
  }, /*#__PURE__*/_react.default.createElement("div", {
    ref: ref,
    "data-testid": testId,
    className: (0, _runtime.ax)([innerStyles.root, innerStyles.fullHeightSidebar, (0, _platformFeatureFlags.fg)('team25-eu-jira-logo-updates-csm-jsm') && innerStyles.jiraProductLogoUpdate, isExpandedOnDesktop && innerStyles.fullHeightSidebarExpanded])
  }, children));
});

/**
 * __TopNavStart__
 *
 * Wrapper for the top navigation actions on the inline-start (left) side of the top navigation.
 */
function TopNavStart(_ref3) {
  var children = _ref3.children,
    testId = _ref3.testId,
    sideNavToggleButton = _ref3.sideNavToggleButton;
  var ref = (0, _react.useContext)(_topNavStartContext.TopNavStartAttachRef);
  var elementRef = (0, _react.useRef)(null);

  // FIXME: unsafe pattern with Suspense, should use callback ref / store in state
  // Should handle the underlying HTMLElement changing without a remount
  (0, _react.useEffect)(function () {
    ref(elementRef.current);
  }, [elementRef, ref]);

  // This needs the real `defaultCollapsed` state or will not SSR properly
  // TODO: lift `defaultCollapsed` state to `Root` (DSP-23683)
  // then context value will be correct in SSR / from initial render
  var _useSideNavVisibility2 = (0, _useSideNavVisibility3.useSideNavVisibility)({
      defaultCollapsed: true
    }),
    isExpandedOnDesktop = _useSideNavVisibility2.isExpandedOnDesktop;

  // For SSR assume desktop
  var _useState = (0, _react.useState)(true),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    isDesktop = _useState2[0],
    setIsDesktop = _useState2[1];
  // Set state to real value on client
  // This could result in some visible shift on mobile when hydrating SSR
  // TODO: review and improve SSR behavior as necessary (DSP-23817)
  (0, _react.useLayoutEffect)(function () {
    // Checking this to avoid breaking tests when `matchMedia` is not mocked
    // Ideally we wouldn't cater to test environments, but this avoids introducing unnecessary friction
    if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
      setIsDesktop(window.matchMedia('(min-width: 64rem)').matches);
    }
  }, []);
  (0, _compiled.UNSAFE_useMediaQuery)('above.md', function (event) {
    setIsDesktop(event.matches);
  });
  var _useState3 = (0, _react.useState)({
      type: 'idle'
    }),
    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
    animationState = _useState4[0],
    setAnimationState = _useState4[1];

  // Used to prevent the reorder animations from running on the initial render.
  var isFirstRenderRef = (0, _react.useRef)(true);
  var sideNavState = (0, _react.useContext)(_visibilityContext.SideNavVisibilityState);
  (0, _react.useEffect)(function () {
    if (!(0, _platformFeatureFlags.fg)('navx-full-height-sidebar')) {
      return;
    }

    // Ignore renders until the side nav state is initialized
    // So that apps using the legacy API for setting side nav default state do not see
    // animations when they shouldn't
    if (sideNavState === null) {
      return;
    }
    if (isFirstRenderRef.current) {
      isFirstRenderRef.current = false;
    }
  }, [sideNavState]);

  // Using a stable ref to avoid re-running the animation layout effect when the toggle button prop value changes, which
  // can happen a lot (e.g. if the parent re-renders)
  var sideNavToggleButtonStableRef = (0, _useStableRef.default)(sideNavToggleButton);
  (0, _react.useLayoutEffect)(function () {
    if (!(0, _platformFeatureFlags.fg)('navx-full-height-sidebar')) {
      return;
    }

    /**
     * This layout effect is used to animate the TopNavStart children elements to their new position after being reordered.
     * It is called when the sidebar's desktop expansion state changes.
     *
     * It works by first setting a translateX offset on the elements, used as the start position of the slide animation.
     * - For the toggle button, it's a fixed offset. It's combined with an opacity, so the exact offset doesn't matter too much.
     * - For the children wrapper (wrapping everything except the toggle button), an offset was chosen to make the animation
     * start position the exact same as the element's old position. See comments for `childrenWrapperStyles` for more details.
     *
     * On the next frame, the translateX offset is cleared, triggering the animation to the new position.
     */

    if (isFirstRenderRef.current) {
      // No animations on initial render.
      return;
    }
    if (!sideNavToggleButtonStableRef.current) {
      // If there is no toggle button, there should be no re-order animations.
      return;
    }

    // Set the translateX offsets so elements are ready to animate to their actual new position after being reordered
    setAnimationState({
      type: isExpandedOnDesktop ? 'expand' : 'collapse'
    });
    requestAnimationFrame(function () {
      // Clear translateX offsets on next frame to trigger animation to new position in a re-render
      setAnimationState({
        type: 'idle'
      });
    });

    // This layout effect is called when the sidebar's desktop expansion state changes.
  }, [isExpandedOnDesktop, sideNavToggleButtonStableRef]);
  var TopNavStartInner = (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') ? TopNavStartInnerFHS : TopNavStartInnerOld;
  return /*#__PURE__*/_react.default.createElement(TopNavStartInner, {
    ref: elementRef,
    testId: testId
  }, !(0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && sideNavToggleButton, sideNavToggleButton && (!isDesktop || !isExpandedOnDesktop) && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && /*#__PURE__*/_react.default.createElement("div", {
    key: sideNavToggleButtonKey,
    className: (0, _runtime.ax)([!isFirefox && toggleButtonWrapperStyles.root, !isFirefox && animationState.type === 'idle' && toggleButtonWrapperStyles.finalPosition, !isFirefox &&
    // Timing function is applied when the browser animates to the idle position.
    animationState.type === 'idle' && toggleButtonWrapperStyles.collapseAnimationTimingFunction, !isFirefox && animationState.type === 'collapse' && toggleButtonWrapperStyles.collapseAnimationStartPosition])
  }, sideNavToggleButton), (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') ? /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _runtime.ax)([childrenWrapperStyles.root, !isFirefox && childrenWrapperStyles.animationBaseStyles, !isFirefox && animationState.type === 'idle' && childrenWrapperStyles.finalPosition, !isFirefox && animationState.type === 'expand' && childrenWrapperStyles.expandAnimationStartPosition, !isFirefox && animationState.type === 'collapse' && childrenWrapperStyles.collapseAnimationStartPosition])
  }, children) : children, sideNavToggleButton && isDesktop && isExpandedOnDesktop && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && /*#__PURE__*/_react.default.createElement("div", {
    key: sideNavToggleButtonKey,
    className: (0, _runtime.ax)([!isFirefox && toggleButtonWrapperStyles.root, toggleButtonWrapperStyles.alignEnd, !isFirefox && animationState.type === 'idle' && toggleButtonWrapperStyles.finalPosition, !isFirefox &&
    // Timing function is applied when the browser animates to the idle position.
    animationState.type === 'idle' && toggleButtonWrapperStyles.expandAnimationTimingFunction, !isFirefox && animationState.type === 'expand' && toggleButtonWrapperStyles.expandAnimationStartPosition])
  }, sideNavToggleButton));
}