@atlaskit/side-navigation 1.2.12 → 1.2.13

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`
@@ -38,9 +38,9 @@ export interface NestableNavigationContentProps {
      */
     onChange?: (stack: string[]) => void;
     /**
-      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.
+     * 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.
      */
     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,6 +1,6 @@
 {
   "name": "@atlaskit/side-navigation",
-  "version": "1.2.12",
+  "version": "1.2.13",
   "description": "A highly composable side navigation component that supports nested views.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -13,7 +13,7 @@
   "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,
@@ -24,10 +24,10 @@
     }
   },
   "dependencies": {
-    "@atlaskit/ds-lib": "^2.0.0",
+    "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/menu": "^1.3.0",
-    "@atlaskit/motion": "^1.1.0",
+    "@atlaskit/motion": "^1.2.0",
     "@atlaskit/theme": "^12.1.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
@@ -40,10 +40,10 @@
     "@atlaskit/atlassian-navigation": "^2.2.0",
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/logo": "^13.7.0",
-    "@atlaskit/onboarding": "^10.4.0",
+    "@atlaskit/logo": "^13.8.0",
+    "@atlaskit/onboarding": "^10.5.0",
     "@atlaskit/section-message": "^6.0.0",
-    "@atlaskit/select": "^15.3.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",
@@ -62,6 +62,7 @@
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
+      "design-system": "v1",
       "dom-events": "use-bind-event-listener",
       "ui-components": "lite-mode",
       "analytics": "analytics-next",