@gravity-ui/navigation 0.0.4 → 0.0.6

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { MenuItem, AsideHeaderDict } from '../types';
+import { DrawerItemProps } from '../Drawer/Drawer';
+import { LogoProps as LogoComponentProps } from '../Logo/Logo';
+import { RenderContentType } from './Content';
+import './AsideHeader.scss';
+declare type LogoProps = Omit<LogoComponentProps, 'compact'>;
+interface AsideHeaderGeneralProps {
+    logo: LogoProps;
+    compact: boolean;
+    dict?: AsideHeaderDict;
+    className?: string;
+    renderContent?: RenderContentType;
+    renderFooter?: (data: {
+        size: number;
+        compact: boolean;
+        asideRef: React.RefObject<HTMLDivElement>;
+    }) => React.ReactNode;
+    onClosePanel?: () => void;
+    onChangeCompact?: (compact: boolean) => void;
+}
+interface AsideHeaderDefaultProps {
+    panelItems: DrawerItemProps[];
+    subheaderItems: MenuItem[];
+    menuItems: MenuItem[];
+}
+export interface AsideHeaderProps extends AsideHeaderGeneralProps, Partial<AsideHeaderDefaultProps> {
+}
+declare type AsideHeaderInnerProps = AsideHeaderGeneralProps & AsideHeaderDefaultProps;
+interface AsideHeaderState {
+    compact: boolean;
+}
+export declare class AsideHeader extends React.Component<AsideHeaderInnerProps, AsideHeaderState> {
+    static defaultProps: AsideHeaderDefaultProps;
+    asideRef: React.RefObject<HTMLDivElement>;
+    constructor(props: AsideHeaderInnerProps);
+    componentDidUpdate(prevProps: AsideHeaderInnerProps): void;
+    render(): JSX.Element;
+    private renderFirstPane;
+    private renderSecondPane;
+    private renderLogo;
+    private renderHeader;
+    private renderFooter;
+    private renderPanels;
+    private renderCollapseButton;
+    private onCollapseButtonClick;
+    private onCloseDrawer;
+    private onCompositeBarClick;
+}
+export {};

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

@@ -0,0 +1,11 @@
+import React from 'react';
+export declare type RenderContentType = (data: {
+    size: number;
+}) => React.ReactNode;
+interface ContentProps {
+    renderContent?: RenderContentType;
+    className?: string;
+    size: number;
+}
+export declare const Content: React.FC<ContentProps>;
+export {};

package/build/esm/types/components/AsideHeader/__stories__/AsideHeader.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/types/components/AsideHeader/__stories__/AsideHeaderShowcase.d.ts

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

package/build/esm/types/components/AsideHeader/__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/types/components/CompositeBar/CompositeBar.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { AsideHeaderDict, MenuItem } from './../types';
+import './CompositeBar.scss';
+export interface CompositeBarProps {
+    items: MenuItem[];
+    compact: boolean;
+    enableCollapsing: boolean;
+    dict?: AsideHeaderDict;
+    onItemClick?: (item: MenuItem) => void;
+}
+interface CompositeBarState {
+    activeItemIndex?: number;
+}
+export declare class CompositeBar extends React.Component<CompositeBarProps> {
+    state: CompositeBarState;
+    private listRef;
+    render(): JSX.Element;
+    private renderAutosizeMenu;
+    private renderMenu;
+    private getMoreButtonItem;
+}
+export {};

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { PopupPlacement, PopupProps } from '@gravity-ui/uikit';
+import { MenuItem } from '../../types';
+import './Item.scss';
+interface ItemPopup {
+    popupVisible?: boolean;
+    popupAnchor?: React.RefObject<HTMLElement>;
+    popupPlacement?: PopupPlacement;
+    popupOffset?: PopupProps['offset'];
+    renderPopupContent?: () => React.ReactNode;
+    onClosePopup?: () => void;
+}
+export interface ItemProps extends ItemPopup {
+    item: MenuItem;
+    enableTooltip?: boolean;
+}
+interface ItemInnerProps extends ItemProps {
+    compact: boolean;
+    className?: string;
+    collapseItems?: MenuItem[];
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+}
+export declare const defaultPopupPlacement: PopupPlacement;
+export declare const defaultPopupOffset: NonNullable<PopupProps['offset']>;
+export declare const Item: React.FC<ItemInnerProps>;
+export {};

package/build/esm/types/components/CompositeBar/__stories__/CompositeBar.stories.d.ts

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

package/build/esm/types/components/CompositeBar/__stories__/moc.d.ts

@@ -0,0 +1,2 @@
+import { MenuItem } from 'src/components/types';
+export declare const menuItemsShowcase: MenuItem[];

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

@@ -0,0 +1,7 @@
+import { PopupPlacement } from '@gravity-ui/uikit';
+export declare const ICON_SIZE = 24;
+export declare const ITEM_HEIGHT = 40;
+export declare const ITEM_TYPE_REGULAR = "regular";
+export declare const COLLAPSE_ITEM_ID = "collapse-item-id";
+export declare const POPUP_PLACEMENT: PopupPlacement;
+export declare const POPUP_ITEM_HEIGHT = 28;

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

@@ -0,0 +1,4 @@
+import { MenuItem } from './../types';
+export declare function getItemHeight(item: MenuItem): 40 | 50;
+export declare function getItemsHeight(items: MenuItem[]): number;
+export declare const getSelectedItemIndex: (items: MenuItem[]) => number | undefined;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import './Drawer.scss';
+export interface DrawerItemProps {
+    id: string;
+    content: React.ReactNode;
+    visible: boolean;
+    className?: string;
+}
+export declare const DrawerItem: React.FC<DrawerItemProps>;
+declare type DrawerChild = React.ReactElement<DrawerItemProps>;
+export interface DrawerProps {
+    children: DrawerChild | DrawerChild[];
+    preventScrollBody?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    onVeilClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onEscape?: () => void;
+}
+export declare const Drawer: React.FC<DrawerProps>;
+export {};

package/build/esm/types/components/Drawer/__stories__/Drawer.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/types/components/Drawer/__stories__/DrawerShowcase.d.ts

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

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ItemProps } from '../CompositeBar/Item/Item';
+import './FooterItem.scss';
+export interface FooterItemProps extends ItemProps {
+    compact: boolean;
+}
+export declare const FooterItem: React.FC<FooterItemProps>;

package/build/esm/types/components/FooterItem/__stories__/FooterItem.stories.d.ts

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

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import './ItemTooltip.scss';
+export interface ItemTooltipProps {
+    anchor: HTMLElement | null;
+    text: React.ReactNode;
+}
+export declare const ItemTooltip: React.FC<ItemTooltipProps>;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { IconProps } from '@gravity-ui/uikit';
+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;
+}
+export declare const Logo: React.FC<LogoInnerProps>;
+export {};

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

@@ -0,0 +1,8 @@
+export declare const ASIDE_HEADER_FOOTER_ICON_SIZE = 20;
+export declare const ASIDE_HEADER_COMPACT_WIDTH = 56;
+export declare const ASIDE_HEADER_EXPANDED_WIDTH = 236;
+export declare const defaultDict: {
+    button_collapse: string;
+    button_expand: string;
+    button_more: string;
+};

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

@@ -0,0 +1,4 @@
+export { AsideHeader, AsideHeaderProps } from './AsideHeader/AsideHeader';
+export { Drawer, DrawerProps, DrawerItemProps, DrawerItem } from './Drawer/Drawer';
+export { FooterItem, FooterItemProps } from './FooterItem/FooterItem';
+export * from './types';

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { IconProps } from '@gravity-ui/uikit';
+export declare type MenuItemType = 'regular' | 'action';
+export interface MenuItem {
+    id: string;
+    title: React.ReactNode;
+    tooltipText?: string;
+    icon?: IconProps['data'];
+    iconSize?: number | string;
+    link?: string;
+    current?: boolean;
+    pinned?: boolean;
+    onItemClick?: (item: MenuItem, collapsed: boolean) => void;
+    itemWrapper?: (node: React.ReactNode, item: MenuItem, collapsed: boolean, compact: boolean) => React.ReactNode;
+    rightAdornment?: React.ReactNode;
+    type?: MenuItemType;
+    afterMoreButton?: boolean;
+}
+export declare enum Dict {
+    ExpandButton = "button_expand",
+    CollapseButton = "button_collapse",
+    MoreButton = "button_more"
+}
+export declare type AsideHeaderDict = Record<Dict, string>;

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

@@ -0,0 +1,5 @@
+import bemBlock from 'bem-cn-lite';
+export declare type CnBlock = ReturnType<typeof bemBlock>;
+export declare type CnMods = Record<string, string | boolean | undefined>;
+export declare const NAMESPACE = "ycn-";
+export declare function block(name: string): CnBlock;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gravity-ui/navigation",
-    "version": "0.0.4",
+    "version": "0.0.6",
     "description": "Gravity UI Navigation components",
     "license": "MIT",
     "repository": {
@@ -27,16 +27,17 @@
         "lint:prettier": "prettier --check '**/*.md'",
         "lint": "run-p lint:*",
         "build-storybook": "build-storybook",
-        "start": "TS_NODE_PROJECT=.storybook/tsconfig.json start-storybook"
+        "start": "TS_NODE_PROJECT=.storybook/tsconfig.json start-storybook",
+        "prepublishOnly": "npm run build"
     },
     "dependencies": {
         "react-transition-group": "^4.4.1",
         "tslib": "^2.4.0"
     },
     "devDependencies": {
+        "@babel/core": "^7.18.10",
         "@commitlint/cli": "^17.0.0",
         "@commitlint/config-conventional": "^17.0.0",
-        "@babel/core": "^7.18.10",
         "@gravity-ui/eslint-config": "^1.0.0",
         "@gravity-ui/prettier-config": "^1.0.0",
         "@gravity-ui/stylelint-config": "^1.0.0",
@@ -54,6 +55,7 @@
         "@storybook/preset-scss": "^1.0.3",
         "@storybook/react": "^6.5.10",
         "@storybook/testing-library": "0.0.13",
+        "@svgr/rollup": "^6.4.0",
         "@types/react": "^16.14.28",
         "@types/react-transition-group": "^4.4.1",
         "@types/react-virtualized-auto-sizer": "^1.0.0",
@@ -76,8 +78,8 @@
         "storybook-preset-inline-svg": "^1.0.1",
         "stylelint": "^14.9.1",
         "svg-inline-loader": "^0.8.2",
-        "typescript": "^4.5.5",
-        "ts-jest": "^28.0.0"
+        "ts-jest": "^28.0.0",
+        "typescript": "^4.5.5"
     },
     "peerDependencies": {
         "@gravity-ui/uikit": "^3.0.2",