@gravity-ui/navigation 0.16.0 → 0.18.0

package/README.md

@@ -13,7 +13,7 @@ npm install @gravity-ui/navigation
 Ensure that peer dependencies are installed in your project
 
 ```bash
-npm install --dev @gravity-ui/uikit@^3.0.2 bem-cn-lite@4.0.0 react@^16.0.0
+npm install --dev @gravity-ui/uikit@^3.0.2 @bem-react/classname@1.6.0 react@^16.0.0
 ```
 
 ## Components
@@ -30,3 +30,19 @@ npm install --dev @gravity-ui/uikit@^3.0.2 bem-cn-lite@4.0.0 react@^16.0.0
 ```ts
 import {AsideHeader} from '@gravity-ui/navigation';
 ```
+
+## CSS variables
+
+Used for themization Navigation's components
+
+### AsideHeader vars
+
+| Name                                                   | Description                                                      | Default                                                                |
+| :----------------------------------------------------- | :--------------------------------------------------------------- | :--------------------------------------------------------------------- |
+| `--gn-aside-header-background-color`                   | Сolor of decorations and selected items                          | `--g-color-base-warning-light`                                         |
+| `--gn-aside-header-subheader-divider-line-color`       | Divider line color for withDecoration and expanded `AsideHeader` | `--g-color-base-warning-light`                                         |
+| `--gn-aside-header-collapse-button-divider-line-color` |                                                                  | `--gn-aside-header-subheader-divider-line-color`                       |
+| `--gn-aside-header-footer-item-icon-color`             |                                                                  | `--g-color-text-primary`                                               |
+| `--gn-aside-header-subheader-item-icon-color`          |                                                                  | `--g-color-text-primary`                                               |
+| `--gn-aside-header-item-icon-background-size`          | Background size used when `AsideHeader` is compact               | `38px`                                                                 |
+| `--gn-aside-header-divider-line-color`                 | Vertical color divider between `AsideHeader` and content         | Light theme: `transparent`, Dark theme: `--g-color-line-generic-solid` |

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

@@ -1,48 +1,6 @@
 import React from 'react';
-import { MenuItem, LogoProps, SubheaderMenuItem } from '../types';
-import { DrawerItemProps } from '../Drawer/Drawer';
-import { RenderContentType } from '../Content';
+import { AsideHeaderGeneralProps, AsideHeaderDefaultProps, AsideHeaderInnerProps } from './types';
 import './AsideHeader.scss';
-interface AsideHeaderGeneralProps {
-    logo: LogoProps;
-    compact: boolean;
-    multipleTooltip?: boolean;
-    className?: string;
-    collapseTitle?: string;
-    expandTitle?: string;
-    menuMoreTitle?: 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: SubheaderMenuItem[];
-    menuItems: MenuItem[];
-    headerDecoration: boolean;
-}
 export interface AsideHeaderProps extends AsideHeaderGeneralProps, Partial<AsideHeaderDefaultProps> {
 }
-type AsideHeaderInnerProps = AsideHeaderGeneralProps & AsideHeaderDefaultProps;
-export declare class AsideHeader extends React.Component<AsideHeaderInnerProps> {
-    static defaultProps: AsideHeaderDefaultProps;
-    asideRef: React.RefObject<HTMLDivElement>;
-    render(): React.JSX.Element;
-    private renderFirstPane;
-    private renderSecondPane;
-    private renderLogo;
-    private renderHeader;
-    private renderFooter;
-    private renderPanels;
-    private renderCollapseButton;
-    private onCollapseButtonClick;
-    private onCloseDrawer;
-    private onItemClick;
-    private onLogoClick;
-}
-export {};
+export declare const AsideHeader: (props: AsideHeaderInnerProps) => React.JSX.Element;

package/build/cjs/components/AsideHeader/AsideHeaderContext.d.ts

@@ -1,9 +1,17 @@
 import React from 'react';
-interface AsideHeaderContextType {
-    compact: boolean;
+import { MenuItem } from '../types';
+import { AsideHeaderInnerProps } from './types';
+export interface AsideHeaderInnerContextType extends AsideHeaderInnerProps {
     size: number;
+    onItemClick: (item: MenuItem, collapsed: boolean, event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
 }
-export declare const AsideHeaderContext: React.Context<AsideHeaderContextType>;
-export declare const AsideHeaderContextProvider: React.Provider<AsideHeaderContextType>;
+export declare const AsideHeaderInnerContext: React.Context<AsideHeaderInnerContextType | undefined>;
+export declare const AsideHeaderInnerContextProvider: React.Provider<AsideHeaderInnerContextType | undefined>;
+export declare const useAsideHeaderInnerContext: () => AsideHeaderInnerContextType;
+export interface AsideHeaderContextType {
+    compact?: boolean;
+    size: number;
+}
+export declare const AsideHeaderContext: React.Context<AsideHeaderContextType | undefined>;
+export declare const AsideHeaderContextProvider: React.Provider<AsideHeaderContextType | undefined>;
 export declare const useAsideHeaderContext: () => AsideHeaderContextType;
-export {};

package/build/cjs/components/AsideHeader/__stories__/moc.d.ts

@@ -1,3 +1,5 @@
-import { MenuItem } from 'src/components/types';
+import { MenuItem } from '../../types';
+import { AsideHeaderContextType } from '../AsideHeaderContext';
+export declare const EMPTY_CONTEXT_VALUE: AsideHeaderContextType;
 export declare const menuItemsShowcase: MenuItem[];
 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/cjs/components/AsideHeader/components/CollapseButton.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CollapseButton: () => React.JSX.Element;

package/build/cjs/components/AsideHeader/components/FirstPanel.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const FirstPanel: () => React.JSX.Element;

package/build/cjs/components/AsideHeader/components/Header.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Header: () => React.JSX.Element;

package/build/cjs/components/AsideHeader/components/Panels.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Panels: () => React.JSX.Element | null;

package/build/cjs/components/AsideHeader/components/index.d.ts

@@ -0,0 +1 @@
+export { FirstPanel } from './FirstPanel';

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

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import { RenderContentType } from '../Content';
+import { DrawerItemProps } from '../Drawer/Drawer';
+import { LogoProps, MenuItem, SubheaderMenuItem, OpenModalSubscriber } from '../types';
+export interface AsideHeaderGeneralProps {
+    logo: LogoProps;
+    compact: boolean;
+    multipleTooltip?: boolean;
+    className?: string;
+    collapseTitle?: string;
+    expandTitle?: string;
+    menuMoreTitle?: string;
+    renderContent?: RenderContentType;
+    renderFooter?: (data: {
+        size: number;
+        compact: boolean;
+        asideRef: React.RefObject<HTMLDivElement>;
+    }) => React.ReactNode;
+    onClosePanel?: () => void;
+    onChangeCompact?: (compact: boolean) => void;
+    openModalSubscriber?: (subscriber: OpenModalSubscriber) => void;
+}
+export interface AsideHeaderDefaultProps {
+    panelItems?: DrawerItemProps[];
+    subheaderItems?: SubheaderMenuItem[];
+    menuItems?: MenuItem[];
+    headerDecoration?: boolean;
+}
+export type AsideHeaderInnerProps = AsideHeaderGeneralProps & AsideHeaderDefaultProps;

package/build/cjs/components/AsideHeader/utils.d.ts

@@ -0,0 +1 @@
+export declare const b: import("@bem-react/classname").ClassNameFormatter;

package/build/cjs/components/CompositeBar/HighlightedItem/HighlightedItem.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './HighlightedItem.scss';
+interface ItemInnerProps {
+    iconRef: React.RefObject<HTMLDivElement>;
+    iconNode: React.ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onClickCapture?: (event: React.SyntheticEvent) => void;
+}
+export declare const HighlightedItem: React.FC<ItemInnerProps>;
+export {};

package/build/cjs/components/CompositeBar/Item/Item.d.ts

@@ -16,6 +16,7 @@ export interface ItemProps extends ItemPopup {
     enableTooltip?: boolean;
     onItemClick?: (item: MenuItem, collapsed: boolean, event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     onItemClickCapture?: (event: React.SyntheticEvent) => void;
+    bringForward?: boolean;
 }
 interface ItemInnerProps extends ItemProps {
     className?: string;

package/build/cjs/components/CompositeBar/constants.d.ts

@@ -1,5 +1,4 @@
 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";

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

@@ -1,3 +1,3 @@
-export declare const ASIDE_HEADER_FOOTER_ICON_SIZE = 20;
+export declare const ASIDE_HEADER_ICON_SIZE = 18;
 export declare const ASIDE_HEADER_COMPACT_WIDTH = 56;
 export declare const ASIDE_HEADER_EXPANDED_WIDTH = 236;

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { IconProps } from '@gravity-ui/uikit';
 import { ItemProps } from 'src/components/CompositeBar/Item/Item';
 export type MenuItemType = 'regular' | 'action' | 'divider';
+export type OpenModalSubscriber = (open: boolean) => void;
 export interface MakeItemParams {
     icon?: React.ReactNode;
     title: React.ReactNode;

package/build/cjs/components/utils/cn.d.ts

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