@doyourjob/gravity-ui-page-constructor 5.31.16

package/build/esm/navigation/components/NavigationItem/NavigationItem.css

@@ -0,0 +1,31 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-navigation-item {
+  cursor: pointer;
+  outline: none;
+  color: inherit;
+  text-decoration: none;
+}
+.pc-navigation-item:last-child {
+  margin-bottom: 0;
+}
+.utilityfocus .pc-navigation-item:focus {
+  outline: 2px solid #ffdb4d;
+}
+.pc-navigation-item__content:not(.pc-navigation-item__content_type_button):hover, .pc-navigation-item__content:not(.pc-navigation-item__content_type_button):active {
+  color: var(--g-color-text-link);
+}
+.pc-navigation-item_menu-layout_desktop {
+  height: var(--header-height);
+  line-height: var(--header-height);
+  margin-bottom: 0;
+}
+.pc-navigation-item_menu-layout_mobile {
+  margin-bottom: 24px;
+}
+.pc-navigation-item_menu-layout_dropdown {
+  margin-bottom: 0;
+}
+.pc-navigation-item_menu-layout_dropdown .pc-navigation-item__content_type_link {
+  padding: 8px 12px;
+}

package/build/esm/navigation/components/NavigationItem/NavigationItem.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { NavigationItemProps } from '../../models';
+import './NavigationItem.css';
+export declare const NavigationItem: React.FC<NavigationItemProps>;
+export default NavigationItem;

package/build/esm/navigation/components/NavigationItem/NavigationItem.js

@@ -0,0 +1,30 @@
+import { __rest } from "tslib";
+import React, { useMemo } from 'react';
+import omit from 'lodash/omit';
+import { BlockIdContext } from '../../../context/blockIdContext';
+import { NavigationItemType, NavigationItemTypes } from '../../../models';
+import { block } from '../../../utils';
+import { useNavigationItemMap } from './hooks/useNavigationItemMap';
+import './NavigationItem.css';
+const b = block('navigation-item');
+const ANALYTICS_ID = 'navigation';
+const nonComplexNavigationItemTypes = NavigationItemTypes.filter((type) => type !== NavigationItemType.Dropdown);
+export const NavigationItem = (_a) => {
+    var { data, className, menuLayout } = _a, props = __rest(_a, ["data", "className", "menuLayout"]);
+    const { type = NavigationItemType.Link } = data;
+    const navItemMap = useNavigationItemMap();
+    const Component = navItemMap[type];
+    const componentProps = useMemo(() => {
+        const componentProperties = Object.assign(Object.assign({}, data), props);
+        if (nonComplexNavigationItemTypes.includes(type)) {
+            return omit(componentProperties, 'hidePopup', 'isActive');
+        }
+        return NavigationItemTypes.includes(type)
+            ? componentProperties
+            : Object.assign(Object.assign({}, componentProperties), { menuLayout });
+    }, [data, props, type, menuLayout]);
+    return (React.createElement(BlockIdContext.Provider, { value: ANALYTICS_ID },
+        React.createElement("li", { className: b({ 'menu-layout': menuLayout }, className) },
+            React.createElement(Component, Object.assign({}, componentProps, { className: b('content', { type }) })))));
+};
+export default NavigationItem;

package/build/esm/navigation/components/NavigationItem/components/ContentWrapper/ContentWrapper.css

@@ -0,0 +1,5 @@
+.pc-content-wrapper__icon {
+  display: flex;
+  margin-right: 6px;
+  object-fit: cover;
+}

package/build/esm/navigation/components/NavigationItem/components/ContentWrapper/ContentWrapper.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ImageProps } from '../../../../../models';
+import './ContentWrapper.css';
+interface ContentWrapperProps {
+    text: string;
+    icon?: ImageProps;
+    iconSize?: number;
+}
+export declare const ContentWrapper: React.FC<ContentWrapperProps>;
+export {};

package/build/esm/navigation/components/NavigationItem/components/ContentWrapper/ContentWrapper.js

@@ -0,0 +1,11 @@
+import React, { Fragment, useMemo } from 'react';
+import { Image } from '../../../../../components';
+import { block } from '../../../../../utils';
+import './ContentWrapper.css';
+const b = block('content-wrapper');
+export const ContentWrapper = ({ text, icon, iconSize }) => {
+    const iconSizeStyle = useMemo(() => (iconSize ? { height: `${iconSize}px`, width: `${iconSize}px` } : {}), [iconSize]);
+    return (React.createElement(Fragment, null,
+        icon && typeof icon !== 'string' && (React.createElement(Image, Object.assign({ className: b('icon') }, icon, { style: iconSizeStyle }))),
+        React.createElement("span", { className: b('text') }, text)));
+};

package/build/esm/navigation/components/NavigationItem/components/GithubButton/GithubButton.css

@@ -0,0 +1,14 @@
+.pc-github-button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+.pc-github-button span {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}

package/build/esm/navigation/components/NavigationItem/components/GithubButton/GithubButton.d.ts

@@ -0,0 +1,6 @@
+import { NavigationGithubButton } from '../../../../../models';
+import { NavigationItemProps } from '../../../../models';
+import './GithubButton.css';
+type NavigationGithubButtonProps = NavigationItemProps & NavigationGithubButton;
+export declare const GithubButton: ({ text, url, className, label, size, icon, urlTitle, }: NavigationGithubButtonProps) => JSX.Element;
+export {};

package/build/esm/navigation/components/NavigationItem/components/GithubButton/GithubButton.js

@@ -0,0 +1,43 @@
+import React, { useEffect, useRef } from 'react';
+import { NavigationGithubButtonIcon } from '../../../../../models';
+import { block } from '../../../../../utils';
+import './GithubButton.css';
+const b = block('github-button');
+const DEFAULT_LABEL = 'Stars on GitHub';
+/* More information about github-buttons in https://buttons.github.io/ */
+export const GithubButton = ({ text, url, className, label, size, icon, urlTitle, }) => {
+    const containerRef = useRef(null);
+    const linkRef = useRef(null);
+    useEffect(() => {
+        const paint = () => {
+            if (containerRef.current) {
+                const githubButton = containerRef.current.appendChild(document.createElement('span'));
+                import(/* webpackMode: "eager" */ 'github-buttons').then(({ render }) => {
+                    if (linkRef.current !== null) {
+                        render(githubButton.appendChild(linkRef.current), (el) => {
+                            try {
+                                if (githubButton.parentNode) {
+                                    githubButton.parentNode.replaceChild(el, githubButton);
+                                }
+                            }
+                            catch (_) { }
+                        });
+                    }
+                });
+            }
+        };
+        const reset = () => {
+            var _a;
+            if (((_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.lastChild) && linkRef.current) {
+                containerRef.current.replaceChild(linkRef.current, containerRef.current.lastChild);
+            }
+        };
+        paint();
+        return () => {
+            reset();
+        };
+    }, []);
+    return (React.createElement("div", { className: b(null, className) },
+        React.createElement("span", { ref: containerRef },
+            React.createElement("a", Object.assign({ href: url, ref: linkRef, title: urlTitle, "data-show-count": "true", "aria-label": label || DEFAULT_LABEL }, (icon && { 'data-icon': NavigationGithubButtonIcon[icon] }), (size && { 'data-size': size })), text))));
+};

package/build/esm/navigation/components/NavigationItem/components/NavigationButton/NavigationButton.css

@@ -0,0 +1,3 @@
+.pc-navigation-button {
+  display: inline-block;
+}

package/build/esm/navigation/components/NavigationItem/components/NavigationButton/NavigationButton.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ButtonProps } from '../../../../../models';
+import { NavigationItemProps } from '../../../../models';
+import './NavigationButton.css';
+type NavigationButtonProps = Pick<NavigationItemProps, 'className'> & ButtonProps;
+export declare const NavigationButton: React.FC<NavigationButtonProps>;
+export {};

package/build/esm/navigation/components/NavigationItem/components/NavigationButton/NavigationButton.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Button, RouterLink } from '../../../../../components';
+import { BlockIdContext } from '../../../../../context/blockIdContext';
+import { block } from '../../../../../utils';
+import './NavigationButton.css';
+const b = block('navigation-button');
+const ANALYTICS_ID = 'navigation';
+export const NavigationButton = (props) => {
+    const { url, target, className } = props;
+    const classes = b(null, className);
+    return (React.createElement(BlockIdContext.Provider, { value: ANALYTICS_ID }, target ? (React.createElement(Button, Object.assign({ className: classes }, props, { url: url }))) : (React.createElement(RouterLink, { href: url },
+        React.createElement(Button, Object.assign({}, props, { className: classes, url: url }))))));
+};

package/build/esm/navigation/components/NavigationItem/components/NavigationDropdown/NavigationDropdown.css

@@ -0,0 +1,26 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-navigation-dropdown {
+  position: relative;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  background: inherit;
+  font: inherit;
+  color: var(--g-color-text-primary);
+  border: none;
+}
+.pc-navigation-dropdown:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-navigation-dropdown:focus:not(:focus-visible) {
+  outline: 0;
+}
+.pc-navigation-dropdown__arrow {
+  margin-left: 7px;
+  color: var(--g-color-text-secondary);
+}

package/build/esm/navigation/components/NavigationItem/components/NavigationDropdown/NavigationDropdown.d.ts

@@ -0,0 +1,6 @@
+import { NavigationDropdownItem } from '../../../../../models';
+import { NavigationItemProps } from '../../../../models';
+import './NavigationDropdown.css';
+type NavigationDropdownProps = NavigationItemProps & NavigationDropdownItem;
+export declare const NavigationDropdown: ({ text, icon, className, iconSize, hidePopup, items, isActive, ...props }: NavigationDropdownProps) => JSX.Element;
+export {};

package/build/esm/navigation/components/NavigationItem/components/NavigationDropdown/NavigationDropdown.js

@@ -0,0 +1,20 @@
+import { __rest } from "tslib";
+import React, { Fragment, useRef } from 'react';
+import { ToggleArrow } from '../../../../../components';
+import { getMediaImage } from '../../../../../components/Media/Image/utils';
+import { block } from '../../../../../utils';
+import NavigationPopup from '../../../NavigationPopup/NavigationPopup';
+import { ContentWrapper } from '../ContentWrapper/ContentWrapper';
+import './NavigationDropdown.css';
+const b = block('navigation-dropdown');
+const TOGGLE_ARROW_SIZE = 12;
+export const NavigationDropdown = (_a) => {
+    var { text, icon, className, iconSize, hidePopup, items, isActive } = _a, props = __rest(_a, ["text", "icon", "className", "iconSize", "hidePopup", "items", "isActive"]);
+    const iconData = icon && getMediaImage(icon);
+    const anchorRef = useRef(null);
+    return (React.createElement(Fragment, null,
+        React.createElement("button", Object.assign({ ref: anchorRef }, props, { type: "button", className: b(null, className), "aria-expanded": isActive }),
+            React.createElement(ContentWrapper, { text: text, icon: iconData, iconSize: iconSize, "aria-expanded": isActive }),
+            React.createElement(ToggleArrow, { className: b('arrow'), size: TOGGLE_ARROW_SIZE, type: 'vertical', iconType: "navigation", open: isActive })),
+        React.createElement(NavigationPopup, { open: isActive, onClose: hidePopup, items: items, anchorRef: anchorRef })));
+};

package/build/esm/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.css

@@ -0,0 +1,32 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-navigation-link {
+  color: var(--g-color-text-primary);
+  color: inherit;
+  text-decoration: none;
+  outline: none;
+  position: relative;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+.utilityfocus .pc-navigation-link:focus {
+  outline: 2px solid #ffdb4d;
+}
+.pc-navigation-link:hover, .pc-navigation-link_active {
+  color: var(--g-color-text-link);
+}
+.pc-navigation-link:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-navigation-link:focus:not(:focus-visible) {
+  outline: 0;
+}
+.pc-navigation-link__arrow {
+  position: relative;
+  top: -2px;
+  width: 9px;
+  height: 9px;
+  margin-left: 5px;
+}

package/build/esm/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { NavigationLinkItem } from '../../../../../models';
+import { NavigationItemProps } from '../../../../models';
+import './NavigationLink.css';
+type NavigationLinkProps = NavigationItemProps & NavigationLinkItem;
+export declare const NavigationLink: React.FC<NavigationLinkProps>;
+export {};

package/build/esm/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.js

@@ -0,0 +1,27 @@
+import { __rest } from "tslib";
+import React, { Fragment, useContext } from 'react';
+import { RouterLink } from '../../../../../components';
+import { getMediaImage } from '../../../../../components/Media/Image/utils';
+import { LocationContext } from '../../../../../context/locationContext';
+import { NavigationArrow } from '../../../../../icons';
+import { block, getLinkProps } from '../../../../../utils';
+import { ContentWrapper } from '../ContentWrapper/ContentWrapper';
+import './NavigationLink.css';
+const b = block('navigation-link');
+export const NavigationLink = (props) => {
+    const { hostname, Link } = useContext(LocationContext);
+    const { url, text, icon, arrow, target, className, iconSize, urlTitle } = props, rest = __rest(props, ["url", "text", "icon", "arrow", "target", "className", "iconSize", "urlTitle"]);
+    const linkExtraProps = getLinkProps(url, hostname, target);
+    const iconData = icon && getMediaImage(icon);
+    const classes = b(null, className);
+    const content = (React.createElement(Fragment, null,
+        React.createElement(ContentWrapper, { text: text, icon: iconData, iconSize: iconSize }),
+        arrow && React.createElement(NavigationArrow, { className: b('arrow') })));
+    if ((linkExtraProps === null || linkExtraProps === void 0 ? void 0 : linkExtraProps.target) || !Link) {
+        return (React.createElement("a", Object.assign({ href: url, title: urlTitle || text, className: classes }, rest, linkExtraProps), content));
+    }
+    else {
+        return (React.createElement(RouterLink, { href: url, passHref: true },
+            React.createElement("a", Object.assign({ title: urlTitle || text }, rest, { className: classes }), content)));
+    }
+};

package/build/esm/navigation/components/NavigationItem/hooks/useNavigationItemMap.d.ts

@@ -0,0 +1,7 @@
+export declare const useNavigationItemMap: () => {
+    button: import("react").FC<Pick<import("../../..").NavigationItemProps, "className"> & import("../../../..").ButtonProps>;
+    social: import("react").FC<import("../../..").NavigationSocialItemOwnProps>;
+    dropdown: ({ text, icon, className, iconSize, hidePopup, items, isActive, ...props }: import("../../..").NavigationItemProps & import("../../../..").NavigationDropdownItem) => JSX.Element;
+    link: import("react").FC<import("../../..").NavigationItemProps & import("../../../..").NavigationLinkItem>;
+    "github-button": ({ text, url, className, label, size, icon, urlTitle, }: import("../../..").NavigationItemProps & import("../../../..").NavigationGithubButton) => JSX.Element;
+};

package/build/esm/navigation/components/NavigationItem/hooks/useNavigationItemMap.js

@@ -0,0 +1,8 @@
+import { useContext } from 'react';
+import isEmpty from 'lodash/isEmpty';
+import { navItemMap as NavItemMapDefault } from '../../../../constructor-items';
+import { InnerContext } from '../../../../context/innerContext';
+export const useNavigationItemMap = () => {
+    const { navItemMap } = useContext(InnerContext);
+    return isEmpty(navItemMap) ? NavItemMapDefault : navItemMap;
+};

package/build/esm/navigation/components/NavigationItem/index.d.ts

@@ -0,0 +1,6 @@
+export { GithubButton } from './components/GithubButton/GithubButton';
+export { NavigationButton } from './components/NavigationButton/NavigationButton';
+export { NavigationDropdown } from './components/NavigationDropdown/NavigationDropdown';
+export { NavigationLink } from './components/NavigationLink/NavigationLink';
+import NavigationItem from './NavigationItem';
+export default NavigationItem;

package/build/esm/navigation/components/NavigationItem/index.js

@@ -0,0 +1,6 @@
+export { GithubButton } from './components/GithubButton/GithubButton';
+export { NavigationButton } from './components/NavigationButton/NavigationButton';
+export { NavigationDropdown } from './components/NavigationDropdown/NavigationDropdown';
+export { NavigationLink } from './components/NavigationLink/NavigationLink';
+import NavigationItem from './NavigationItem';
+export default NavigationItem;

package/build/esm/navigation/components/NavigationList/NavigationList.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { NavigationListProps } from '../../models';
+export declare const NavigationList: React.FC<NavigationListProps>;

package/build/esm/navigation/components/NavigationList/NavigationList.js

@@ -0,0 +1,7 @@
+import { __rest } from "tslib";
+import React from 'react';
+import NavigationListItem from '../NavigationListItem/NavigationListItem';
+export const NavigationList = (_a) => {
+    var { className, itemClassName, items } = _a, props = __rest(_a, ["className", "itemClassName", "items"]);
+    return (React.createElement("ul", { className: className }, items.map((item, index) => (React.createElement(NavigationListItem, Object.assign({ key: index, index: index, data: item, className: itemClassName }, props))))));
+};

package/build/esm/navigation/components/NavigationListItem/NavigationListItem.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { NavigationListItemProps } from '../../models';
+export declare const NavigationListItem: React.FC<NavigationListItemProps>;
+export default NavigationListItem;

package/build/esm/navigation/components/NavigationListItem/NavigationListItem.js

@@ -0,0 +1,17 @@
+import { __rest } from "tslib";
+import React from 'react';
+import { getItemClickHandler } from '../../utils';
+import NavigationItem from '../NavigationItem';
+export const NavigationListItem = (_a) => {
+    var { column, index, activeItemId, onActiveItemChange } = _a, props = __rest(_a, ["column", "index", "activeItemId", "onActiveItemChange"]);
+    const id = `${column}-${index}`;
+    const isActive = id === activeItemId;
+    const onClick = getItemClickHandler({
+        column,
+        index,
+        activeItemId,
+        onActiveItemChange,
+    });
+    return (React.createElement(NavigationItem, Object.assign({ isActive: isActive, onClick: onClick, hidePopup: onActiveItemChange }, props)));
+};
+export default NavigationListItem;

package/build/esm/navigation/components/NavigationPopup/NavigationPopup.css

@@ -0,0 +1,30 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-navigation-popup {
+  margin-left: -16px;
+  margin-top: -16px;
+  z-index: 101;
+  display: flex;
+  flex-direction: column;
+  min-width: 220px;
+  padding: 16px;
+  border: 1px solid var(--g-color-line-generic);
+  border-top-width: 0;
+  border-radius: calc(var(--pc-border-radius) / 2);
+  background: var(--g-color-base-float);
+  box-shadow: 0 3px 10px var(--g-color-sfx-shadow);
+}
+.pc-navigation-popup__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.pc-navigation-popup__link {
+  height: 36px;
+  line-height: 20px;
+  border-radius: 8px;
+}
+.pc-navigation-popup__link:hover {
+  color: var(--g-color-text-primary);
+  background-color: var(--g-color-base-simple-hover);
+}

package/build/esm/navigation/components/NavigationPopup/NavigationPopup.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { NavigationPopupProps } from '../../models';
+import './NavigationPopup.css';
+export declare const NavigationPopup: React.FC<NavigationPopupProps>;
+export default NavigationPopup;

package/build/esm/navigation/components/NavigationPopup/NavigationPopup.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Popup } from '@gravity-ui/uikit';
+import { block } from '../../../utils';
+import { NavigationLayout } from '../../models';
+import NavigationItem from '../NavigationItem';
+import './NavigationPopup.css';
+const b = block('navigation-popup');
+const OFFSET_RESET = [0, 0];
+export const NavigationPopup = ({ anchorRef, items, onClose, className, open, }) => (React.createElement(Popup
+// Workaround to recalculate position on every opening. Required for valid position calculation for scrolled header links.
+, { 
+    // Workaround to recalculate position on every opening. Required for valid position calculation for scrolled header links.
+    anchorRef: open ? anchorRef : undefined, contentClassName: b(null, className), open: open, onClose: onClose, onOutsideClick: onClose, keepMounted: true, disablePortal: true, strategy: "fixed", placement: "bottom-start", offset: OFFSET_RESET },
+    React.createElement("ul", { className: b('list') }, items.map((item) => (React.createElement(NavigationItem, { key: item.text, className: b('link'), data: item, menuLayout: NavigationLayout.Dropdown }))))));
+export default NavigationPopup;

package/build/esm/navigation/components/SocialIcon/SocialIcon.css

@@ -0,0 +1,20 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-social-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  margin-right: 8px;
+  color: var(--g-color-base-background);
+  border-radius: 50%;
+  background-color: var(--g-color-base-generic);
+}
+.pc-social-icon:hover {
+  background-color: var(--g-color-base-generic-hover);
+}
+.pc-social-icon__icon {
+  width: 16px;
+  height: 16px;
+}

package/build/esm/navigation/components/SocialIcon/SocialIcon.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { NavigationSocialItem } from '../../../models';
+import './SocialIcon.css';
+export interface NavigationSocialItemOwnProps extends NavigationSocialItem {
+    className?: string;
+}
+declare const SocialIcon: React.FC<NavigationSocialItemOwnProps>;
+export default SocialIcon;

package/build/esm/navigation/components/SocialIcon/SocialIcon.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Image } from '../../../components';
+import { getMediaImage } from '../../../components/Media/Image/utils';
+import { block } from '../../../utils';
+import './SocialIcon.css';
+const b = block('social-icon');
+const SocialIcon = ({ icon, url, className, urlTitle }) => {
+    const iconData = getMediaImage(icon);
+    const { alt } = iconData;
+    return (React.createElement("a", { href: url, "aria-label": alt, title: urlTitle || alt, target: "_blank", rel: "noopener noreferrer", className: b(null, className) },
+        React.createElement(Image, Object.assign({ className: b('icon') }, iconData))));
+};
+export default SocialIcon;

package/build/esm/navigation/components/Standalone/index.d.ts

@@ -0,0 +1,3 @@
+import { NavigationComponentProps } from './../../components/Navigation/Navigation';
+declare const Standalone: (props: NavigationComponentProps) => JSX.Element;
+export default Standalone;

package/build/esm/navigation/components/Standalone/index.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import RootCn from '../../../components/RootCn';
+import Navigation from './../../components/Navigation/Navigation';
+const Standalone = (props) => (React.createElement(RootCn, null,
+    React.createElement(Navigation, Object.assign({}, props))));
+export default Standalone;

package/build/esm/navigation/containers/Layout/Layout.css

@@ -0,0 +1,15 @@
+.pc-layout {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+.pc-layout__content {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+}
+.pc-layout__navigation {
+  position: sticky;
+  z-index: 98;
+  top: 0;
+}

package/build/esm/navigation/containers/Layout/Layout.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { NavigationData } from '../../../models';
+import './Layout.css';
+export interface LayoutProps {
+    navigation?: NavigationData;
+    children?: React.ReactNode;
+}
+declare const Layout: React.FC<LayoutProps>;
+export default Layout;

package/build/esm/navigation/containers/Layout/Layout.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { block } from '../../../utils';
+import Navigation from '../../components/Navigation/Navigation';
+import './Layout.css';
+const b = block('layout');
+const Layout = ({ children, navigation }) => (React.createElement("div", { className: b() },
+    navigation &&
+        (navigation.renderNavigation ? (navigation.renderNavigation()) : (React.createElement(Navigation, { data: navigation.header, logo: navigation.logo, className: b('navigation') }))),
+    React.createElement("main", { className: b('content') }, children)));
+export default Layout;

package/build/esm/navigation/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { default as useActiveNavItem } from './useActiveNavItem';
+export { default as useShowBorder } from './useShowBorder';

package/build/esm/navigation/hooks/index.js

@@ -0,0 +1,2 @@
+export { default as useActiveNavItem } from './useActiveNavItem';
+export { default as useShowBorder } from './useShowBorder';

package/build/esm/navigation/hooks/useActiveNavItem.d.ts

@@ -0,0 +1,26 @@
+import { NavigationItemModel } from '../../models';
+declare const useActiveNavItem: (iconSize: number, leftItems: NavigationItemModel[], rightItems?: NavigationItemModel[]) => {
+    activeItemId: string | undefined;
+    leftItemsWithIconSize: (import("../../models").NavigationButtonItem | import("../../models").NavigationDropdownItem | {
+        type: import("../../models").NavigationItemType.Link;
+        url: string;
+        urlTitle?: string | undefined;
+        arrow?: boolean | undefined;
+        target?: string | undefined;
+        text: string;
+        icon?: import("../../models").ImageProps | undefined;
+        iconSize?: number | undefined;
+    })[];
+    rightItemsWithIconSize: (import("../../models").NavigationButtonItem | import("../../models").NavigationDropdownItem | {
+        type: import("../../models").NavigationItemType.Link;
+        url: string;
+        urlTitle?: string | undefined;
+        arrow?: boolean | undefined;
+        target?: string | undefined;
+        text: string;
+        icon?: import("../../models").ImageProps | undefined;
+        iconSize?: number | undefined;
+    })[] | undefined;
+    onActiveItemChange: (id?: string) => void;
+};
+export default useActiveNavItem;

package/build/esm/navigation/hooks/useActiveNavItem.js

@@ -0,0 +1,13 @@
+import { useMemo, useState } from 'react';
+import { getNavigationItemWithIconSize } from '../utils';
+const useActiveNavItem = (iconSize, leftItems, rightItems) => {
+    const [activeItemId, setActiveItemId] = useState(undefined);
+    const getNavigationItem = getNavigationItemWithIconSize(iconSize);
+    const leftItemsWithIconSize = useMemo(() => leftItems.map(getNavigationItem), [getNavigationItem, leftItems]);
+    const rightItemsWithIconSize = useMemo(() => rightItems === null || rightItems === void 0 ? void 0 : rightItems.map(getNavigationItem), [getNavigationItem, rightItems]);
+    const onActiveItemChange = (id) => {
+        setActiveItemId(id);
+    };
+    return { activeItemId, leftItemsWithIconSize, rightItemsWithIconSize, onActiveItemChange };
+};
+export default useActiveNavItem;

package/build/esm/navigation/hooks/useShowBorder.d.ts

@@ -0,0 +1,2 @@
+declare const useShowBorder: (withBorder: boolean, withBorderOnScroll: boolean) => boolean[];
+export default useShowBorder;

package/build/esm/navigation/hooks/useShowBorder.js

@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react';
+import debounce from 'lodash/debounce';
+const useShowBorder = (withBorder, withBorderOnScroll) => {
+    const [showBorder, setShowBorder] = useState(withBorder);
+    useEffect(() => {
+        if (!withBorderOnScroll)
+            return () => { };
+        const showBorderOnScroll = () => {
+            if (!withBorder) {
+                setShowBorder(window.scrollY > 0);
+            }
+        };
+        const scrollHandler = debounce(showBorderOnScroll, 20);
+        window.addEventListener('scroll', scrollHandler, { passive: true });
+        return () => window.removeEventListener('scroll', scrollHandler);
+    });
+    return [showBorder];
+};
+export default useShowBorder;