@gravity-ui/navigation 0.5.0 → 0.6.1

package/build/esm/components/AsideHeader/AsideHeader.d.ts

@@ -1,10 +1,8 @@
 import React from 'react';
-import { MenuItem, AsideHeaderDict } from '../types';
+import { MenuItem, AsideHeaderDict, LogoProps } from '../types';
 import { DrawerItemProps } from '../Drawer/Drawer';
-import { LogoProps as LogoComponentProps } from '../Logo/Logo';
-import { RenderContentType } from './Content';
+import { RenderContentType } from '../Content';
 import './AsideHeader.scss';
-declare type LogoProps = Omit<LogoComponentProps, 'compact'>;
 interface AsideHeaderGeneralProps {
     logo: LogoProps;
     compact: boolean;
@@ -23,6 +21,7 @@ interface AsideHeaderDefaultProps {
     panelItems: DrawerItemProps[];
     subheaderItems: MenuItem[];
     menuItems: MenuItem[];
+    headerDecoration: boolean;
 }
 export interface AsideHeaderProps extends AsideHeaderGeneralProps, Partial<AsideHeaderDefaultProps> {
 }

package/build/esm/components/{AsideHeader → Content}/Content.d.ts

@@ -3,9 +3,10 @@ export declare type RenderContentType = (data: {
     size: number;
 }) => React.ReactNode;
 interface ContentProps {
-    renderContent?: RenderContentType;
-    className?: string;
     size: number;
+    className?: string;
+    cssSizeVariableName?: string;
+    renderContent?: RenderContentType;
 }
 export declare const Content: React.FC<ContentProps>;
 export {};

package/build/esm/components/Content/index.d.ts

@@ -0,0 +1 @@
+export * from './Content';

package/build/esm/components/Drawer/Drawer.d.ts

@@ -4,6 +4,7 @@ export interface DrawerItemProps {
     id: string;
     content: React.ReactNode;
     visible: boolean;
+    direction?: 'right' | 'left';
     className?: string;
 }
 export declare const DrawerItem: React.FC<DrawerItemProps>;

package/build/esm/components/Logo/Logo.d.ts

@@ -1,17 +1,6 @@
 import React from 'react';
-import { IconProps } from '@gravity-ui/uikit';
+import { LogoProps } from '../types';
 import './Logo.scss';
-export interface LogoProps {
-    text: (() => React.ReactNode) | string;
-    icon?: IconProps['data'];
-    iconSrc?: string;
-    iconClassName?: string;
-    iconSize?: number;
-    textSize?: number;
-    href?: string;
-    wrapper?: (node: React.ReactNode, compact: boolean) => React.ReactNode;
-    onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-}
 interface LogoInnerProps extends LogoProps {
     compact: boolean;
 }

package/build/esm/components/MobileHeader/Burger/Burger.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './Burger.scss';
+export interface BurgerProps {
+    opened?: boolean;
+    className?: string;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+}
+export declare const Burger: React.MemoExoticComponent<({ opened, className, onClick }: BurgerProps) => JSX.Element>;

package/build/esm/components/MobileHeader/BurgerMenu/BurgerCompositeBar/BurgerCompositeBar.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { MobileMenuItem } from '../../types';
+import './BurgerCompositeBar.scss';
+interface BurgerCompositeBarProps {
+    items: MobileMenuItem[];
+    onItemClick?: (item: MobileMenuItem) => void;
+}
+export declare const BurgerCompositeBar: React.MemoExoticComponent<({ items, onItemClick }: BurgerCompositeBarProps) => JSX.Element>;
+export {};

package/build/esm/components/MobileHeader/BurgerMenu/BurgerMenu.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { MobileMenuItem, ModalItem } from '../types';
+import './BurgerMenu.scss';
+export interface BurgerMenuInnerProps {
+    items?: MobileMenuItem[];
+    modalItem?: ModalItem;
+    renderFooter?: () => React.ReactNode;
+    onItemClick?: (item: MobileMenuItem) => void;
+    className?: string;
+}
+export declare const BurgerMenu: React.MemoExoticComponent<({ items, renderFooter, modalItem, className }: BurgerMenuInnerProps) => JSX.Element>;

package/build/esm/components/MobileHeader/BurgerMenu/__stories__/BurgerMenu.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/react/types-6-0';
+import { Story } from '@storybook/react';
+import { BurgerMenuInnerProps } from '../BurgerMenu';
+import './BurgerMenuShowcase.scss';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Showcase: Story<BurgerMenuInnerProps>;

package/build/esm/components/MobileHeader/BurgerMenu/__stories__/moc.d.ts

@@ -0,0 +1,2 @@
+import { MobileMenuItem } from '../../types';
+export declare const mobileMenuItemsShowcase: MobileMenuItem[];

package/build/esm/components/MobileHeader/FooterItem/FooterItem.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { IconProps } from '@gravity-ui/uikit';
+import { ModalItem } from '../types';
+import './FooterItem.scss';
+export interface FooterItemProps {
+    icon?: IconProps['data'];
+    iconSize?: string | number;
+    className?: string;
+    modalItem: ModalItem;
+    onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+}
+export declare const FooterItem: ({ icon, iconSize, className, modalItem, onClick, }: FooterItemProps) => JSX.Element;

package/build/esm/components/MobileHeader/Logo/Logo.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { LogoProps } from '../../types';
+import './Logo.scss';
+interface LogoInnerProps extends LogoProps {
+    compact: boolean;
+}
+export declare const Logo: React.FC<LogoInnerProps>;
+export {};

package/build/esm/components/MobileHeader/MobileHeader.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { LogoProps } from '../types';
+import { MobileHeaderEvent } from './types';
+import { DrawerItemProps } from '../Drawer/Drawer';
+import { RenderContentType } from '../Content';
+import { BurgerMenuInnerProps } from './BurgerMenu/BurgerMenu';
+import './MobileHeader.scss';
+interface BurgerMenuProps extends Omit<BurgerMenuInnerProps, 'renderFooter'> {
+    renderFooter?: (data: {
+        size: number;
+        isCompact: boolean;
+    }) => React.ReactNode;
+}
+interface PanelItem extends Omit<DrawerItemProps, 'visible'> {
+}
+export interface MobileHeaderProps {
+    logo: LogoProps;
+    burgerMenu: BurgerMenuProps;
+    panelItems?: PanelItem[];
+    renderContent?: RenderContentType;
+    sideItemRenderContent?: RenderContentType;
+    onEvent?: (itemName: string, eventName: MobileHeaderEvent) => void;
+    onClosePanel?: () => void;
+    className?: string;
+}
+export declare const MobileHeader: React.ForwardRefExoticComponent<MobileHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/build/esm/components/MobileHeader/__stories__/MobileHeader.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta, Story } from '@storybook/react/types-6-0';
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;
+export declare const Showcase: Story<import("@storybook/react/types-6-0").Args>;

package/build/esm/components/MobileHeader/__stories__/MobileHeaderShowcase.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import './MobileHeaderShowcase.scss';
+export declare function MobileHeaderShowcase(): JSX.Element;

package/build/esm/components/MobileHeader/__stories__/moc.d.ts

@@ -0,0 +1 @@
+export declare const text = "\nDid you attend? He sang by grove ripe -\nThe bard of love, the singer of his mourning.\nWhen fields were silent by the early morning,\nTo sad and simple sounds of a pipe\nDid you attend?\n\nDid you behold in dark of forest leaf\nThe bard of love, the singer of his sadness?\nThe trace of tears, the smile, the utter paleness,\nThe quiet look, full of eternal grief,\nDid you behold?\n\nThen did you sigh when hearing how cries\nThe bard of love, the singer of his dole?\nWhen in the woods you saw the young man, sole,\nAnd met the look of his extinguished eyes,\nThen did you sigh?\n";

package/build/esm/components/MobileHeader/constants.d.ts

@@ -0,0 +1,7 @@
+import { ItemEventsConfig } from './types';
+export declare const MOBILE_ITEM_HEIGHT = 48;
+export declare const MOBILE_HEADER_COMPACT_HEIGHT = 50;
+export declare const MOBILE_HEADER_EXPANDED_HEIGHT = 120;
+export declare const MOBILE_HEADER_ICON_SIZE = 20;
+export declare const EVENT_NAMES: ItemEventsConfig;
+export declare const BURGER_PANEL_ITEM_ID = "burger";

package/build/esm/components/MobileHeader/index.d.ts

@@ -0,0 +1,3 @@
+export * from './MobileHeader';
+export { FooterItem as MobileHeaderFooterItem, FooterItemProps as MobileHeaderFooterItemProps, } from './FooterItem/FooterItem';
+export type { MobileMenuItem, ModalItem, MobileHeaderEvent, MobileHeaderEventOptions } from './types';

package/build/esm/components/MobileHeader/types.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { MenuItem } from '../types';
+export interface ModalItem {
+    visible: boolean;
+    title?: string;
+    id?: string;
+    className?: string;
+    contentClassName?: string;
+    modalAllowHideOnContentScroll?: boolean;
+    renderContent?: () => void;
+    onClose?: () => void;
+}
+export declare type MobileMenuItemType = 'regular' | 'divider';
+export interface MobileMenuItem extends Omit<MenuItem, 'tooltipText' | 'pinned' | 'rightAdornment' | 'afterMoreButton' | 'itemWrapper' | 'onItemClick'> {
+    type?: MobileMenuItemType;
+    closeMenuOnClick?: boolean;
+    onItemClick?: (item: MobileMenuItem) => void;
+    itemWrapper?: (node: React.ReactNode, item: MobileMenuItem) => React.ReactNode;
+}
+export declare type MobileHeaderEvent = 'MOBILE_PANEL_TOGGLE' | 'MOBILE_PANEL_CLOSE' | 'MOBILE_PANEL_OPEN';
+export declare type ItemEventsConfig = {
+    closeEvent: MobileHeaderEvent;
+    openEvent: MobileHeaderEvent;
+    toggleEvent?: MobileHeaderEvent;
+};
+export declare type MobileHeaderEventOptions = {
+    panelName?: string;
+};

package/build/esm/components/MobileHeader/utils.d.ts

@@ -0,0 +1,3 @@
+import { MobileMenuItem } from './types';
+export declare const getItemHeight: (item: MobileMenuItem) => 1 | 48;
+export declare const getSelectedItemIndex: (items: MobileMenuItem[]) => number | undefined;

package/build/esm/components/Settings/Settings.d.ts

@@ -9,6 +9,7 @@ interface SettingsProps {
     renderLoading?: () => React.ReactNode;
     loading?: boolean;
     dict?: SettingsDict;
+    view?: 'normal' | 'mobile';
 }
 declare type SettingsDict = Record<SettingsDictKeys, string>;
 declare type SettingsDictKeys = 'heading_settings' | 'placeholder_search' | 'not_found';
@@ -20,7 +21,7 @@ interface SettingsGroupProps {
 interface SettingsPageProps {
     id?: string;
     title: string;
-    icon: IconProps;
+    icon?: IconProps;
     children: React.ReactNode;
 }
 interface SettingsSectionProps {
@@ -28,6 +29,7 @@ interface SettingsSectionProps {
     header?: React.ReactNode;
     children: React.ReactNode;
     withBadge?: boolean;
+    showTitle?: boolean;
 }
 interface SettingsItemProps {
     title: string;
@@ -35,8 +37,10 @@ interface SettingsItemProps {
     align?: 'top' | 'center';
     children: React.ReactNode;
     withBadge?: boolean;
+    mode?: 'row';
+    description?: string;
 }
-export declare function Settings({ loading, renderLoading, children, ...props }: SettingsProps): JSX.Element;
+export declare function Settings({ loading, renderLoading, children, view, ...props }: SettingsProps): JSX.Element;
 export declare namespace Settings {
     var defaultProps: {
         dict: SettingsDict;
@@ -44,6 +48,6 @@ export declare namespace Settings {
     var Group: ({ children }: SettingsGroupProps) => JSX.Element;
     var Page: ({ children }: SettingsPageProps) => JSX.Element;
     var Section: ({ children }: SettingsSectionProps) => JSX.Element;
-    var Item: ({ title, children, align, withBadge, renderTitleComponent, }: SettingsItemProps) => JSX.Element;
+    var Item: ({ title, children, align, withBadge, renderTitleComponent, mode, description, }: SettingsItemProps) => JSX.Element;
 }
 export {};

package/build/esm/components/Settings/SettingsMenu/SettingsMenu.d.ts

@@ -1,27 +1,8 @@
 import React from 'react';
-import { IconProps } from '@gravity-ui/uikit';
+import { SettingsMenuProps } from '../types';
 import './SettingsMenu.scss';
-interface GroupItem {
-    groupTitle: string;
-    items: Item[];
-}
-interface Item {
-    id: string;
-    title: string;
-    icon?: IconProps;
-    disabled?: boolean;
-    withBadge?: boolean;
-}
-export declare type SettingsMenuItems = (GroupItem | Item)[];
-interface SettingsMenuProps {
-    items: SettingsMenuItems;
-    onChange: (id: string) => void;
-    activeItem?: string;
-    focusItem?: string;
-}
 export interface SettingsMenuInstance {
     handleKeyDown(event: React.KeyboardEvent): boolean;
     clearFocus(): void;
 }
 export declare const SettingsMenu: React.ForwardRefExoticComponent<SettingsMenuProps & React.RefAttributes<SettingsMenuInstance>>;
-export {};

package/build/esm/components/Settings/SettingsMenuMobile/SettingsMenuMobile.d.ts

@@ -0,0 +1,3 @@
+import { SettingsMenuProps } from '../types';
+import './SettingsMenuMobile.scss';
+export declare const SettingsMenuMobile: ({ items, onChange, activeItemId, className, }: SettingsMenuProps) => JSX.Element;

package/build/esm/components/Settings/SettingsSearch/SettingsSearch.d.ts

@@ -1,10 +1,13 @@
 import React from 'react';
+import { TextInputSize } from '@gravity-ui/uikit';
 interface SettingsSearchProps {
     className?: string;
     onChange: (search: string) => void;
     debounce?: number;
     inputRef?: React.Ref<HTMLInputElement>;
+    inputSize?: TextInputSize;
     placeholder?: string;
+    autoFocus?: boolean;
 }
-export declare function SettingsSearch({ className, onChange, debounce, inputRef, placeholder, }: SettingsSearchProps): JSX.Element;
+export declare function SettingsSearch({ className, onChange, debounce, inputRef, inputSize, placeholder, autoFocus, }: SettingsSearchProps): JSX.Element;
 export {};

package/build/esm/components/Settings/__stories__/Settings.stories.d.ts

@@ -2,3 +2,4 @@ import { Meta, Story } from '@storybook/react/types-6-0';
 declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
 export default _default;
 export declare const Showcase: Story<import("@storybook/react/types-6-0").Args>;
+export declare const ViewMobile: Story<import("@storybook/react/types-6-0").Args>;

package/build/esm/components/Settings/__stories__/SettingsMobileDemo.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './SettingsMobileDemo.scss';
+export declare const SettingsMobileComponent: React.MemoExoticComponent<({ initialPage, withBadge, closeSettings, }: {
+    initialPage?: string | undefined;
+    withBadge?: boolean | undefined;
+    closeSettings?: (() => void) | undefined;
+}) => JSX.Element>;
+export declare function SettingsMobileDemo(): JSX.Element;

package/build/esm/components/Settings/collect-settings.d.ts

@@ -24,6 +24,7 @@ interface SettingsPageSection {
     items: SettingsItem[];
     hidden?: boolean;
     withBadge?: boolean;
+    showTitle?: boolean;
 }
 interface SettingsItem {
     title: string;

package/build/esm/components/Settings/types.d.ts

@@ -0,0 +1,21 @@
+import { IconProps } from '@gravity-ui/uikit';
+export interface GroupItem {
+    groupTitle: string;
+    items: Item[];
+}
+export interface Item {
+    id: string;
+    title: string;
+    icon?: IconProps;
+    disabled?: boolean;
+    withBadge?: boolean;
+}
+declare type SettingsMenuItems = (GroupItem | Item)[];
+export interface SettingsMenuProps {
+    items: SettingsMenuItems;
+    onChange: (id: string) => void;
+    activeItemId?: string;
+    focusItemId?: string;
+    className?: string;
+}
+export {};

package/build/esm/components/constants.d.ts

@@ -5,4 +5,6 @@ export declare const defaultDict: {
     button_collapse: string;
     button_expand: string;
     button_more: string;
+    "button_close-burger": string;
+    "button_open-burger": string;
 };

package/build/esm/components/types.d.ts

@@ -24,9 +24,24 @@ export interface MenuItem {
     type?: MenuItemType;
     afterMoreButton?: boolean;
 }
+export declare enum MobileHeaderDict {
+    CloseBurger = "button_close-burger",
+    OpenBurger = "button_open-burger"
+}
 export declare enum Dict {
     ExpandButton = "button_expand",
     CollapseButton = "button_collapse",
     MoreButton = "button_more"
 }
 export declare type AsideHeaderDict = Record<Dict, string>;
+export interface LogoProps {
+    text: (() => React.ReactNode) | string;
+    icon?: IconProps['data'];
+    iconSrc?: string;
+    iconClassName?: string;
+    iconSize?: number;
+    textSize?: number;
+    href?: string;
+    wrapper?: (node: React.ReactNode, compact: boolean) => React.ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+}

package/build/esm/hooks/useForwardRef.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useForwardRef: <T>(ref: React.MutableRefObject<T | null> | ((instance: T | null) => void) | null, initialValue?: any) => React.MutableRefObject<T>;