@atlaskit/side-navigation 1.3.0 → 1.4.0

package/report.api.md

@@ -1,6 +1,10 @@
-## API Report File for "@atlaskit/side-navigation".
+## API Report File for "@atlaskit/side-navigation"
 
-> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+<!--
+	Generated API Report version: 2.0
+-->
 
 [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
@@ -23,33 +27,24 @@ import { RefAttributes } from 'react';
 import { SkeletonHeadingItemProps } from '@atlaskit/menu';
 import { SkeletonItemProps } 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)
- */
-export declare const ButtonItem: React_2.ForwardRefExoticComponent<
+// @public
+export const ButtonItem: React_2.ForwardRefExoticComponent<
   ButtonItemProps & React_2.RefAttributes<HTMLElement>
 >;
 
 export { ButtonItemProps };
 export { ButtonItemProps as GoBackItemProps };
 
-/**
- * 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.
- */
-export declare const CustomItem: CustomItemPropsHack;
+// @public
+export const CustomItem: CustomItemPropsHack;
 
 export { CustomItemComponentProps };
 
 export { CustomItemProps };
 
-declare interface CustomItemPropsHack {
+// @public (undocumented)
+interface CustomItemPropsHack {
+  // (undocumented)
   <TComponentProps extends {}>(
     props: CustomItemProps<TComponentProps> & {
       ref?: any;
@@ -57,269 +52,110 @@ declare interface CustomItemPropsHack {
   ): JSX.Element | null;
 }
 
-/**
- * __Header__
- *
- * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
- * - [Code](https://atlassian.design/components/side-navigation/code)
- */
-export declare const Footer: (props: HeaderProps) => JSX.Element;
-
-/**
- * __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)
- */
-export declare const GoBackItem: React_2.ForwardRefExoticComponent<
+// @public
+export const Footer: (props: HeaderProps) => JSX.Element;
+
+// @public
+export const GoBackItem: React_2.ForwardRefExoticComponent<
   ButtonItemProps & React_2.RefAttributes<HTMLElement>
 >;
 
-/**
- * __Header__
- *
- * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
- * - [Code](https://atlassian.design/components/side-navigation/code)
- */
-export declare const Header: React_2.ForwardRefExoticComponent<
+// @public
+export const Header: React_2.ForwardRefExoticComponent<
   HeaderProps & React_2.RefAttributes<HTMLElement>
 >;
 
-declare 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.
-   * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2682 for more information.
-   */
+// @public (undocumented)
+interface HeaderProps {
+  children?: React_2.ReactNode;
+  component?: React_2.ComponentType<CustomItemComponentProps>;
+  // @deprecated
   cssFn?: CSSFn;
-  /**
-   * Element to render before the item text.
-   * Generally should be an [icon](https://atlaskit.atlassian.com/packages/design-system/icon) component.
-   */
+  description?: string | JSX.Element;
   iconBefore?: React_2.ReactNode;
-  /**
-   * Event that is triggered when the element is clicked.
-   */
   onClick?: (event: React_2.MouseEvent | React_2.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_2.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_2.ComponentType<CustomItemComponentProps>;
 }
 export { HeaderProps as FooterProps };
 export { HeaderProps };
 
-/**
- * __Heading item__
- *
- * Available for advanced use cases, for most situations providing a title to Section should be enough.
- *
- */
-export declare const HeadingItem: (
-  props: HeadingItemProps,
-) => JSX.Element | null;
+// @public
+export const HeadingItem: (props: HeadingItemProps) => JSX.Element | null;
 
 export { HeadingItemProps };
 
-/**
- * __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)
- */
-export declare const LinkItem: React_2.ForwardRefExoticComponent<
+// @public
+export const LinkItem: React_2.ForwardRefExoticComponent<
   LinkItemProps & React_2.RefAttributes<HTMLElement>
 >;
 
 export { LinkItemProps };
 
-/**
- * __Loading items__
- *
- * Loading items conditionally render based on the useShouldNestedElementRender() hook.
- */
-export declare const LoadingItems: ({
+// @public
+export const LoadingItems: ({
   children,
   isLoading,
   fallback,
   testId,
 }: LoadingItemsProps) => JSX.Element;
 
-export declare interface LoadingItemsProps {
-  /**
-   * Child items that will be loaded asynchronously.
-   */
+// @public (undocumented)
+export interface LoadingItemsProps {
   children: React.ReactNode;
-  /**
-   * Fallback you want to show when loading.
-   * You'll want to use the supplied [skeleton item](/packages/navigation/side-navigation/docs/skeleton-item)
-   * or [skeleton heading item](/packages/navigation/side-navigation/docs/skeleton-heading-item) components.
-   */
   fallback: React.ReactNode;
-  /**
-   * Used to show either the loading fallback or the loaded contents.
-   * Will cross fade between children and fallback when this is flipped.
-   */
   isLoading?: boolean;
-  /**
-   * 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;
 }
 
-/**
- * __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)
- */
-export declare const NavigationContent: ForwardRefExoticComponent<
+// @public
+export const NavigationContent: ForwardRefExoticComponent<
   NavigationContentProps &
     HTMLAttributes<HTMLElement> &
     RefAttributes<HTMLElement>
 >;
 
-export declare interface NavigationContentProps {
+// @public (undocumented)
+export interface NavigationContentProps {
+  // (undocumented)
   children: React.ReactNode;
-  /**
-   * Forces the top scroll indicator to be shown all the time.
-   */
   showTopScrollIndicator?: boolean;
-  /**
-   * 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;
 }
 
-/**
- * __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)
- */
-export declare const NavigationFooter: ({
+// @public
+export const NavigationFooter: ({
   children,
 }: NavigationFooterProps) => jsx.JSX.Element;
 
-export declare interface NavigationFooterProps {
+// @public (undocumented)
+export interface NavigationFooterProps {
+  // (undocumented)
   children: ReactNode;
 }
 
-/**
- * __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)
- */
-export declare const NavigationHeader: (
+// @public
+export const NavigationHeader: (
   props: NavigationHeaderProps,
 ) => jsx.JSX.Element;
 
-export declare interface NavigationHeaderProps {
+// @public (undocumented)
+export interface NavigationHeaderProps {
+  // (undocumented)
   children: JSX.Element | JSX.Element[];
 }
 
-/**
- * __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)
- */
-export declare const NestableNavigationContent: (
+// @public
+export const NestableNavigationContent: (
   props: NestableNavigationContentProps,
 ) => jsx.JSX.Element;
 
-export declare interface NestableNavigationContentProps {
-  /**
-   * The NestableNavigationContent wraps the entire navigation hierarchy of a side-navigation.
-   * Using this component is only needed if you want to enable nested views with [nesting items](/packages/navigation/side-navigation/docs/nesting-item),
-   * else you should use [navigation content](/packages/navigation/side-navigation/docs/navigation-content) instead.
-   */
+// @public (undocumented)
+export interface NestableNavigationContentProps {
   children: JSX.Element | JSX.Element[];
-  /**
-   * 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`
-   */
-  testId?: string;
-  /**
-   * Array of the initial stack you want to show.
-   * Useful when wanting to set the initial nested view but not wanting to opt into controlled state.
-   * Make sure to have all intermediate navigation pages line up.
-   */
   initialStack?: string[];
-  /**
-   * Enables you to control the stack of navigation views you want to show.
-   * Do not jump between controlled and uncontrolled else undefined behaviour will occur.
-   * This means either using `initialStack` OR `stack` but not both.
-   * Make sure your stack array has a stable reference and does not change between renders.
-   */
-  stack?: string[];
-  /**
-   * Allows you to react based on transitions between [nesting items](/packages/navigation/side-navigation/docs/nesting-item).
-   * It will be called everytime a user navigates from one [nesting item](/packages/navigation/side-navigation/docs/nesting-item) to another,
-   * both up or down the navigation hierarchy.
-   * This prop should be used with the `stack` prop for controlled behavior.
-   */
   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.
-   */
+  // @deprecated
   overrides?: {
-    /**
-     * Use this to override the default back button displayed when navigation is nested.
-     * You'll want to import the [go back item](/packages/navigation/docs/go-back-item) component and use it here.
-     * This will be displayed for all children [nesting items](/packages/navigation/side-navigation/docs/nesting-item) unless they define their own.
-     */
     GoBackItem?: {
       render?: (props: {
         onClick: () => void;
@@ -327,24 +163,20 @@ export declare interface NestableNavigationContentProps {
       }) => React.ReactNode;
     };
   };
+  stack?: string[];
+  testId?: string;
 }
 
-/**
- * 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.
- */
-export declare const NestingItem: <TCustomComponentProps extends CustomItemComponentProps>(
+// @public
+export const NestingItem: <
+  TCustomComponentProps extends CustomItemComponentProps,
+>(
   props: NestingItemProps<TCustomComponentProps> &
     Omit<TCustomComponentProps, keyof CustomItemComponentProps>,
 ) => JSX.Element;
 
-declare interface NestingItemOverrides extends Overrides {
-  /**
-   * Use this to override the back button displayed when navigation is nested.
-   * You'll want to import the [go back item](/packages/navigation/side-navigation/docs/go-back-item) component and use it here.
-   * This will be displayed for all children nesting item components unless they define their own.
-   */
+// @public (undocumented)
+interface NestingItemOverrides extends Overrides {
   GoBackItem?: {
     render?: (props: {
       onClick: () => void;
@@ -353,187 +185,72 @@ declare interface NestingItemOverrides extends Overrides {
   };
 }
 
-export declare interface NestingItemProps<
-  TCustomComponentProps = CustomItemComponentProps
+// @public (undocumented)
+export interface NestingItemProps<
+  TCustomComponentProps = CustomItemComponentProps,
 > {
-  /**
-   * A **unique identifier** for the nesting item.
-   * Every nesting item component needs a unique id else undefined behavior will occur.
-   */
-  id: string;
-  /**
-   * Text to display when the nesting item is rendered as a interactable element.
-   */
-  title: React_2.ReactNode;
-  /**
-   * The view that should be shown when this nesting item is visible.
-   */
   children: React_2.ReactNode;
-  /**
-   * Used to customize the rendered component when shown as an item.
-   * You can use this for example to change it to a SPA link.
-   */
   component?: React_2.ComponentType<TCustomComponentProps>;
-  /**
-   * 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`
-   * - The go back item - `{testId}--go-back-item` (only used if you pass in a override).
-   * - The nesting item default right arrow icon - `{testId}--item--right-arrow`
-   */
-  testId?: string;
-  /**
-   * 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_2.ReactNode;
-  /**
-   * Element to render after the item text.
-   * Generally should be an [icon](https://atlaskit.atlassian.com/packages/design-system/icon) component.
-   */
-  iconAfter?: React_2.ReactNode;
-  /**
-   * Event that is triggered when the element is clicked.
-   */
-  onClick?: (event: React_2.MouseEvent | React_2.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;
-  /**
-   * Makes the element appear disabled as well as removing interactivity.
-   */
+  iconAfter?: React_2.ReactNode;
+  iconBefore?: React_2.ReactNode;
+  id: string;
   isDisabled?: boolean;
-  /**
-   * Makes the element appear selected.
-   */
   isSelected?: boolean;
-  /**
-   * Custom overrides for the composed components.
-   */
+  onClick?: (event: React_2.MouseEvent | React_2.KeyboardEvent) => void;
   overrides?: NestingItemOverrides;
+  testId?: string;
+  title: React_2.ReactNode;
 }
 
-/**
- * __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)
- */
-export declare const Section: React_2.ForwardRefExoticComponent<
+// @public
+export const Section: React_2.ForwardRefExoticComponent<
   SectionProps & React_2.RefAttributes<HTMLElement>
 >;
 
-export declare interface SectionProps {
-  /**
-   * Children of the section,
-   * should generally be item or heading components.
-   */
+// @public (undocumented)
+export interface SectionProps {
   children: React_2.ReactNode;
-  /**
-   * The text passed to heading.
-   * If a title is not provided no heading will be rendered.
-   */
-  title?: string;
-  /**
-   * Will render a border at the top of the section.
-   */
   hasSeparator?: boolean;
-  /**
-   * 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;
+  title?: 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)
- */
-export declare const SideNavigation: ForwardRefExoticComponent<
+// @public
+export const SideNavigation: ForwardRefExoticComponent<
   SideNavigationProps & RefAttributes<HTMLElement>
 >;
 
-export declare interface SideNavigationProps {
-  /**
-   *  Describes the specific role of this navigation component for users viewing the page with a screen reader.
-   *  Differentiates from other navigation components on a page.
-   */
-  label: string;
-  /**
-   * Child navigation elements.
-   * You'll want to compose children from [navigation header](/packages/navigation/side-navigation/docs/navigation-header),
-   * [navigation content](/packages/navigation/side-navigation/docs/navigation-content) or [nestable navigation content](/packages/navigation/side-navigation/docs/nestable-navigation-content),
-   * and [navigation footer](/packages/navigation/side-navigation/docs/navigation-footer).
-   */
+// @public (undocumented)
+export interface SideNavigationProps {
   children: JSX.Element[] | JSX.Element;
-  /**
-   * 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.
-   */
+  label: string;
   testId?: string;
 }
 
-/**
- * __Skeleton heading item__
- *
- * A skeleton heading item for use in managing loading states.
- *
- * - [Examples](https://atlassian.design/components/side-navigation/examples#loading)
- */
-export declare const SkeletonHeadingItem: (
+// @public
+export const SkeletonHeadingItem: (
   props: SkeletonHeadingItemProps,
 ) => JSX.Element | null;
 
 export { SkeletonHeadingItemProps };
 
-/**
- * __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)
- */
-export declare const SkeletonItem: (
-  props: SkeletonItemProps,
-) => JSX.Element | null;
+// @public
+export const SkeletonItem: (props: SkeletonItemProps) => JSX.Element | null;
 
 export { SkeletonItemProps };
 
-/**
- * Used by children of the NestableNavigationContent component to see if they should render or not.
- * If `shouldRender` returns `true` - return your nodes.
- * If it returns `false` - either return `null` or `children` if you have children.
- */
-export declare const useShouldNestedElementRender: () => {
+// @public
+export const useShouldNestedElementRender: () => {
   shouldRender: boolean;
 };
 
-export declare const VAR_SCROLL_INDICATOR_COLOR =
-  '--ds-menu-scroll-indicator-color';
+// @public (undocumented)
+export const VAR_SCROLL_INDICATOR_COLOR = '--ds-menu-scroll-indicator-color';
 
-export declare const VAR_SEPARATOR_COLOR = '--ds-menu-seperator-color';
+// @public (undocumented)
+export const VAR_SEPARATOR_COLOR = '--ds-menu-seperator-color';
 
-export {};
+// (No @packageDocumentation comment for this package)
 ```

package/dist/types-ts4.0/common/constants.d.ts

@@ -1,2 +0,0 @@
-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-ts4.0/common/styles.d.ts

@@ -1,12 +0,0 @@
-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
- *
- * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2682 for more information.
- */
-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-ts4.0/components/Footer/index.d.ts

@@ -1,11 +0,0 @@
-/// <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;