@atlaskit/side-navigation 1.4.2 → 1.5.0

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

@@ -150,31 +150,35 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
     }
   };
 
-  return jsx("div", {
-    "data-testid": testId,
-    css: nestableNavigationContentStyles,
-    ref: containerRef,
-    tabIndex: -1,
-    onClick: manageFocus
-  }, jsx(ExitingPersistence, null, jsx(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 jsx("div", _extends({
-      css: nestingRootStyles
-    }, motion), jsx(NestedContext.Provider, {
-      // This provider is inside the NestingMotion to ensure it keeps a stale
-      // reference to the previous value.
-      value: context
-    }, jsx(NestingItem, {
-      title: "",
-      id: ROOT_ID
-    }, children)));
-  })));
+  return (// eslint-disable-next-line @repo/internal/react/use-primitives
+    jsx("div", {
+      "data-testid": testId,
+      css: nestableNavigationContentStyles,
+      ref: containerRef,
+      tabIndex: -1,
+      onClick: manageFocus
+    }, jsx(ExitingPersistence, null, jsx(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 (// eslint-disable-next-line @repo/internal/react/use-primitives
+        jsx("div", _extends({
+          css: nestingRootStyles
+        }, motion), jsx(NestedContext.Provider, {
+          // This provider is inside the NestingMotion to ensure it keeps a stale
+          // reference to the previous value.
+          value: context
+        }, jsx(NestingItem, {
+          title: "",
+          id: ROOT_ID
+        }, children)))
+      );
+    })))
+  );
 };
 
 export default NestableNavigationContent;

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

@@ -11,29 +11,22 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 /** @jsx jsx */
 import React, { Fragment, useCallback, useMemo, useState } from 'react';
-import { css, jsx } from '@emotion/react';
+import { jsx } from '@emotion/react';
+import Box from '@atlaskit/ds-explorations/box';
 import RightArrow from '@atlaskit/icon/glyph/arrow-right-circle';
 import { N10 } from '@atlaskit/theme/colors';
-import { gridSize } from '@atlaskit/theme/constants';
 import { overrideStyleFunction } from '../../common/styles';
 import { ButtonItem, CustomItem, NavigationContent } from '../index';
 import { ROOT_ID } from '../NestableNavigationContent';
 import { NestedContext, useNestedContext } from '../NestableNavigationContent/context';
 import { useChildIdsEffect } from '../utils/hooks';
 import { nestingItemStyle } from './styles';
-var nestingItemStyles = css({
-  marginRight: gridSize(),
-  marginLeft: gridSize(),
-  // This padding bottom needs to match the section margin inside @atlaskit/menu.
-  paddingTop: gridSize() * 0.75,
-  paddingBottom: gridSize() * 0.75
-});
+
 /**
  * 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,
@@ -108,8 +101,11 @@ var NestingItem = function NestingItem(props) {
   if (currentStackId === id) {
     return jsx(NestedContext.Provider, {
       value: context
-    }, stack.length >= 1 && jsx("div", {
-      css: nestingItemStyles
+    }, stack.length >= 1 && jsx(Box, {
+      as: "div",
+      display: "block",
+      paddingBlock: "scale.075",
+      paddingInline: "scale.100"
     }, backButton), jsx(NavigationContent, {
       testId: testId,
       showTopScrollIndicator: stack.length >= 1
@@ -121,10 +117,14 @@ var NestingItem = function NestingItem(props) {
   }
 
   var componentProps = _objectSpread(_objectSpread({
-    iconAfter: jsx(Fragment, null, iconAfter ? jsx("span", {
-      "data-custom-icon": true
-    }, iconAfter) : null, jsx("span", {
-      "data-right-arrow": true
+    iconAfter: jsx(Fragment, null, iconAfter ? jsx(Box, {
+      "data-custom-icon": true,
+      display: "inline",
+      as: "span"
+    }, iconAfter) : null, jsx(Box, {
+      "data-right-arrow": true,
+      display: "inline",
+      as: "span"
     }, jsx(RightArrow, {
       testId: testId && "".concat(testId, "--item--right-arrow"),
       secondaryColor: "var(--ds-surface, ".concat(N10, ")"),

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

@@ -1,7 +1,7 @@
 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 { overrideStyleFunction, sectionHeaderSpacingStyles } from '../../common/styles';
 import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
 
 /**
@@ -18,7 +18,7 @@ var HeadingItem = function HeadingItem(props) {
     return null;
   }
 
-  var cssFn = overrideStyleFunction(sectionHeaderStyle, props.cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides, @repo/internal/react/no-unsafe-spread-props
+  var cssFn = overrideStyleFunction(sectionHeaderSpacingStyles, props.cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides, @repo/internal/react/no-unsafe-spread-props
 
   return /*#__PURE__*/React.createElement(MenuHeadingItem, _extends({}, props, {
     cssFn: cssFn

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

@@ -1,7 +1,7 @@
 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 { sectionHeaderSpacingStyles } from '../../common/styles';
 import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
 // Type needed on props to extract types with extract react types.
 
@@ -27,7 +27,7 @@ var Section = /*#__PURE__*/forwardRef(function (props, ref) {
     ,
     overrides: {
       HeadingItem: {
-        cssFn: sectionHeaderStyle
+        cssFn: sectionHeaderSpacingStyles
       }
     }
   }));

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

@@ -1,7 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 import React from 'react';
 import { SkeletonHeadingItem as MenuSkeletonHeadingItem } from '@atlaskit/menu';
-import { ITEM_SIDE_PADDING } from '../../common/styles';
+import { sectionHeaderSpacingStyles } from '../../common/styles';
 import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
 
 /**
@@ -22,10 +28,7 @@ var SkeletonHeadingItem = function SkeletonHeadingItem(props) {
   return /*#__PURE__*/React.createElement(MenuSkeletonHeadingItem // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
   , _extends({
     cssFn: function cssFn() {
-      return {
-        paddingLeft: ITEM_SIDE_PADDING,
-        paddingRight: ITEM_SIDE_PADDING
-      };
+      return _objectSpread({}, sectionHeaderSpacingStyles());
     } // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 
   }, props));

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

@@ -2,11 +2,11 @@
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import { N10, N500 } from '@atlaskit/theme/colors';
-import { gridSize } from '@atlaskit/theme/constants';
+var sidebarMinWidth = '240px';
 var sideNavStyles = css({
   display: 'flex',
   width: '100%',
-  minWidth: gridSize() * 30,
+  minWidth: sidebarMinWidth,
   height: '100%',
   position: 'relative',
   flexDirection: 'column',
@@ -28,11 +28,13 @@ 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: sideNavStyles
-  }, children);
+  return (// eslint-disable-next-line @repo/internal/react/use-primitives
+    jsx("nav", {
+      ref: ref,
+      "data-testid": testId,
+      "aria-label": label,
+      css: sideNavStyles
+    }, children)
+  );
 });
 export default SideNavigation;

package/dist/esm/version.json

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

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

@@ -1,5 +1,4 @@
 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
@@ -9,4 +8,4 @@ export declare const ITEM_SIDE_PADDING: number;
  */
 export declare const overrideStyleFunction: <TState>(baseStyle: CSSFn<TState>, newStyle?: CSSFn<TState> | undefined) => CSSFn<TState>;
 export declare const baseSideNavItemStyle: CSSFn;
-export declare const sectionHeaderStyle: StatelessCSSFn;
+export declare const sectionHeaderSpacingStyles: StatelessCSSFn;

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

@@ -1,11 +1,11 @@
 /// <reference types="react" />
-import { HeaderProps } from '../Header';
-export type { HeaderProps as FooterProps } from '../Header';
+import { HeaderProps as FooterProps } from '../Header';
+export type { FooterProps };
 /**
- * __Header__
+ * __Footer__
  *
  * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
-declare const Footer: (props: HeaderProps) => JSX.Element;
+declare const Footer: (props: FooterProps) => JSX.Element;
 export default Footer;

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

@@ -1,5 +1,11 @@
 import React from 'react';
 import { CSSFn, CustomItemComponentProps } from '@atlaskit/menu';
+/**
+ * __Container__
+ *
+ * A container for Header and Footer that safely handles props to the child component
+ */
+export declare const Container: React.FC<CustomItemComponentProps>;
 export interface HeaderProps {
     /**
      * A function that can be used to override the styles of the component.

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

@@ -4,7 +4,7 @@ export type { SkeletonItemProps } from '@atlaskit/menu';
 /**
  * __Skeleton item__
  *
- * A skeleton item can be used to reduce the perceived laoding time.
+ * A skeleton item can be used to reduce the perceived loading time.
  *
  * - [Examples](https://atlassian.design/components/side-navigation/examples#loading)
  * - [Code](https://atlassian.design/components/side-navigation/code)

package/dist/types/components/NavigationContent/styles.d.ts

@@ -76,12 +76,12 @@ export declare const innerContainerCSS: (opts: StyleOpts) => {
 };
 export declare const containerCSS: (opts: StyleOpts) => {
     readonly marginTop: 0 | 2;
-    readonly marginLeft: number;
-    readonly marginRight: number;
+    readonly marginLeft: "var(--ds-scale-100)";
+    readonly marginRight: "var(--ds-scale-100)";
     readonly position: "relative";
     readonly '& [data-ds--menu--heading-item]': {
-        readonly marginTop: number;
-        readonly marginBottom: number;
+        readonly marginBottom: "var(--ds-scale-075)";
+        readonly marginTop: "var(--ds-scale-200)";
     };
     readonly '& [data-ds--menu--skeleton-heading-item]': {
         readonly marginTop: number;

package/docs/00-intro.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @repo/internal/react/use-primitives */
 import React from 'react';
 
 import { md } from '@atlaskit/docs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/side-navigation",
-  "version": "1.4.2",
+  "version": "1.5.0",
   "description": "A highly composable side navigation component that supports nested views.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -25,12 +25,13 @@
     }
   },
   "dependencies": {
+    "@atlaskit/ds-explorations": "^1.1.0",
     "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/icon": "^21.11.0",
     "@atlaskit/menu": "^1.4.0",
     "@atlaskit/motion": "^1.3.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^0.12.0",
+    "@atlaskit/tokens": "^0.13.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -44,7 +45,7 @@
     "@atlaskit/logo": "^13.10.0",
     "@atlaskit/onboarding": "^10.6.0",
     "@atlaskit/section-message": "^6.3.0",
-    "@atlaskit/select": "^16.0.0",
+    "@atlaskit/select": "^16.1.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -65,7 +66,13 @@
     "@repo/internal": {
       "design-system": "v1",
       "dom-events": "use-bind-event-listener",
-      "ui-components": "lite-mode",
+      "ui-components": [
+        "primitives",
+        "lite-mode"
+      ],
+      "design-tokens": [
+        "spacing"
+      ],
       "analytics": "analytics-next",
       "theming": "tokens",
       "deprecation": "no-deprecated-imports"

package/report.api.md

@@ -1,4 +1,4 @@
-<!-- API Report Version: 2.2 -->
+<!-- API Report Version: 2.3 -->
 
 ## API Report File for "@atlaskit/side-navigation"
 
@@ -159,6 +159,7 @@ export interface NestableNavigationContentProps {
   children: JSX.Element | JSX.Element[];
   initialStack?: string[];
   onChange?: (stack: string[]) => void;
+  onUnknownNest?: (stack: string[]) => void;
   // @deprecated
   overrides?: {
     GoBackItem?: {