@atlaskit/side-navigation/dist/cjs/components/NestableNavigationContent/index.js

A highly composable side navigation component that supports nested views.

/* index.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.ROOT_ID = exports.NestableNavigationContent = void 0;
require("./index.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _exitingPersistence = _interopRequireDefault(require("@atlaskit/motion/exiting-persistence"));
var _fg = require("@atlaskit/platform-feature-flags/fg");
var _useChildIds2 = _interopRequireDefault(require("../../common/use-child-ids"));
var _goBackItem = require("../Item/go-back-item");
var _NestingItem = require("../NestingItem");
var _nestedContext = require("./nested-context");
var _nestingMotion = require("./nesting-motion");
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); }
// Named so ERT doesn't pick up the override name as a type.

var ROOT_ID = exports.ROOT_ID = 'ATLASKIT_NESTED_ROOT';

/**
 * @deprecated `@atlaskit/side-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
 */

var nestableNavigationContentStyles = null;
var nestingRootStyles = null;

/**
 * __Nestable navigation content__
 *
 * The container for navigation items with nested views
 *
 * - [Examples](https://atlassian.design/components/side-navigation/examples#nested-navigation)
 * - [Code](https://atlassian.design/components/side-navigation/code)
 *
 * @deprecated `@atlaskit/side-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
 */
var NestableNavigationContent = exports.NestableNavigationContent = function NestableNavigationContent(props) {
  var containerRef = (0, _react.useRef)(null);
  var children = props.children,
    testId = props.testId,
    overrides = props.overrides,
    initialStack = props.initialStack,
    onChange = props.onChange,
    onUnknownNest = props.onUnknownNest,
    stack = props.stack,
    showTopScrollIndicator = props.showTopScrollIndicator,
    _props$isDefaultFocus = props.isDefaultFocusControl,
    isDefaultFocusControl = _props$isDefaultFocus === void 0 ? true : _props$isDefaultFocus;
  var goBackButtonRef = (0, _react.useRef)(null);
  var _useState = (0, _react.useState)(stack || initialStack || []),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    committedStack = _useState2[0],
    setCommittedStack = _useState2[1];
  var controlledStack = stack || undefined;
  var currentStackId = committedStack[committedStack.length - 1] || ROOT_ID;
  var _useState3 = (0, _react.useState)('nesting'),
    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
    transition = _useState4[0],
    setTransition = _useState4[1];
  var backTestId = testId && "".concat(testId, "--go-back-item");
  var _useState5 = (0, _react.useState)(''),
    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
    activeParentId = _useState6[0],
    setActiveParentId = _useState6[1];
  var _useState7 = (0, _react.useState)(false),
    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
    focusGoBackButton = _useState8[0],
    setFocusGoBackButton = _useState8[1];
  var shouldFocus = isDefaultFocusControl && (0, _fg.fg)('platform-side-navigation-keyboard-focus');
  var renderGoBackItem = overrides && overrides.GoBackItem && overrides.GoBackItem.render ? overrides.GoBackItem.render : function (props) {
    return /*#__PURE__*/_react.default.createElement(_goBackItem.GoBackItem, props, "Go back");
  };
  var _useChildIds = (0, _useChildIds2.default)(currentStackId, committedStack, onUnknownNest),
    childIdsRef = _useChildIds.childIdsRef;
  var onNestHandler = (0, _react.useCallback)(function (layerId) {
    onChange && onChange(committedStack.concat(layerId));
    setFocusGoBackButton(true);
    if (controlledStack) {
      // We are in controlled mode - ignore the steps.
      return;
    }
    // We need to split the state update into to parts.
    // First: Updating the direction of the motions.
    // Second: Actually updating the stack (which will cause elements to enter & leave).
    setTransition('nesting');
    requestAnimationFrame(function () {
      setCommittedStack(function (prev) {
        var newStack = prev.concat(layerId);
        return newStack;
      });
    });
  }, [controlledStack, onChange, committedStack]);
  var onUnNestHandler = (0, _react.useCallback)(function () {
    onChange && onChange(committedStack.slice(0, committedStack.length - 1));
    setActiveParentId(currentStackId);
    setFocusGoBackButton(false);
    if (controlledStack) {
      // We are in controlled mode - ignore the steps.
      return;
    }

    // We need to split the state update into to parts.
    // First: Updating the direction of the motions.
    // Second: Actually updating the stack (which will cause elements to enter & leave).
    setTransition('unnesting');
    requestAnimationFrame(function () {
      setCommittedStack(function (prev) {
        var newStack = prev.slice(0, prev.length - 1);
        return newStack;
      });
    });
  }, [controlledStack, onChange, committedStack, setActiveParentId, currentStackId]);
  (0, _react.useEffect)(function () {
    if (!controlledStack) {
      // We aren't in controlled mode - bail out.
      return;
    }
    if (JSON.stringify(committedStack) === JSON.stringify(controlledStack)) {
      // stacks are equal - do nothing!
      return;
    }

    // Controlled prop updated, let's figure out if we're nesting or unnesting.
    if (controlledStack.length < committedStack.length) {
      // We are unnesting (removing from the stack)
      setTransition('unnesting');
    } else {
      // We are nesting (adding to the stack)
      setTransition('nesting');
    }
    requestAnimationFrame(function () {
      setCommittedStack(controlledStack);
    });
  }, [committedStack, controlledStack]);
  var backButton = renderGoBackItem({
    onClick: onUnNestHandler,
    testId: backTestId,
    ref: shouldFocus ? goBackButtonRef : null
  });
  var context = (0, _react.useMemo)(function () {
    return {
      currentStackId: currentStackId,
      backButton: backButton,
      stack: committedStack,
      onNest: onNestHandler,
      onUnNest: onUnNestHandler,
      parentId: ROOT_ID,
      childIds: childIdsRef,
      forceShowTopScrollIndicator: showTopScrollIndicator,
      activeParentId: activeParentId,
      goBackButtonRef: goBackButtonRef,
      isDefaultFocusControl: isDefaultFocusControl,
      focusGoBackButton: focusGoBackButton
    };
  }, [currentStackId, backButton, committedStack, onNestHandler, onUnNestHandler, childIdsRef, showTopScrollIndicator, activeParentId, goBackButtonRef, isDefaultFocusControl, focusGoBackButton]);
  var manageFocus = function manageFocus(event) {
    var triggeredByKeyboard = event.nativeEvent.detail === 0;
    if (triggeredByKeyboard) {
      containerRef.current && containerRef.current.focus();
    }
  };
  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
    "data-testid": testId,
    ref: containerRef,
    tabIndex: -1,
    onClick: manageFocus,
    className: (0, _runtime.ax)(["_12ji1r31 _1qu2glyw _12y31o36 _4t3i1osq _kqswh2mm"])
  }, /*#__PURE__*/_react.default.createElement(_exitingPersistence.default, null, /*#__PURE__*/_react.default.createElement(_nestingMotion.NestingMotion
  // Key is needed to have a unique react instance per stack name.
  // This enables us to easily animate it in & out with exiting persistence.
  , {
    key: currentStackId,
    enterFrom: transition === 'nesting' ? 'right' : 'left',
    exitTo: transition === 'nesting' ? 'left' : 'right',
    testId: testId && "".concat(testId, "-anim")
  }, function (motion) {
    return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, motion, {
      className: (0, _runtime.ax)(["_1e0c1txw _1bsb1osq _4t3i1osq _kqswstnw _2lx21bp4", motion.className])
    }), /*#__PURE__*/_react.default.createElement(_nestedContext.NestedContext.Provider, {
      // This provider is inside the NestingMotion to ensure it keeps a stale
      // reference to the previous value.
      value: context
    }, /*#__PURE__*/_react.default.createElement(_NestingItem.NestingItem, {
      title: "",
      id: ROOT_ID
    }, children)));
  }))));
};