@ultraviolet/plus/dist/components/Navigation/NavigationProvider.d.ts

Ultraviolet Plus

import type { Dispatch, ReactNode, RefObject } from 'react';
import NavigationLocales from './locales/en';
import type { PinUnPinType } from './types';
type Item = {
    label: string;
    active?: boolean;
    onToggle?: (toggle: boolean) => void;
    onClickPinUnpin?: (parameters: PinUnPinType) => void;
};
type Items = Record<string, Item>;
type AnimationType = 'simple' | 'complex';
type ContextProps = {
    expanded: boolean;
    toggleExpand: (toggle?: boolean) => void;
    animation: boolean | 'expand' | 'collapse';
    pinnedFeature?: boolean;
    onClickPinUnpin?: (pinned: string[]) => void;
    pinItem: (item: string) => string[];
    unpinItem: (item: string) => string[];
    pinnedItems: string[];
    pinLimit: number;
    navigationRef: RefObject<HTMLDivElement | null>;
    locales: Record<keyof typeof NavigationLocales, string>;
    width: number;
    setWidth: (width: number) => void;
    /**
     * This function will reorder the pinned items based on the initial index and
     * the end index.
     */
    reorderItems: (
    /**
     * The initial index of the item
     */
    initialIndex: number, 
    /**
     * The end index of the item
     */
    endIndex: number) => string[];
    items: Items;
    registerItem: Dispatch<Items>;
    setPinnedItems: (value: string[]) => void;
    allowNavigationResize: boolean;
    setAllowNavigationResize: (value: boolean) => void;
    shouldAnimate?: boolean;
    animationType?: AnimationType;
};
export declare const NavigationContext: import("react").Context<ContextProps>;
export declare const useNavigation: () => ContextProps;
type NavigationProviderProps = {
    children: ReactNode;
    initialWidth?: number;
    /**
     * This enable / disable the pinned feature of the navigation
     * Pinned allows the use to pin (or favorite) some items in the navigation
     */
    pinnedFeature?: boolean;
    /**
     * This define how many items can be pinned at the same time.
     * If you want to disable the limit just set `Infinity` to this prop
     */
    pinLimit?: number;
    /**
     * The initial pinned items. This should be an array of labels you've set on
     * your `<Navigation.Item>`
     */
    initialPinned?: string[];
    /**
     * The initial expanded state of the navigation. If set to true the
     * navigation will be expanded by default otherwise it will be collapsed
     */
    initialExpanded?: boolean;
    locales?: Record<keyof typeof NavigationLocales, string>;
    /**
     * You can get the expanded state of the navigation with this function
     */
    onExpandChange?: (expanded: boolean) => void;
    /**
     * This boolean will define if the navigation can be resized or not.
     */
    initialAllowNavigationResize?: boolean;
    /**
     * Enable or disable the animation of the navigation
     */
    animation?: boolean;
    /**
     * type of animation
     */
    animationType?: AnimationType;
};
export declare const NavigationProvider: ({ children, pinnedFeature, initialPinned, initialExpanded, locales, pinLimit, onExpandChange, initialWidth, initialAllowNavigationResize, animation: shouldAnimate, animationType, }: NavigationProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
export {};