@atlaskit/side-navigation 1.1.2

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

@@ -0,0 +1,10 @@
+export { default as ButtonItem } from './button-item';
+export type { ButtonItemProps } from './button-item';
+export { default as CustomItem } from './custom-item';
+export type { CustomItemProps, CustomItemComponentProps } from './custom-item';
+export { default as GoBackItem } from './go-back-item';
+export type { GoBackItemProps } from './go-back-item';
+export { default as LinkItem } from './link-item';
+export type { LinkItemProps } from './link-item';
+export { default as SkeletonItem } from './skeleton-item';
+export type { SkeletonItemProps } from './skeleton-item';

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

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

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

@@ -0,0 +1,4 @@
+import { SkeletonItemProps } from '@atlaskit/menu';
+export type { SkeletonItemProps } from '@atlaskit/menu';
+declare const SkeletonItem: (props: SkeletonItemProps) => JSX.Element | null;
+export default SkeletonItem;

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

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+export interface LoadingItemsProps {
+    /**
+     * Child items that will be loaded asynchronously.
+     */
+    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;
+}
+declare const LoadingItems: ({ children, isLoading, fallback, testId, }: LoadingItemsProps) => JSX.Element;
+export default LoadingItems;

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

@@ -0,0 +1,17 @@
+/** @jsx jsx */
+import { HTMLAttributes } from 'react';
+export interface NavigationContentProps {
+    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;
+}
+declare const NavigationContent: import("react").ForwardRefExoticComponent<NavigationContentProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
+export default NavigationContent;

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

@@ -0,0 +1,91 @@
+interface StyleOpts {
+    showTopScrollIndicator?: boolean;
+}
+/**
+ * This outer container css contains the "real" scroll indicators which are
+ * always rendered to the screen.
+ * They are "conditionally" shown from the users perspective using the inner container CSS
+ * which has other pseudo elements which "mask" the "real" scroll indicators.
+ */
+export declare const outerContainerCSS: (opts: StyleOpts & {
+    scrollbarWidth: number;
+}) => {
+    readonly display: "flex";
+    readonly height: "100%";
+    readonly overflow: "hidden";
+    readonly position: "relative";
+    readonly '&::before': {
+        readonly content: "''";
+        readonly display: "block";
+        readonly left: number;
+        readonly right: number;
+        readonly height: 2;
+        readonly borderRadius: 1;
+        readonly backgroundColor: string;
+        readonly position: "absolute";
+        readonly zIndex: 1;
+    };
+    readonly '&::after': {
+        readonly content: "''";
+        readonly position: "absolute";
+        readonly display: "block";
+        readonly borderRadius: 1;
+        readonly flexShrink: 0;
+        readonly height: 2;
+        readonly left: number;
+        readonly right: number;
+        readonly bottom: 0;
+        readonly zIndex: 1;
+        readonly backgroundColor: string;
+    };
+};
+/**
+ * This inner container css contains the "mask" logic for the scroll indicators.
+ * Essentially they cover (mask) the "real" scroll indicators when the user is scrolled
+ * to the top or bottom of the container.
+ */
+export declare const innerContainerCSS: (opts: StyleOpts) => {
+    readonly '&::after': {
+        readonly borderRadius: 1;
+        readonly content: "''";
+        readonly display: "block";
+        readonly flexShrink: 0;
+        readonly height: 2;
+        readonly marginTop: "auto";
+        readonly position: "relative";
+        readonly zIndex: 2;
+        readonly backgroundColor: string;
+    };
+    readonly '&::before'?: {
+        readonly borderRadius: 1;
+        readonly content: "''";
+        readonly left: 0;
+        readonly right: 0;
+        readonly height: 2;
+        readonly backgroundColor: string;
+        readonly position: "absolute";
+        readonly display: "block";
+        readonly zIndex: 2;
+    };
+    readonly display: "flex";
+    readonly overflow: "auto";
+    readonly width: "100%";
+    readonly position: "relative";
+    readonly boxSizing: "border-box";
+    readonly flexDirection: "column";
+};
+export declare const containerCSS: (opts: StyleOpts) => {
+    readonly marginTop: 0 | 2;
+    readonly marginLeft: number;
+    readonly marginRight: number;
+    readonly position: "relative";
+    readonly '& [data-ds--menu--heading-item]': {
+        readonly marginTop: number;
+        readonly marginBottom: number;
+    };
+    readonly '& [data-ds--menu--skeleton-heading-item]': {
+        readonly marginTop: number;
+        readonly marginBottom: number;
+    };
+};
+export {};

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

@@ -0,0 +1,7 @@
+/** @jsx jsx */
+import { ReactNode } from 'react';
+export interface NavigationFooterProps {
+    children: ReactNode;
+}
+declare const NavigationFooter: ({ children }: NavigationFooterProps) => JSX.Element;
+export default NavigationFooter;

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

@@ -0,0 +1,5 @@
+export interface NavigationHeaderProps {
+    children: JSX.Element | JSX.Element[];
+}
+declare const NavigationHeader: (props: NavigationHeaderProps) => JSX.Element;
+export default NavigationHeader;

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

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+interface NestedContext {
+    currentStackId: string;
+    onNest: (id: string) => void;
+    onUnNest: () => void;
+    stack: string[];
+    parentId: string;
+    backButton?: React.ReactNode;
+}
+export declare const NestedContext: import("react").Context<NestedContext | undefined>;
+export declare const useNestedContext: () => NestedContext;
+/**
+ * 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: () => {
+    shouldRender: boolean;
+};
+export {};

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

@@ -0,0 +1,58 @@
+/// <reference types="react" />
+export declare const ROOT_ID = "ATLASKIT_NESTED_ROOT";
+export 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.
+     */
+    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.
+     */
+    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;
+                testId?: string;
+            }) => React.ReactNode;
+        };
+    };
+}
+declare const NestableNavigationContent: (props: NestableNavigationContentProps) => JSX.Element;
+export default NestableNavigationContent;

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

@@ -0,0 +1,18 @@
+/** @jsx jsx */
+import { Ref } from 'react';
+import { Direction } from '@atlaskit/motion';
+interface ChildrenAsFunctionProps {
+    'data-enter-from': string;
+    'data-exit-to': string;
+    'data-testid'?: string;
+    className?: string;
+    ref: Ref<any>;
+}
+interface NestingMotionProps {
+    enterFrom: Direction;
+    exitTo: Direction;
+    children: (props: ChildrenAsFunctionProps) => React.ReactNode;
+    testId?: string;
+}
+export declare const NestingMotion: (props: NestingMotionProps) => JSX.Element;
+export {};

package/dist/types/components/NestingItem/hack-for-ert.d.ts

@@ -0,0 +1,2 @@
+import { NestingItemProps } from './index';
+export default function (_: NestingItemProps): void;

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

@@ -0,0 +1,91 @@
+/** @jsx jsx */
+import React from 'react';
+import { CSSFn, CustomItemComponentProps, Overrides } from '@atlaskit/menu';
+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.
+     */
+    GoBackItem?: {
+        render?: (props: {
+            onClick: () => void;
+            testId?: string;
+        }) => React.ReactNode;
+    };
+}
+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.ReactNode;
+    /**
+     * The view that should be shown when this nesting item is visible.
+     */
+    children: React.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.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.ReactNode;
+    /**
+     * Element to render after the item text.
+     * Generally should be an [icon](https://atlaskit.atlassian.com/packages/design-system/icon) component.
+     */
+    iconAfter?: 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;
+    /**
+     * Makes the element appear disabled as well as removing interactivity.
+     */
+    isDisabled?: boolean;
+    /**
+     * Makes the element appear selected.
+     */
+    isSelected?: boolean;
+    /**
+     * Custom overrides for the composed components.
+     */
+    overrides?: NestingItemOverrides;
+}
+/**
+ * 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.
+ */
+declare const NestingItem: <TCustomComponentProps extends CustomItemComponentProps>(props: NestingItemProps<TCustomComponentProps> & Pick<TCustomComponentProps, Exclude<keyof TCustomComponentProps, "ref" | "children" | "onClick" | "onMouseDown" | "className" | "data-testid" | "onDragStart" | "draggable" | "tabIndex" | "disabled">>) => JSX.Element;
+export default NestingItem;

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

@@ -0,0 +1,28 @@
+import { CSSFn } from '@atlaskit/menu';
+export declare const enabledCSS: {
+    "&:hover [data-custom-icon]": {
+        display: string;
+    };
+    "&:active [data-custom-icon]": {
+        display: string;
+    };
+    "&:focus [data-custom-icon]": {
+        display: string;
+    };
+    "& [data-custom-icon]": {
+        display: string;
+    };
+    "&:hover [data-right-arrow]": {
+        display: string;
+    };
+    "&:active [data-right-arrow]": {
+        display: string;
+    };
+    "&:focus [data-right-arrow]": {
+        display: string;
+    };
+    "& [data-right-arrow]": {
+        display: string;
+    };
+};
+export declare const nestingItemStyle: CSSFn;

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

@@ -0,0 +1,4 @@
+import { HeadingItemProps } from '@atlaskit/menu';
+export type { HeadingItemProps } from '@atlaskit/menu';
+declare const HeadingItem: (props: HeadingItemProps) => JSX.Element | null;
+export default HeadingItem;

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

@@ -0,0 +1,6 @@
+export { default as HeadingItem } from './heading-item';
+export type { HeadingItemProps } from './heading-item';
+export { default as Section } from './section';
+export type { SectionProps } from './section';
+export { default as SkeletonHeadingItem } from './skeleton-heading-item';
+export type { SkeletonHeadingItemProps } from './skeleton-heading-item';

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

@@ -0,0 +1,25 @@
+import React from 'react';
+export interface SectionProps {
+    /**
+     * Children of the section,
+     * should generally be item or heading components.
+     */
+    children: React.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;
+}
+declare const Section: React.ForwardRefExoticComponent<SectionProps & React.RefAttributes<HTMLElement>>;
+export default Section;