@atlaskit/side-navigation 1.1.2

package/dist/cjs/components/NestableNavigationContent/index.js

@@ -0,0 +1,182 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ROOT_ID = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _core = require("@emotion/core");
+
+var _motion = require("@atlaskit/motion");
+
+var _Item = require("../Item");
+
+var _NestingItem = _interopRequireDefault(require("../NestingItem"));
+
+var _context = require("./context");
+
+var _nestingMotion = require("./nesting-motion");
+
+/** @jsx jsx */
+// Named so ERT doesn't pick up the override name as a type.
+var ROOT_ID = 'ATLASKIT_NESTED_ROOT';
+exports.ROOT_ID = ROOT_ID;
+
+var 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,
+      stack = props.stack;
+
+  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 renderGoBackItem = overrides && overrides.GoBackItem && overrides.GoBackItem.render ? overrides.GoBackItem.render : function (props) {
+    return (0, _core.jsx)(_Item.GoBackItem, props, "Go back");
+  };
+  var onNestHandler = (0, _react.useCallback)(function (layerId) {
+    onChange && onChange(committedStack.concat(layerId));
+
+    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));
+
+    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]);
+  (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
+  });
+  var context = (0, _react.useMemo)(function () {
+    return {
+      currentStackId: currentStackId,
+      backButton: backButton,
+      stack: committedStack,
+      onNest: onNestHandler,
+      onUnNest: onUnNestHandler,
+      parentId: ROOT_ID
+    };
+  }, [onNestHandler, onUnNestHandler, backButton, committedStack, currentStackId]);
+
+  var manageFocus = function manageFocus(event) {
+    var triggeredByKeyboard = event.nativeEvent.detail === 0;
+
+    if (triggeredByKeyboard) {
+      containerRef.current && containerRef.current.focus();
+    }
+  };
+
+  return (0, _core.jsx)("div", {
+    "data-testid": testId,
+    css: {
+      position: 'relative',
+      height: '100%',
+      outline: 'none'
+    },
+    ref: containerRef,
+    tabIndex: -1,
+    onClick: manageFocus
+  }, (0, _core.jsx)(_motion.ExitingPersistence, null, (0, _core.jsx)(_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 (0, _core.jsx)("div", (0, _extends2.default)({
+      css: {
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column'
+      }
+    }, motion), (0, _core.jsx)(_context.NestedContext.Provider, {
+      // This provider is inside the NestingMotion to ensure it keeps a stale
+      // reference to the previous value.
+      value: context
+    }, (0, _core.jsx)(_NestingItem.default, {
+      title: "",
+      id: ROOT_ID
+    }, children)));
+  })));
+};
+
+var _default = NestableNavigationContent;
+exports.default = _default;

package/dist/cjs/components/NestableNavigationContent/nesting-motion.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NestingMotion = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _core = require("@emotion/core");
+
+var _motion = require("@atlaskit/motion");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var NestingMotion = function NestingMotion(props) {
+  var children = props.children,
+      enterFrom = props.enterFrom,
+      exitTo = props.exitTo,
+      testId = props.testId;
+  return (0, _core.jsx)(_motion.SlideIn, {
+    exitTo: exitTo,
+    enterFrom: enterFrom,
+    animationTimingFunction: function animationTimingFunction(_) {
+      return _motion.easeOut;
+    }
+  }, function (innerProps, direction) {
+    return children(_objectSpread({
+      'data-enter-from': enterFrom,
+      'data-exit-to': exitTo,
+      'data-testid': testId && "".concat(testId, "-").concat(direction)
+    }, innerProps));
+  });
+};
+
+exports.NestingMotion = NestingMotion;

package/dist/cjs/components/NestingItem/hack-for-ert.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = _default;
+
+function _default(_) {}

package/dist/cjs/components/NestingItem/index.js

@@ -0,0 +1,173 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _core = require("@emotion/core");
+
+var _arrowRightCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-right-circle"));
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _tokens = require("@atlaskit/tokens");
+
+var _styles = require("../../common/styles");
+
+var _index = require("../index");
+
+var _NestableNavigationContent = require("../NestableNavigationContent");
+
+var _context = require("../NestableNavigationContent/context");
+
+var _styles2 = require("./styles");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+/**
+ * NestingItem will render itself differently depending in what context it is rendered in.
+ * When not open - it will render itself as an item.
+ * When open - it will render its children.
+ */
+var NestingItem = function NestingItem(props) {
+  var children = props.children,
+      iconAfter = props.iconAfter,
+      title = props.title,
+      onClick = props.onClick,
+      cssFn = props.cssFn,
+      isSelected = props.isSelected,
+      id = props.id,
+      component = props.component,
+      testId = props.testId,
+      rest = (0, _objectWithoutProperties2.default)(props, ["children", "iconAfter", "title", "onClick", "cssFn", "isSelected", "id", "component", "testId"]);
+
+  var _useNestedContext = (0, _context.useNestedContext)(),
+      currentStackId = _useNestedContext.currentStackId,
+      onNest = _useNestedContext.onNest,
+      onUnNest = _useNestedContext.onUnNest,
+      contextualBackButton = _useNestedContext.backButton,
+      stack = _useNestedContext.stack;
+
+  var mergedStyles = (0, _styles.overrideStyleFunction)(_styles2.nestingItemStyle, cssFn);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isInteracted = _useState2[0],
+      setIsInteracted = _useState2[1];
+
+  var backButton = props.overrides && props.overrides.GoBackItem && props.overrides.GoBackItem.render && props.overrides.GoBackItem.render({
+    onClick: onUnNest,
+    testId: testId && "".concat(testId, "--go-back-item")
+  }) || contextualBackButton;
+  var context = (0, _react.useMemo)(function () {
+    return {
+      stack: stack,
+      currentStackId: currentStackId,
+      onNest: onNest,
+      onUnNest: onUnNest,
+      backButton: backButton,
+      parentId: id
+    };
+  }, [onNest, onUnNest, backButton, stack, id, currentStackId]);
+
+  var isNormalClick = function isNormalClick(e) {
+    return !(e.button || e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
+  };
+  /**
+   * We want both the on nest handler and the onclick handler to be called.
+   * We create a wrapper function to call both.
+   */
+
+
+  var onClickHandler = (0, _react.useCallback)(function (e) {
+    if (isInteracted) {
+      // We return early if this has been interacted with because its assumed
+      // this will be already exiting - so we don't want to double up the click.
+      return;
+    } // Avoid a nesting transition if a modifier key is detected during click.
+
+
+    if (isNormalClick(e)) {
+      setIsInteracted(true);
+      onNest(id);
+    }
+
+    onClick && onClick(e);
+  }, [isInteracted, onClick, onNest, id]);
+
+  if (currentStackId === id) {
+    return (0, _core.jsx)(_context.NestedContext.Provider, {
+      value: context
+    }, stack.length >= 1 && (0, _core.jsx)("div", {
+      css: {
+        marginLeft: (0, _constants.gridSize)(),
+        marginRight: (0, _constants.gridSize)(),
+        // This padding bottom needs to match the section margin inside @atlaskit/menu.
+        paddingTop: (0, _constants.gridSize)() * 0.75,
+        paddingBottom: (0, _constants.gridSize)() * 0.75
+      }
+    }, backButton), (0, _core.jsx)(_index.NavigationContent, {
+      testId: testId,
+      showTopScrollIndicator: stack.length >= 1
+    }, children));
+  }
+
+  if ([_NestableNavigationContent.ROOT_ID].concat((0, _toConsumableArray2.default)(stack)).includes(id)) {
+    return children;
+  }
+
+  var componentProps = _objectSpread(_objectSpread({
+    iconAfter: (0, _core.jsx)(_react.Fragment, null, iconAfter ? (0, _core.jsx)("span", {
+      "data-custom-icon": true
+    }, iconAfter) : null, (0, _core.jsx)("span", {
+      "data-right-arrow": true
+    }, (0, _core.jsx)(_arrowRightCircle.default, {
+      testId: testId && "".concat(testId, "--item--right-arrow"),
+      secondaryColor: (0, _tokens.token)('color.background.default', _colors.N10),
+      label: ""
+    }))),
+    onClick: onClickHandler,
+    isSelected: isSelected || isInteracted,
+    testId: testId && "".concat(testId, "--item")
+  }, rest), {}, {
+    children: title,
+    cssFn: mergedStyles
+  });
+
+  if (component) {
+    return (0, _core.jsx)(_index.CustomItem, (0, _extends2.default)({}, componentProps, {
+      //@ts-expect-error TODO Fix legit TypeScript 3.9.6 improved inference error
+      component: component
+    }));
+  }
+
+  return (0, _core.jsx)(_index.ButtonItem, componentProps);
+};
+
+var _default = NestingItem;
+exports.default = _default;

package/dist/cjs/components/NestingItem/styles.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.nestingItemStyle = exports.enabledCSS = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _enabledCSS, _disabledCSS;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+// exposed for testing purposes
+var enabledCSS = (_enabledCSS = {}, (0, _defineProperty2.default)(_enabledCSS, '&:hover [data-custom-icon]', {
+  display: 'none'
+}), (0, _defineProperty2.default)(_enabledCSS, '&:active [data-custom-icon]', {
+  display: 'none'
+}), (0, _defineProperty2.default)(_enabledCSS, '&:focus [data-custom-icon]', {
+  display: 'none'
+}), (0, _defineProperty2.default)(_enabledCSS, '& [data-custom-icon]', {
+  display: 'inherit'
+}), (0, _defineProperty2.default)(_enabledCSS, '&:hover [data-right-arrow]', {
+  display: 'inherit'
+}), (0, _defineProperty2.default)(_enabledCSS, '&:active [data-right-arrow]', {
+  display: 'inherit'
+}), (0, _defineProperty2.default)(_enabledCSS, '&:focus [data-right-arrow]', {
+  display: 'inherit'
+}), (0, _defineProperty2.default)(_enabledCSS, '& [data-right-arrow]', {
+  display: 'none'
+}), _enabledCSS);
+exports.enabledCSS = enabledCSS;
+var disabledCSS = (_disabledCSS = {}, (0, _defineProperty2.default)(_disabledCSS, '[data-item-elem-after]', {
+  opacity: 0
+}), (0, _defineProperty2.default)(_disabledCSS, '& [data-right-arrow]', {
+  display: 'none'
+}), _disabledCSS);
+
+var nestingItemStyle = function nestingItemStyle(state) {
+  return _objectSpread({}, state.isDisabled ? disabledCSS : enabledCSS);
+};
+
+exports.nestingItemStyle = nestingItemStyle;