@gravity-ui/navigation 1.1.3 → 1.3.0

package/build/cjs/Title-d58ff158.js

@@ -0,0 +1,41 @@
+'use strict';
+
+var React = require('react');
+var uikit = require('@gravity-ui/uikit');
+var icons = require('@gravity-ui/icons');
+var styleInject_es = require('./style-inject.es-935afc04.js');
+var registerKeyset = require('./registerKeyset-f4ce9ee7.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var button_close$1 = "Close";
+var en = {
+	button_close: button_close$1
+};
+
+var button_close = "Закрыть";
+var ru = {
+	button_close: button_close
+};
+
+const COMPONENT = 'Title';
+var i18n = registerKeyset.registerKeyset({ en, ru }, COMPONENT);
+
+var css_248z = ".gn-title{align-items:center;box-sizing:border-box;display:flex;justify-content:space-between;min-height:64px;padding:14px 10px 14px 20px}.gn-title_separator{border-bottom:1px solid var(--g-color-line-generic)}.gn-title__text{margin:0 20px 0 0}";
+styleInject_es.styleInject(css_248z);
+
+const b = styleInject_es.block('title');
+const Title = ({ children, closeIconSize = 23, hasSeparator, closeTitle = i18n('button_close'), onClose, }) => {
+    return (React__default["default"].createElement("div", { className: b({ separator: hasSeparator }) },
+        React__default["default"].createElement(uikit.Text, { className: b('text'), as: 'h3', variant: 'subheader-3' }, children),
+        onClose && (React__default["default"].createElement(uikit.Button, { onClick: onClose, view: "flat", size: "l", extraProps: {
+                'aria-label': closeTitle,
+            } },
+            React__default["default"].createElement(uikit.Icon, { data: icons.Xmark, size: closeIconSize })))));
+};
+Title.displayName = 'Title';
+
+exports.Title = Title;
+//# sourceMappingURL=Title-d58ff158.js.map

package/build/cjs/Title-d58ff158.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Title-d58ff158.js","sources":["../../../src/components/Title/i18n/index.ts","../../../src/components/Title/Title.tsx"],"sourcesContent":["import {registerKeyset} from '../../utils/registerKeyset';\n\nimport en from './en.json';\nimport ru from './ru.json';\n\nconst COMPONENT = 'Title';\nexport default registerKeyset({en, ru}, COMPONENT);\n","import React from 'react';\nimport {Button, Icon, Text} from '@gravity-ui/uikit';\nimport {Xmark} from '@gravity-ui/icons';\nimport {block} from '../utils/cn';\nimport i18n from './i18n';\n\nimport './Title.scss';\n\nconst b = block('title');\n\ninterface TitleProps {\n    hasSeparator?: boolean;\n    closeTitle?: string;\n    closeIconSize?: number;\n    onClose?: () => void;\n}\nexport const Title: React.FC<React.PropsWithChildren<TitleProps>> = ({\n    children,\n    closeIconSize = 23,\n    hasSeparator,\n    closeTitle = i18n('button_close'),\n    onClose,\n}) => {\n    return (\n        <div className={b({separator: hasSeparator})}>\n            <Text className={b('text')} as={'h3'} variant={'subheader-3'}>\n                {children}\n            </Text>\n            {onClose && (\n                <Button\n                    onClick={onClose}\n                    view=\"flat\"\n                    size=\"l\"\n                    extraProps={{\n                        'aria-label': closeTitle,\n                    }}\n                >\n                    <Icon data={Xmark} size={closeIconSize} />\n                </Button>\n            )}\n        </div>\n    );\n};\n\nTitle.displayName = 'Title';\n"],"names":["registerKeyset","block","React","Text","Button","Icon","Xmark"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAKA,MAAM,SAAS,GAAG,OAAO,CAAC;AAC1B,WAAeA,6BAAc,CAAC,EAAC,EAAE,EAAE,EAAE,EAAC,EAAE,SAAS,CAAC;;;;;ACElD,MAAM,CAAC,GAAGC,oBAAK,CAAC,OAAO,CAAC,CAAC;AAQZ,MAAA,KAAK,GAAkD,CAAC,EACjE,QAAQ,EACR,aAAa,GAAG,EAAE,EAClB,YAAY,EACZ,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,EACjC,OAAO,GACV,KAAI;IACD,QACIC,yBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,EAAC,SAAS,EAAE,YAAY,EAAC,CAAC,EAAA;AACxC,QAAAA,yBAAA,CAAA,aAAA,CAACC,UAAI,EAAC,EAAA,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,aAAa,EAAA,EACvD,QAAQ,CACN;AACN,QAAA,OAAO,KACJD,yBAAA,CAAA,aAAA,CAACE,YAAM,EACH,EAAA,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,GAAG,EACR,UAAU,EAAE;AACR,gBAAA,YAAY,EAAE,UAAU;AAC3B,aAAA,EAAA;AAED,YAAAF,yBAAA,CAAA,aAAA,CAACG,UAAI,EAAA,EAAC,IAAI,EAAEC,WAAK,EAAE,IAAI,EAAE,aAAa,EAAI,CAAA,CACrC,CACZ,CACC,EACR;AACN,EAAE;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}

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

@@ -1,4 +1,18 @@
 import React from 'react';
 import { AsideHeaderProps } from './types';
-import './AsideHeader.scss';
+/**
+ * Simply usage of AsideHeader:
+ * @example
+ * <AsideHeader renderContent={renderContent} {...props} />
+ *
+ * Advanced usage of AsideHeader:
+ * @example
+ * <PageLayout reverse >
+ *  <PageLayout.Content>
+ *      <Content />
+ *  </PageLayout.Content>
+ *
+ *  <PageLayoutAside {...props} />
+ * </PageLayout>
+ */
 export declare const AsideHeader: React.ForwardRefExoticComponent<AsideHeaderProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -4,14 +4,13 @@ import { AsideHeaderInnerProps } from './types';
 export interface AsideHeaderInnerContextType extends AsideHeaderInnerProps {
     menuItems: MenuItem[];
     allPagesIsAvailable: boolean;
-    size: number;
     onItemClick: (item: MenuItem, collapsed: boolean, event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
 }
 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;
+    compact: boolean;
     size: number;
 }
 export declare const AsideHeaderContext: React.Context<AsideHeaderContextType | undefined>;

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

@@ -3,3 +3,4 @@ export default _default;
 export declare const Showcase: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export declare const Compact: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export declare const MultipleTooltip: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export declare const AdvancedUsage: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;

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

@@ -0,0 +1,11 @@
+import React, { PropsWithChildren } from 'react';
+import { ContentProps } from '../../../Content';
+import { LayoutProps } from '../../types';
+import '../../AsideHeader.scss';
+export interface PageLayoutProps extends PropsWithChildren<LayoutProps> {
+    reverse?: boolean;
+}
+declare const PageLayout: (({ compact, reverse, className, children }: PageLayoutProps) => React.JSX.Element) & {
+    Content: React.FC<React.PropsWithChildren<Pick<ContentProps, "renderContent">>>;
+};
+export { PageLayout };

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { AsideHeaderProps } from '../../types';
+type Props = Omit<AsideHeaderProps, 'compact' | 'size'>;
+export declare const PageLayoutAside: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -2,10 +2,15 @@
 import { RenderContentType } from '../Content';
 import { DrawerItemProps } from '../Drawer/Drawer';
 import { LogoProps, MenuItem, SubheaderMenuItem, OpenModalSubscriber } from '../types';
+import { AsideHeaderContextType } from './AsideHeaderContext';
+export interface LayoutProps {
+    compact: boolean;
+    className?: string;
+}
 export interface AsideHeaderGeneralProps {
     logo: LogoProps;
-    compact: boolean;
     multipleTooltip?: boolean;
+    reverse?: boolean;
     className?: string;
     collapseTitle?: string;
     expandTitle?: string;
@@ -27,8 +32,8 @@ export interface AsideHeaderDefaultProps {
     onMenuItemsChanged?: (items: MenuItem[]) => void;
     headerDecoration?: boolean;
 }
-export type AsideHeaderInnerProps = AsideHeaderGeneralProps & AsideHeaderDefaultProps;
-export interface AsideHeaderProps extends AsideHeaderGeneralProps, Partial<AsideHeaderDefaultProps> {
+export type AsideHeaderInnerProps = AsideHeaderGeneralProps & AsideHeaderDefaultProps & AsideHeaderContextType;
+export interface AsideHeaderProps extends AsideHeaderGeneralProps, LayoutProps, Partial<AsideHeaderDefaultProps> {
 }
 export declare enum InnerPanels {
     AllPages = "all-pages"

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

@@ -1,6 +1,6 @@
 import { MenuItem } from './../types';
 import { CompositeBarItem } from '../CompositeBar/CompositeBar';
-export declare function getItemHeight(item: CompositeBarItem): 40 | 15 | 50;
+export declare function getItemHeight(item: CompositeBarItem): 15 | 40 | 50;
 export declare function getItemsHeight<T extends CompositeBarItem>(items: T[]): number;
 export declare function getSelectedItemIndex(items: MenuItem[]): number | undefined;
 export declare function getPinnedItems(items: MenuItem[]): MenuItem[];

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

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

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

@@ -3,6 +3,8 @@ export type { AsideHeaderProps } from './AsideHeader/types';
 export { AsideHeaderContextProvider, useAsideHeaderContext } from './AsideHeader/AsideHeaderContext';
 export { Drawer, DrawerProps, DrawerItemProps, DrawerItem } from './Drawer/Drawer';
 export { FooterItem, FooterItemProps } from './FooterItem/FooterItem';
+export { PageLayout, type PageLayoutProps } from './AsideHeader/components/PageLayout/PageLayout';
+export { PageLayoutAside } from './AsideHeader/components/PageLayout/PageLayoutAside';
 export * from './ActionBar';
 export * from './Title';
 export * from './HotkeysPanel';

package/build/cjs/constants-9783dc2d.js

@@ -0,0 +1,10 @@
+'use strict';
+
+const ASIDE_HEADER_ICON_SIZE = 18;
+const ASIDE_HEADER_COMPACT_WIDTH = 56;
+const ASIDE_HEADER_EXPANDED_WIDTH = 236;
+
+exports.ASIDE_HEADER_COMPACT_WIDTH = ASIDE_HEADER_COMPACT_WIDTH;
+exports.ASIDE_HEADER_EXPANDED_WIDTH = ASIDE_HEADER_EXPANDED_WIDTH;
+exports.ASIDE_HEADER_ICON_SIZE = ASIDE_HEADER_ICON_SIZE;
+//# sourceMappingURL=constants-9783dc2d.js.map

package/build/cjs/constants-9783dc2d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants-9783dc2d.js","sources":["../../../src/components/constants.ts"],"sourcesContent":["export const ASIDE_HEADER_ICON_SIZE = 18;\nexport const ASIDE_HEADER_COMPACT_WIDTH = 56;\nexport const ASIDE_HEADER_EXPANDED_WIDTH = 236;\n"],"names":[],"mappings":";;AAAO,MAAM,sBAAsB,GAAG,GAAG;AAClC,MAAM,0BAA0B,GAAG,GAAG;AACtC,MAAM,2BAA2B,GAAG;;;;;;"}