@atlaskit/side-navigation 1.2.10 → 1.2.13

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

@@ -4,6 +4,13 @@ import { SkeletonHeadingItem as MenuSkeletonHeadingItem } from '@atlaskit/menu';
 import { ITEM_SIDE_PADDING } from '../../common/styles';
 import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
 
+/**
+ * __Skeleton heading item__
+ *
+ * A skeleton heading item for use in managing loading states.
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#loading)
+ */
 var SkeletonHeadingItem = function SkeletonHeadingItem(props) {
   var _useShouldNestedEleme = useShouldNestedElementRender(),
       shouldRender = _useShouldNestedEleme.shouldRender;
@@ -12,14 +19,15 @@ var SkeletonHeadingItem = function SkeletonHeadingItem(props) {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(MenuSkeletonHeadingItem // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+  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
       };
-    }
+    } // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+
   }, props));
 };
 

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

@@ -3,6 +3,16 @@ import { forwardRef } from 'react';
 import { jsx } from '@emotion/core';
 import { N10, N500 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
+
+/**
+ * __Side navigation__
+ *
+ * A highly composable side navigation component that supports nested views.
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ * - [Usage](https://atlassian.design/components/side-navigation/usage)
+ */
 var SideNavigation = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
       testId = props.testId,

package/dist/esm/version.json

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

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

@@ -1,5 +1,11 @@
 /// <reference types="react" />
 import { HeaderProps } from '../Header';
 export type { HeaderProps as FooterProps } from '../Header';
+/**
+ * __Header__
+ *
+ * - [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;
 export default Footer;

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

@@ -34,11 +34,17 @@ export interface HeaderProps {
     /**
      * 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.
+     * __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>;
 }
+/**
+ * __Header__
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ */
 declare const Header: React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLElement>>;
 export default Header;

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

@@ -1,5 +1,14 @@
 import React from 'react';
 import { ButtonItemProps } from '@atlaskit/menu';
 export type { ButtonItemProps } from '@atlaskit/menu';
+/**
+ * __Button item__
+ *
+ * A button item renders an item wrapped in a button tag, used primarily when an
+ * action does something other than changing routes.
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#button-item)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ */
 declare const ButtonItem: React.ForwardRefExoticComponent<ButtonItemProps & React.RefAttributes<HTMLElement>>;
 export default ButtonItem;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { CustomItemComponentProps, CustomItemProps } from '@atlaskit/menu';
 export type { CustomItemComponentProps, CustomItemProps } from '@atlaskit/menu';
-interface CustomItemType {
+interface CustomItemPropsHack {
     <TComponentProps extends {}>(props: CustomItemProps<TComponentProps> & {
         ref?: any;
     } & Omit<TComponentProps, keyof CustomItemComponentProps>): JSX.Element | null;
@@ -10,5 +10,5 @@ interface CustomItemType {
  * 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;
+declare const CustomItem: CustomItemPropsHack;
 export default CustomItem;

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

@@ -1,5 +1,14 @@
 import React from 'react';
 import type { ButtonItemProps } from '@atlaskit/menu';
 export type { ButtonItemProps as GoBackItemProps } from '@atlaskit/menu';
+/**
+ * __Go back item__
+ *
+ * A go back item is used to provide a customized "go back" button in nested
+ * navigations.
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#go-back-item)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ */
 declare const GoBackItem: React.ForwardRefExoticComponent<ButtonItemProps & React.RefAttributes<HTMLElement>>;
 export default GoBackItem;

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

@@ -1,5 +1,16 @@
 import React from 'react';
 import { LinkItemProps } from '@atlaskit/menu';
 export type { LinkItemProps } from '@atlaskit/menu';
+/**
+ * __Link item__
+ *
+ * Renders an item wrapped in an anchor tag, useful when you have an item that
+ * should change routes using native browser navigation. For SPA transitions use
+ * a [custom item](https://atlassian.design/components/side-navigation/examples#custom-item)
+ * with the respective router logic.
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#link-item)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ */
 declare const LinkItem: React.ForwardRefExoticComponent<LinkItemProps & React.RefAttributes<HTMLElement>>;
 export default LinkItem;

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

@@ -1,5 +1,13 @@
 /// <reference types="react" />
 import { SkeletonItemProps } from '@atlaskit/menu';
 export type { SkeletonItemProps } from '@atlaskit/menu';
+/**
+ * __Skeleton item__
+ *
+ * A skeleton item can be used to reduce the perceived laoding time.
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#loading)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ */
 declare const SkeletonItem: (props: SkeletonItemProps) => JSX.Element | null;
 export default SkeletonItem;

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

@@ -19,12 +19,17 @@ export interface LoadingItemsProps {
      * 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.
-  
+     *
      * Will set these elements when defined:
      * - The entering container - `{testId}--entering`
      * - The exiting container - `{testId}--exiting`
      */
     testId?: string;
 }
+/**
+ * __Loading items__
+ *
+ * Loading items conditionally render based on the useShouldNestedElementRender() hook.
+ */
 declare const LoadingItems: ({ children, isLoading, fallback, testId, }: LoadingItemsProps) => JSX.Element;
 export default LoadingItems;

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

@@ -13,5 +13,13 @@ export interface NavigationContentProps {
      */
     testId?: string;
 }
+/**
+ * __Navigation content__
+ *
+ * A navigation content is used as the container for navigation items.
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#content)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ */
 declare const NavigationContent: import("react").ForwardRefExoticComponent<NavigationContentProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
 export default NavigationContent;

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

@@ -3,5 +3,13 @@ import { ReactNode } from 'react';
 export interface NavigationFooterProps {
     children: ReactNode;
 }
+/**
+ * __Navigation footer__
+ *
+ * Allows for customisation of the footer.
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ */
 declare const NavigationFooter: ({ children }: NavigationFooterProps) => JSX.Element;
 export default NavigationFooter;

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

@@ -2,5 +2,13 @@
 export interface NavigationHeaderProps {
     children: JSX.Element | JSX.Element[];
 }
+/**
+ * __Navigation header__
+ *
+ * Allows for customisation of the header.
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ */
 declare const NavigationHeader: (props: NavigationHeaderProps) => JSX.Element;
 export default NavigationHeader;

package/dist/types/components/NestableNavigationContent/context.d.ts

@@ -7,6 +7,9 @@ interface NestedContext {
     parentId: string;
     backButton?: React.ReactNode;
 }
+/**
+ * @internal
+ */
 export declare const NestedContext: import("react").Context<NestedContext | undefined>;
 export declare const useNestedContext: () => NestedContext;
 /**

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

@@ -11,7 +11,7 @@ export interface NestableNavigationContentProps {
      * 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.
-  
+     *
      * Will set these elements when defined:
      * - This wrapper - `{testId}`
      * - The back item (displayed when inside a nested view) - `{testId}--go-back-item`
@@ -40,7 +40,7 @@ export interface NestableNavigationContentProps {
     /**
      * Custom overrides for the composed components.
      *
-     * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2682 for more information.
+     *   @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2682 for more information.
      */
     overrides?: {
         /**
@@ -56,5 +56,13 @@ export interface NestableNavigationContentProps {
         };
     };
 }
+/**
+ * __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)
+ */
 declare const NestableNavigationContent: (props: NestableNavigationContentProps) => JSX.Element;
 export default NestableNavigationContent;

package/dist/types/components/NestableNavigationContent/nesting-motion.d.ts

@@ -14,5 +14,8 @@ interface NestingMotionProps {
     children: (props: ChildrenAsFunctionProps) => React.ReactNode;
     testId?: string;
 }
+/**
+ * @internal
+ */
 export declare const NestingMotion: (props: NestingMotionProps) => JSX.Element;
 export {};

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

@@ -37,7 +37,7 @@ export interface NestingItemProps<TCustomComponentProps = CustomItemComponentPro
      * 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.
-  
+     *
      * Will set these elements when defined:
      * - The container - `{testId}--container`
      * - The nesting item - `{testId}--item`

package/dist/types/components/Section/heading-item.d.ts

@@ -1,5 +1,11 @@
 /// <reference types="react" />
 import { HeadingItemProps } from '@atlaskit/menu';
 export type { HeadingItemProps } from '@atlaskit/menu';
+/**
+ * __Heading item__
+ *
+ * Available for advanced use cases, for most situations providing a title to Section should be enough.
+ *
+ */
 declare const HeadingItem: (props: HeadingItemProps) => JSX.Element | null;
 export default HeadingItem;

package/dist/types/components/Section/section.d.ts

@@ -21,5 +21,14 @@ export interface SectionProps {
      */
     testId?: string;
 }
+/**
+ * __Section__
+ *
+ * Used to separate items into sections. Using the title prop makes a section
+ * implicitly group the items for screen readers with no additional work required.
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#section)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ */
 declare const Section: React.ForwardRefExoticComponent<SectionProps & React.RefAttributes<HTMLElement>>;
 export default Section;

package/dist/types/components/Section/skeleton-heading-item.d.ts

@@ -1,5 +1,12 @@
 /// <reference types="react" />
 import { SkeletonHeadingItemProps } from '@atlaskit/menu';
 export type { SkeletonHeadingItemProps } from '@atlaskit/menu';
+/**
+ * __Skeleton heading item__
+ *
+ * A skeleton heading item for use in managing loading states.
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#loading)
+ */
 declare const SkeletonHeadingItem: (props: SkeletonHeadingItemProps) => JSX.Element | null;
 export default SkeletonHeadingItem;

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

@@ -19,5 +19,14 @@ export interface SideNavigationProps {
      */
     testId?: string;
 }
+/**
+ * __Side navigation__
+ *
+ * A highly composable side navigation component that supports nested views.
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ * - [Usage](https://atlassian.design/components/side-navigation/usage)
+ */
 declare const SideNavigation: import("react").ForwardRefExoticComponent<SideNavigationProps & import("react").RefAttributes<HTMLElement>>;
 export default SideNavigation;

package/docs/00-intro.tsx

@@ -1,70 +1,15 @@
 import React from 'react';
 
-import { code, Example, md } from '@atlaskit/docs';
+import { md } from '@atlaskit/docs';
+import SectionMessage from '@atlaskit/section-message';
 
 export default md`
-
-  ## Documentation
-
-  All the documentation can be found in the **sidebar nav links**  👈
-
-  - [Side navigation](side-navigation/docs/side-navigation)
-  - [Navigation header](side-navigation/docs/navigation-header)
-  - [Navigation content](side-navigation/docs/navigation-content)
-  - [Nestable navigation content](side-navigation/docs/nestable-navigation-content)
-  - [Navigation footer](side-navigation/docs/navigation-content)
-  - [Loading states](side-navigation/docs/loading-states)
-  - [Button item](side-navigation/docs/button-item)
-  - [Custom item](side-navigation/docs/custom-item)
-  - [Go back item](side-navigation/docs/go-back-item)
-  - [Link item](side-navigation/docs/link-item)
-  - [Nesting item](side-navigation/docs/nesting-item)
-  - [Heading item](side-navigation/docs/heading-item)
-  - [Section](side-navigation/docs/section)
-  - [Skeleton item](side-navigation/docs/skeleton-item)
-  - [Skeleton heading item](side-navigation/docs/skeleton-heading-item)
-
-  ## Usage
-
-  ${code`
-import {
-  SideNavigation,
-  Section,
-  NavigationHeader,
-  Header,
-  NestableNavigationContent,
-  ButtonItem,
-  NestingItem,
-  Footer,
-  NavigationFooter,
-} from '@atlaskit/side-navigation';
-
-<SideNavigation label="project">
-  <NavigationHeader>
-    <Header>NXTGen Industries</Header>
-  </NavigationHeader>
-  <NestableNavigationContent>
-    <Section>
-      <ButtonItem>Your work</ButtonItem>
-      <NestingItem title="Filters">
-        <Section>
-          <ButtonItem>Search issues</ButtonItem>
-        </Section>
-      </NestingItem>
-    </Section>
-  </NestableNavigationContent>
-  <NavigationFooter>
-    <Footer>You're in a next-gen project</Footer>
-  </NavigationFooter>
-</SideNavigation>
-  `}
-
-  ${(
-    <Example
-      title=""
-      Component={require('../examples/00-nested-side-navigation').default}
-      source={require('!!raw-loader!../examples/00-nested-side-navigation')}
-      packageName="@atlaskit/sidebar-navigation"
-    />
-  )}
+${(
+  <SectionMessage appearance="information">
+    This component is now documented on{' '}
+    <a href="https://atlassian.design/components/side-navigation">
+      atlassian.design
+    </a>
+  </SectionMessage>
+)}
 `;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@atlaskit/side-navigation",
-  "version": "1.2.10",
+  "version": "1.2.13",
   "description": "A highly composable side navigation component that supports nested views.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
   "main": "dist/cjs/index.js",
@@ -13,20 +13,21 @@
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
   "sideEffects": false,
-  "atlaskit:src": "src/index.ts",
+  "atlaskit:src": "src/index.tsx",
   "atlassian": {
     "team": "Design System Team",
     "deprecatedAutoEntryPoints": true,
     "releaseModel": "scheduled",
     "website": {
-      "name": "Side navigation"
+      "name": "Side navigation",
+      "category": "Components"
     }
   },
   "dependencies": {
-    "@atlaskit/ds-lib": "^1.4.0",
+    "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/menu": "^1.3.0",
-    "@atlaskit/motion": "^1.0.0",
+    "@atlaskit/motion": "^1.2.0",
     "@atlaskit/theme": "^12.1.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
@@ -39,10 +40,10 @@
     "@atlaskit/atlassian-navigation": "^2.2.0",
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/logo": "^13.6.0",
-    "@atlaskit/onboarding": "^10.3.0",
+    "@atlaskit/logo": "^13.8.0",
+    "@atlaskit/onboarding": "^10.5.0",
     "@atlaskit/section-message": "^6.0.0",
-    "@atlaskit/select": "^15.2.0",
+    "@atlaskit/select": "^15.5.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -61,6 +62,8 @@
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
+      "design-system": "v1",
+      "dom-events": "use-bind-event-listener",
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
       "theming": "tokens",