@atlaskit/side-navigation 1.1.2

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

@@ -0,0 +1,28 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+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) { _defineProperty(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; }
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { easeOut, SlideIn } from '@atlaskit/motion';
+export var NestingMotion = function NestingMotion(props) {
+  var children = props.children,
+      enterFrom = props.enterFrom,
+      exitTo = props.exitTo,
+      testId = props.testId;
+  return jsx(SlideIn, {
+    exitTo: exitTo,
+    enterFrom: enterFrom,
+    animationTimingFunction: function animationTimingFunction(_) {
+      return easeOut;
+    }
+  }, function (innerProps, direction) {
+    return children(_objectSpread({
+      'data-enter-from': enterFrom,
+      'data-exit-to': exitTo,
+      'data-testid': testId && "".concat(testId, "-").concat(direction)
+    }, innerProps));
+  });
+};

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

@@ -0,0 +1 @@
+export default function (_) {}

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

@@ -0,0 +1,144 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+
+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) { _defineProperty(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; }
+
+/** @jsx jsx */
+import React, { Fragment, useCallback, useMemo, useState } from 'react';
+import { jsx } from '@emotion/core';
+import RightArrow from '@atlaskit/icon/glyph/arrow-right-circle';
+import { N10 } from '@atlaskit/theme/colors';
+import { gridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
+import { overrideStyleFunction } from '../../common/styles';
+import { ButtonItem, CustomItem, NavigationContent } from '../index';
+import { ROOT_ID } from '../NestableNavigationContent';
+import { NestedContext, useNestedContext } from '../NestableNavigationContent/context';
+import { nestingItemStyle } from './styles';
+
+/**
+ * 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 = _objectWithoutProperties(props, ["children", "iconAfter", "title", "onClick", "cssFn", "isSelected", "id", "component", "testId"]);
+
+  var _useNestedContext = useNestedContext(),
+      currentStackId = _useNestedContext.currentStackId,
+      onNest = _useNestedContext.onNest,
+      onUnNest = _useNestedContext.onUnNest,
+      contextualBackButton = _useNestedContext.backButton,
+      stack = _useNestedContext.stack;
+
+  var mergedStyles = overrideStyleFunction(nestingItemStyle, cssFn);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_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 = 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 = 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 jsx(NestedContext.Provider, {
+      value: context
+    }, stack.length >= 1 && jsx("div", {
+      css: {
+        marginLeft: gridSize(),
+        marginRight: gridSize(),
+        // This padding bottom needs to match the section margin inside @atlaskit/menu.
+        paddingTop: gridSize() * 0.75,
+        paddingBottom: gridSize() * 0.75
+      }
+    }, backButton), jsx(NavigationContent, {
+      testId: testId,
+      showTopScrollIndicator: stack.length >= 1
+    }, children));
+  }
+
+  if ([ROOT_ID].concat(_toConsumableArray(stack)).includes(id)) {
+    return children;
+  }
+
+  var componentProps = _objectSpread(_objectSpread({
+    iconAfter: jsx(Fragment, null, iconAfter ? jsx("span", {
+      "data-custom-icon": true
+    }, iconAfter) : null, jsx("span", {
+      "data-right-arrow": true
+    }, jsx(RightArrow, {
+      testId: testId && "".concat(testId, "--item--right-arrow"),
+      secondaryColor: token('color.background.default', N10),
+      label: ""
+    }))),
+    onClick: onClickHandler,
+    isSelected: isSelected || isInteracted,
+    testId: testId && "".concat(testId, "--item")
+  }, rest), {}, {
+    children: title,
+    cssFn: mergedStyles
+  });
+
+  if (component) {
+    return jsx(CustomItem, _extends({}, componentProps, {
+      //@ts-expect-error TODO Fix legit TypeScript 3.9.6 improved inference error
+      component: component
+    }));
+  }
+
+  return jsx(ButtonItem, componentProps);
+};
+
+export default NestingItem;

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

@@ -0,0 +1,34 @@
+import _defineProperty from "@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) { _defineProperty(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
+export var enabledCSS = (_enabledCSS = {}, _defineProperty(_enabledCSS, '&:hover [data-custom-icon]', {
+  display: 'none'
+}), _defineProperty(_enabledCSS, '&:active [data-custom-icon]', {
+  display: 'none'
+}), _defineProperty(_enabledCSS, '&:focus [data-custom-icon]', {
+  display: 'none'
+}), _defineProperty(_enabledCSS, '& [data-custom-icon]', {
+  display: 'inherit'
+}), _defineProperty(_enabledCSS, '&:hover [data-right-arrow]', {
+  display: 'inherit'
+}), _defineProperty(_enabledCSS, '&:active [data-right-arrow]', {
+  display: 'inherit'
+}), _defineProperty(_enabledCSS, '&:focus [data-right-arrow]', {
+  display: 'inherit'
+}), _defineProperty(_enabledCSS, '& [data-right-arrow]', {
+  display: 'none'
+}), _enabledCSS);
+var disabledCSS = (_disabledCSS = {}, _defineProperty(_disabledCSS, '[data-item-elem-after]', {
+  opacity: 0
+}), _defineProperty(_disabledCSS, '& [data-right-arrow]', {
+  display: 'none'
+}), _disabledCSS);
+export var nestingItemStyle = function nestingItemStyle(state) {
+  return _objectSpread({}, state.isDisabled ? disabledCSS : enabledCSS);
+};

package/dist/esm/components/Section/heading-item.js

@@ -0,0 +1,21 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { HeadingItem as MenuHeadingItem } from '@atlaskit/menu';
+import { overrideStyleFunction, sectionHeaderStyle } from '../../common/styles';
+import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
+
+var HeadingItem = function HeadingItem(props) {
+  var _useShouldNestedEleme = useShouldNestedElementRender(),
+      shouldRender = _useShouldNestedEleme.shouldRender;
+
+  if (!shouldRender) {
+    return null;
+  }
+
+  var cssFn = overrideStyleFunction(sectionHeaderStyle, props.cssFn);
+  return /*#__PURE__*/React.createElement(MenuHeadingItem, _extends({}, props, {
+    cssFn: cssFn
+  }));
+};
+
+export default HeadingItem;

package/dist/esm/components/Section/index.js

@@ -0,0 +1,3 @@
+export { default as HeadingItem } from './heading-item';
+export { default as Section } from './section';
+export { default as SkeletonHeadingItem } from './skeleton-heading-item';

package/dist/esm/components/Section/section.js

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { forwardRef } from 'react';
+import { Section as MenuSection } from '@atlaskit/menu';
+import { sectionHeaderStyle } from '../../common/styles';
+import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
+// Type needed on props to extract types with extract react types.
+var Section = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _useShouldNestedEleme = useShouldNestedElementRender(),
+      shouldRender = _useShouldNestedEleme.shouldRender;
+
+  if (!shouldRender) {
+    return props.children;
+  }
+
+  return /*#__PURE__*/React.createElement(MenuSection, _extends({}, props, {
+    ref: ref,
+    overrides: {
+      HeadingItem: {
+        cssFn: sectionHeaderStyle
+      }
+    }
+  }));
+});
+export default Section;

package/dist/esm/components/Section/skeleton-heading-item.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { SkeletonHeadingItem as MenuSkeletonHeadingItem } from '@atlaskit/menu';
+import { ITEM_SIDE_PADDING } from '../../common/styles';
+import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
+
+var SkeletonHeadingItem = function SkeletonHeadingItem(props) {
+  var _useShouldNestedEleme = useShouldNestedElementRender(),
+      shouldRender = _useShouldNestedEleme.shouldRender;
+
+  if (!shouldRender) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(MenuSkeletonHeadingItem, _extends({
+    cssFn: function cssFn() {
+      return {
+        paddingLeft: ITEM_SIDE_PADDING,
+        paddingRight: ITEM_SIDE_PADDING
+      };
+    }
+  }, props));
+};
+
+export default SkeletonHeadingItem;

package/dist/esm/components/SideNavigation/index.js

@@ -0,0 +1,28 @@
+/** @jsx jsx */
+import { forwardRef } from 'react';
+import { jsx } from '@emotion/core';
+import { N10, N500 } from '@atlaskit/theme/colors';
+import { gridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
+var SideNavigation = /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+      testId = props.testId,
+      label = props.label;
+  return jsx("nav", {
+    ref: ref,
+    "data-testid": testId,
+    "aria-label": label,
+    css: {
+      width: '100%',
+      height: '100%',
+      color: token('color.text.mediumEmphasis', N500),
+      minWidth: gridSize() * 30,
+      backgroundColor: token('color.background.default', N10),
+      position: 'relative',
+      display: 'flex',
+      flexDirection: 'column',
+      overflow: 'hidden'
+    }
+  }, children);
+});
+export default SideNavigation;

package/dist/esm/components/index.js

@@ -0,0 +1,11 @@
+export { default as SideNavigation } from './SideNavigation';
+export { Section, HeadingItem, SkeletonHeadingItem } from './Section';
+export { default as NestingItem } from './NestingItem';
+export { default as NavigationContent } from './NavigationContent';
+export { ButtonItem, GoBackItem, LinkItem, CustomItem, SkeletonItem } from './Item';
+export { default as Footer } from './Footer';
+export { default as Header } from './Header';
+export { default as NavigationHeader } from './NavigationHeader';
+export { default as NavigationFooter } from './NavigationFooter';
+export { default as LoadingItems } from './LoadingItems';
+export { default as NestableNavigationContent } from './NestableNavigationContent';

package/dist/esm/index.js

@@ -0,0 +1,3 @@
+export { SideNavigation, Header, NavigationHeader, NavigationContent, Section, HeadingItem, SkeletonHeadingItem, NestableNavigationContent, NestingItem, ButtonItem, LinkItem, GoBackItem, CustomItem, SkeletonItem, Footer, NavigationFooter, LoadingItems } from './components';
+export { useShouldNestedElementRender } from './components/NestableNavigationContent/context';
+export { VAR_SCROLL_INDICATOR_COLOR, VAR_SEPARATOR_COLOR } from './common/constants';

package/dist/esm/version.json

@@ -0,0 +1,5 @@
+{
+	"name": "@atlaskit/side-navigation",
+	"version": "1.1.2",
+	"sideEffects": false
+}

package/dist/types/common/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const VAR_SEPARATOR_COLOR = "--ds-menu-seperator-color";
+export declare const VAR_SCROLL_INDICATOR_COLOR = "--ds-menu-scroll-indicator-color";

package/dist/types/common/styles.d.ts

@@ -0,0 +1,10 @@
+import { CSSFn, StatelessCSSFn } from '@atlaskit/menu';
+export declare const ITEM_SIDE_PADDING: number;
+/**
+ * Allows chaining of style functions on top of base style functions
+ * @param baseStyle the base custom cssFn
+ * @param newStyle a new cssFn to be applied after the base style
+ */
+export declare const overrideStyleFunction: <TState>(baseStyle: CSSFn<TState>, newStyle?: CSSFn<TState> | undefined) => CSSFn<TState>;
+export declare const baseSideNavItemStyle: CSSFn;
+export declare const sectionHeaderStyle: StatelessCSSFn;

package/dist/types/components/Footer/index.d.ts

@@ -0,0 +1,4 @@
+import { HeaderProps } from '../Header';
+export type { HeaderProps as FooterProps } from '../Header';
+declare const Footer: (props: HeaderProps) => JSX.Element;
+export default Footer;

package/dist/types/components/Header/index.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { CSSFn, CustomItemComponentProps } from '@atlaskit/menu';
+export interface HeaderProps {
+    /**
+     * A function that can be used to override the styles of the component.
+     * It receives the current styles and state and expects a styles object.
+     */
+    cssFn?: CSSFn;
+    /**
+     * Element to render before the item text.
+     * Generally should be an [icon](https://atlaskit.atlassian.com/packages/design-system/icon) component.
+     */
+    iconBefore?: React.ReactNode;
+    /**
+     * Event that is triggered when the element is clicked.
+     */
+    onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    /**
+     * Description of the item.
+     * This will render smaller text below the primary text of the item as well as slightly increasing the height of the item.
+     */
+    description?: string | JSX.Element;
+    /**
+     * Primary content for the item.
+     */
+    children?: React.ReactNode;
+    /**
+     * A `testId` prop is provided for specified elements,
+     * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests.
+     */
+    testId?: string;
+    /**
+     * Custom component to render as an item.
+     * This can be both a functional component or a class component.
+     * **Will return `null` if no component is defined.**
+  
+     * **NOTE:** Make sure the reference for this component does not change between renders else undefined behavior may happen.
+     */
+    component?: React.ComponentType<CustomItemComponentProps>;
+}
+declare const Header: React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLElement>>;
+export default Header;

package/dist/types/components/Item/button-item.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ButtonItemProps } from '@atlaskit/menu';
+export type { ButtonItemProps } from '@atlaskit/menu';
+declare const ButtonItem: React.ForwardRefExoticComponent<ButtonItemProps & React.RefAttributes<HTMLElement>>;
+export default ButtonItem;

package/dist/types/components/Item/custom-item.d.ts

@@ -0,0 +1,13 @@
+import { CustomItemComponentProps, CustomItemProps } from '@atlaskit/menu';
+export type { CustomItemComponentProps, CustomItemProps } from '@atlaskit/menu';
+interface CustomItemType {
+    <TComponentProps extends {}>(props: CustomItemProps<TComponentProps> & {
+        ref?: any;
+    } & Omit<TComponentProps, keyof CustomItemComponentProps>): JSX.Element | null;
+}
+/**
+ * Used to support any custom items needed by products alongside the Header and Footer patterns.
+ * Specific implementation of headers and footers are provided in the examples folder.
+ */
+declare const CustomItem: CustomItemType;
+export default CustomItem;

package/dist/types/components/Item/go-back-item.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { ButtonItemProps } from '@atlaskit/menu';
+export type { ButtonItemProps as GoBackItemProps } from '@atlaskit/menu';
+declare const GoBackItem: React.ForwardRefExoticComponent<ButtonItemProps & React.RefAttributes<HTMLElement>>;
+export default GoBackItem;