@gravity-ui/navigation 0.16.0 → 0.17.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/CompositeBar/HighlightedItem/HighlightedItem.d.ts

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

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { PopupPlacement, PopupProps } from '@gravity-ui/uikit';
 import { MenuItem } from '../../types';
+import { OpenModalSubscriber } from '../HighlightedItem/HighlightedItem';
 import './Item.scss';
 interface ItemPopup {
     popupVisible?: boolean;
@@ -10,12 +11,14 @@ interface ItemPopup {
     popupKeepMounted?: boolean;
     renderPopupContent?: () => React.ReactNode;
     onClosePopup?: () => void;
+    openModalSubscriber?: (subscriber: OpenModalSubscriber) => void;
 }
 export interface ItemProps extends ItemPopup {
     item: MenuItem;
     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/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>;