@gravity-ui/page-constructor 1.7.0-alpha.5 → 1.7.0-alpha.7

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

@@ -1,12 +0,0 @@
-import React from 'react';
-import { NavigationItem as NavigationItemModel } from '../../../../models/navigation';
-import './Navigation.css';
-export interface NavigationProps {
-    links: NavigationItemModel[];
-    activeItemIndex: number;
-    onActiveItemChange: (index: number) => void;
-    className?: string;
-    highlightActiveItem?: boolean;
-}
-declare const Navigation: React.FC<NavigationProps>;
-export default Navigation;

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

@@ -1,69 +0,0 @@
-import { __rest } from "tslib";
-import _ from 'lodash';
-import block from 'bem-cn-lite';
-import React, { Fragment, useState, useEffect, useCallback, useContext, useRef, } from 'react';
-import OverflowScroller from '../../../OverflowScroller/OverflowScroller';
-import { NavigationItemType, } from '../../../../models/navigation';
-import NavigationPopup from '../NavigationPopup/NavigationPopup';
-import NavigationItem from '../NavigationItem/NavigationItem';
-import { LocationContext } from '../../../../context/locationContext';
-import './Navigation.css';
-const b = block('navigation');
-const Navigation = ({ className, onActiveItemChange, links, activeItemIndex, highlightActiveItem, }) => {
-    const { asPath, pathname } = useContext(LocationContext);
-    const itemRefs = useRef([]);
-    const [itemPositions, setItemPosition] = useState([]);
-    const [lastLeftScroll, setLastLeftScroll] = useState(0);
-    const hidePopup = useCallback(() => {
-        onActiveItemChange(-1);
-    }, [onActiveItemChange]);
-    const getItemClickHandler = useCallback((index) => (e) => {
-        e.stopPropagation();
-        onActiveItemChange(index === activeItemIndex ? -1 : index);
-    }, [activeItemIndex, onActiveItemChange]);
-    const renderNavDropdown = (data, onClick, isActive, position) => {
-        const { text, items } = data, popupProps = __rest(data, ["text", "items"]);
-        return (React.createElement(Fragment, null,
-            React.createElement(NavigationItem, { className: b('link'), onClick: onClick, isOpened: isActive, data: { text, type: NavigationItemType.Dropdown } }),
-            isActive && (React.createElement(NavigationPopup, Object.assign({ left: position, onClose: hidePopup, items: items }, popupProps)))));
-    };
-    const slider = (React.createElement("div", { className: b('slider-container') },
-        React.createElement("div", { className: b('slider') })));
-    const content = (React.createElement("nav", null,
-        React.createElement("ul", { className: b('links') }, links.map((link, index) => {
-            const isActive = index === activeItemIndex;
-            const onClick = getItemClickHandler(index);
-            return (React.createElement("li", { ref: (el) => itemRefs.current.push(el), key: index, className: b('links-item') },
-                link.type === NavigationItemType.Dropdown ? (renderNavDropdown(link, onClick, isActive, itemPositions[index])) : (React.createElement(NavigationItem, { data: link, onClick: onClick })),
-                highlightActiveItem && isActive && slider));
-        }))));
-    const calculateItemPositions = useCallback(() => {
-        if (itemRefs.current.length) {
-            const currentItemPositions = itemRefs.current.map((itemRef) => (itemRef && itemRef.getBoundingClientRect().left) || 0);
-            setItemPosition(currentItemPositions);
-        }
-    }, []);
-    useEffect(() => {
-        const debouncedCalculateItemPositions = _.debounce(calculateItemPositions, 100);
-        const calculateOnScroll = _.debounce(() => {
-            const curLeftScroll = window.pageXOffset;
-            if (curLeftScroll !== lastLeftScroll) {
-                setLastLeftScroll(window.pageXOffset);
-                calculateItemPositions();
-            }
-        }, 100);
-        calculateItemPositions();
-        setLastLeftScroll(window.pageXOffset);
-        window.addEventListener('resize', debouncedCalculateItemPositions);
-        window.addEventListener('scroll', calculateOnScroll);
-        return () => {
-            window.removeEventListener(`resize`, calculateItemPositions);
-            window.removeEventListener('scroll', calculateOnScroll);
-        };
-    }, [calculateItemPositions, itemRefs, lastLeftScroll]);
-    useEffect(() => {
-        hidePopup();
-    }, [hidePopup, asPath, pathname]);
-    return (React.createElement(OverflowScroller, { className: b(null, className), onScrollStart: hidePopup, onScrollEnd: calculateItemPositions }, content));
-};
-export default Navigation;

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

@@ -1,41 +0,0 @@
-/* use this for style redefinitions to awoid problems with
-unpredictable css rules order in build */
-.navigation-item {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-.navigation-item_type_link {
-  color: var(--yc-color-text-primary);
-  color: inherit;
-  text-decoration: none;
-  outline: none;
-}
-.utilityfocus .navigation-item_type_link:focus {
-  outline: 2px solid #ffdb4d;
-}
-.navigation-item_type_link:hover, .navigation-item_type_link_active {
-  color: var(--yc-color-text-link);
-}
-.navigation-item_type_button {
-  display: inline-block;
-}
-.navigation-item__arrow {
-  position: relative;
-  top: -2px;
-  width: 9px;
-  height: 9px;
-  margin-left: 5px;
-}
-.navigation-item__icon {
-  display: flex;
-  width: 20px;
-  height: 20px;
-  margin-right: 8px;
-  border-radius: 50%;
-  object-fit: cover;
-}
-.navigation-item__dropdown {
-  margin-left: 7px;
-  color: var(--yc-color-text-secondary);
-}

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

@@ -1,13 +0,0 @@
-import React, { MouseEventHandler } from 'react';
-import { NavigationButtonItem, NavigationDropdownItem, NavigationSocialItem, NavigationLinkItem } from '../../../../models';
-import './NavigationItem.css';
-declare type DropdownItemData = Omit<NavigationDropdownItem, 'items'>;
-export declare type NavigationItemData = NavigationLinkItem | NavigationButtonItem | NavigationSocialItem | DropdownItemData;
-export interface NavigationItemProps {
-    data: NavigationItemData;
-    className?: string;
-    onClick?: MouseEventHandler;
-    isOpened?: boolean;
-}
-declare const NavigationItem: React.FC<NavigationItemProps>;
-export default NavigationItem;

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

@@ -1,54 +0,0 @@
-import { __rest } from "tslib";
-import React, { Fragment, useContext, useMemo } from 'react';
-import block from 'bem-cn-lite';
-import { RouterLink, ToggleArrow, Button, Image } from '../../../index';
-import { getLinkProps } from '../../../../utils';
-import { LocationContext } from '../../../../context/locationContext';
-import { NavigationItemType, } from '../../../../models';
-import { NavigationArrow } from '../../../../icons';
-import SocialIcon from '../SocialIcon/SocialIcon';
-import { getMediaImage } from '../../../Media/Image/utils';
-import './NavigationItem.css';
-const b = block('navigation-item');
-const Content = ({ text, icon }) => (React.createElement(Fragment, null,
-    icon && React.createElement(Image, Object.assign({ className: b('icon') }, icon)),
-    React.createElement("span", { className: b('text') }, text)));
-const NavigationDropdown = (_a) => {
-    var { text, icon, isOpened } = _a, props = __rest(_a, ["text", "icon", "isOpened"]);
-    const iconData = icon && getMediaImage(icon);
-    return (React.createElement("span", Object.assign({}, props),
-        React.createElement(Content, { text: text, icon: iconData }),
-        React.createElement(ToggleArrow, { className: b('dropdown'), size: 12, type: 'vertical', iconType: "navigation", open: isOpened })));
-};
-const NavigationLink = (props) => {
-    const { hostname } = useContext(LocationContext);
-    const { url, text, icon, arrow, target } = props, rest = __rest(props, ["url", "text", "icon", "arrow", "target"]);
-    const linkExtraProps = getLinkProps(url, hostname, target);
-    const iconData = icon && getMediaImage(icon);
-    const content = (React.createElement(Fragment, null,
-        React.createElement(Content, { text: text, icon: iconData }),
-        arrow && React.createElement(NavigationArrow, { className: b('arrow') })));
-    return (linkExtraProps === null || linkExtraProps === void 0 ? void 0 : linkExtraProps.target) ? (React.createElement("a", Object.assign({ href: url, title: text }, rest, linkExtraProps), content)) : (React.createElement(RouterLink, { href: url, passHref: true },
-        React.createElement("a", Object.assign({}, rest), content)));
-};
-const NavigationButton = (props) => {
-    const { url, target } = props;
-    return target ? (React.createElement(Button, Object.assign({}, props, { url: url }))) : (React.createElement(RouterLink, { href: url },
-        React.createElement(Button, Object.assign({}, props, { url: url }))));
-};
-//todo: add types support form component in map
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const NavigationItemsMap = {
-    [NavigationItemType.Button]: NavigationButton,
-    [NavigationItemType.Social]: SocialIcon,
-    [NavigationItemType.Dropdown]: NavigationDropdown,
-    [NavigationItemType.Link]: NavigationLink,
-};
-const NavigationItem = (_a) => {
-    var { data, className } = _a, props = __rest(_a, ["data", "className"]);
-    const { type = NavigationItemType.Link } = data;
-    const Component = NavigationItemsMap[type];
-    const componentProps = useMemo(() => (Object.assign(Object.assign({ className: b({ type }, className) }, data), props)), [className, data, props, type]);
-    return React.createElement(Component, Object.assign({}, componentProps));
-};
-export default NavigationItem;

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

@@ -1,33 +0,0 @@
-/* use this for style redefinitions to awoid problems with
-unpredictable css rules order in build */
-.navigation-popup {
-  position: fixed;
-  top: calc(var(--header-height) - 16px);
-  padding-right: 4px;
-  padding-left: 4px;
-  transform: translateX(calc(calc(8px * 2) * -1));
-  z-index: 101;
-  display: flex;
-  flex-direction: column;
-  min-width: 220px;
-  padding: 16px;
-  border: 1px solid var(--yc-color-line-generic);
-  border-top-width: 0;
-  border-radius: calc(var(--pc-border-radius) / 2);
-  background: var(--yc-color-base-float);
-  box-shadow: 0 3px 10px var(--yc-color-sfx-shadow);
-}
-@media (max-width: 768px) {
-  .navigation-popup {
-    display: none;
-  }
-}
-.navigation-popup__link {
-  height: 36px;
-  padding: 8px 12px;
-  border-radius: 8px;
-}
-.navigation-popup__link:hover {
-  color: var(--yc-color-text-primary);
-  background-color: var(--yc-color-base-simple-hover);
-}

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

@@ -1,11 +0,0 @@
-import React from 'react';
-import { NavigationLinkItem } from '../../../../models';
-import './NavigationPopup.css';
-export interface NavigationPopupProps {
-    items: NavigationLinkItem[];
-    onClose: () => void;
-    left?: number;
-    className?: string;
-}
-export declare const NavigationPopup: React.FC<NavigationPopupProps>;
-export default NavigationPopup;

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

@@ -1,42 +0,0 @@
-import _ from 'lodash';
-import block from 'bem-cn-lite';
-import React, { Fragment, useRef, useState, useEffect, useCallback } from 'react';
-import { Portal } from '@gravity-ui/uikit';
-import { OutsideClick } from '../../../index';
-import NavigationItem from '../NavigationItem/NavigationItem';
-import './NavigationPopup.css';
-const b = block('navigation-popup');
-export const NavigationPopup = ({ items, left, onClose }) => {
-    const [calculatedLeft, setCalculatedLeft] = useState(left);
-    const popupRef = useRef(null);
-    const calculateLeft = useCallback(() => {
-        if (popupRef && popupRef.current && left) {
-            const right = left + popupRef.current.offsetWidth;
-            const docWidth = document.body.clientWidth;
-            const currentLeft = right > docWidth ? left - (right - docWidth) : left;
-            setCalculatedLeft(currentLeft);
-        }
-        else {
-            setCalculatedLeft(left);
-        }
-    }, [left]);
-    useEffect(() => {
-        const debounceCalculateLeft = _.debounce(calculateLeft, 100);
-        calculateLeft();
-        window.addEventListener('resize', debounceCalculateLeft);
-        return () => {
-            window.removeEventListener('resize', debounceCalculateLeft);
-        };
-    }, [calculateLeft]);
-    useEffect(() => {
-        calculateLeft();
-    }, [calculateLeft, left]);
-    if (!document || !document.body) {
-        return null;
-    }
-    const renderDefaultPopup = (React.createElement(Fragment, null, items.map((item) => (React.createElement(NavigationItem, { key: item.text, className: b('link'), data: item })))));
-    return (React.createElement(Portal, null,
-        React.createElement("div", { ref: popupRef, className: b(), style: { left: calculatedLeft } },
-            React.createElement(OutsideClick, { onOutsideClick: onClose }, renderDefaultPopup))));
-};
-export default NavigationPopup;

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

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

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

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

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

@@ -1,12 +0,0 @@
-import React from 'react';
-import block from 'bem-cn-lite';
-import { Image } from '../../../index';
-import { getMediaImage } from '../../../Media/Image/utils';
-import './SocialIcon.css';
-const b = block('social-icon');
-const SocialIcon = ({ icon, url, className }) => {
-    const iconData = getMediaImage(icon);
-    return (React.createElement("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: b(null, className) },
-        React.createElement(Image, Object.assign({ className: b('icon') }, iconData))));
-};
-export default SocialIcon;

package/build/esm/icons/NavigationArrow.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const NavigationArrow: React.FC<React.SVGProps<SVGSVGElement>>;

package/build/esm/icons/NavigationArrow.js

@@ -1,4 +0,0 @@
-import React from 'react';
-import { a11yHiddenSvgProps } from '../utils/svg';
-export const NavigationArrow = (props) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "9", height: "9", fill: "none", viewBox: "0 0 9 9" }, a11yHiddenSvgProps, props),
-    React.createElement("path", { d: "M3 1H8M8 1V6M8 1L1 8", stroke: "currentColor", strokeOpacity: "0.7", strokeWidth: "1.2", strokeLinecap: "square" })));

package/build/esm/icons/NavigationClose.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const NavigationClose: React.FC<React.SVGProps<SVGSVGElement>>;

package/build/esm/icons/NavigationClose.js

@@ -1,4 +0,0 @@
-import React from 'react';
-import { a11yHiddenSvgProps } from '../utils/svg';
-export const NavigationClose = (props) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "36", height: "36", fill: "none" }, a11yHiddenSvgProps, props),
-    React.createElement("path", { d: "M26 10 10 26m16 0L10 10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })));

package/build/esm/icons/NavigationOpen.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const NavigationOpen: React.FC<React.SVGProps<SVGSVGElement>>;

package/build/esm/icons/NavigationOpen.js

@@ -1,6 +0,0 @@
-import React from 'react';
-import { a11yHiddenSvgProps } from '../utils/svg';
-export const NavigationOpen = (props) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "36", height: "36", fill: "none" }, a11yHiddenSvgProps, props),
-    React.createElement("rect", { x: "8", y: "10", width: "20", height: "2", rx: "1", fill: "currentColor" }),
-    React.createElement("rect", { x: "8", y: "17", width: "20", height: "2", rx: "1", fill: "currentColor" }),
-    React.createElement("rect", { x: "8", y: "24", width: "20", height: "2", rx: "1", fill: "currentColor" })));

package/build/esm/models/navigation.d.ts

@@ -1,59 +0,0 @@
-import { ImageProps, ButtonProps } from './constructor-items';
-export declare enum NavigationItemType {
-    Link = "link",
-    Dropdown = "dropdown",
-    Button = "button",
-    Social = "social"
-}
-export interface NavigationItemBase {
-    text: string;
-    icon?: ImageProps;
-    url?: string;
-}
-export interface NavigationLinkItem extends NavigationItemBase {
-    type: NavigationItemType.Link;
-    url: string;
-    arrow?: boolean;
-    target?: string;
-}
-export interface NavigationButtonItem extends ButtonProps {
-    type: NavigationItemType.Button;
-    url: string;
-    target?: string;
-}
-export interface NavigationDropdownItem extends NavigationItemBase {
-    type: NavigationItemType.Dropdown;
-    items: NavigationLinkItem[];
-}
-export interface NavigationSocialItem extends Omit<NavigationItemBase, 'text'> {
-    type: NavigationItemType.Social;
-    icon: ImageProps;
-    url: string;
-}
-export declare type NavigationItem = NavigationLinkItem | NavigationButtonItem | NavigationDropdownItem;
-export interface NavigationLogo extends Omit<NavigationItemBase, 'text'> {
-    icon: ImageProps;
-    text?: string;
-}
-export interface HeaderData {
-    leftItems: NavigationItem[];
-    rightItems?: NavigationItem[];
-}
-export interface FooterColumn {
-    title: string;
-    links: NavigationItem[];
-}
-export interface FooterUnderline {
-    links?: NavigationItem[];
-    copyright?: string;
-}
-export interface FooterData {
-    columns: FooterColumn[];
-    social?: NavigationSocialItem[];
-    underline?: FooterUnderline;
-}
-export interface NavigationData {
-    logo: NavigationLogo;
-    header: HeaderData;
-    footer?: FooterData;
-}

package/build/esm/models/navigation.js

@@ -1,7 +0,0 @@
-export var NavigationItemType;
-(function (NavigationItemType) {
-    NavigationItemType["Link"] = "link";
-    NavigationItemType["Dropdown"] = "dropdown";
-    NavigationItemType["Button"] = "button";
-    NavigationItemType["Social"] = "social";
-})(NavigationItemType || (NavigationItemType = {}));

package/server/models/navigation.d.ts

@@ -1,59 +0,0 @@
-import { ImageProps, ButtonProps } from './constructor-items';
-export declare enum NavigationItemType {
-    Link = "link",
-    Dropdown = "dropdown",
-    Button = "button",
-    Social = "social"
-}
-export interface NavigationItemBase {
-    text: string;
-    icon?: ImageProps;
-    url?: string;
-}
-export interface NavigationLinkItem extends NavigationItemBase {
-    type: NavigationItemType.Link;
-    url: string;
-    arrow?: boolean;
-    target?: string;
-}
-export interface NavigationButtonItem extends ButtonProps {
-    type: NavigationItemType.Button;
-    url: string;
-    target?: string;
-}
-export interface NavigationDropdownItem extends NavigationItemBase {
-    type: NavigationItemType.Dropdown;
-    items: NavigationLinkItem[];
-}
-export interface NavigationSocialItem extends Omit<NavigationItemBase, 'text'> {
-    type: NavigationItemType.Social;
-    icon: ImageProps;
-    url: string;
-}
-export declare type NavigationItem = NavigationLinkItem | NavigationButtonItem | NavigationDropdownItem;
-export interface NavigationLogo extends Omit<NavigationItemBase, 'text'> {
-    icon: ImageProps;
-    text?: string;
-}
-export interface HeaderData {
-    leftItems: NavigationItem[];
-    rightItems?: NavigationItem[];
-}
-export interface FooterColumn {
-    title: string;
-    links: NavigationItem[];
-}
-export interface FooterUnderline {
-    links?: NavigationItem[];
-    copyright?: string;
-}
-export interface FooterData {
-    columns: FooterColumn[];
-    social?: NavigationSocialItem[];
-    underline?: FooterUnderline;
-}
-export interface NavigationData {
-    logo: NavigationLogo;
-    header: HeaderData;
-    footer?: FooterData;
-}

package/server/models/navigation.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavigationItemType = void 0;
-var NavigationItemType;
-(function (NavigationItemType) {
-    NavigationItemType["Link"] = "link";
-    NavigationItemType["Dropdown"] = "dropdown";
-    NavigationItemType["Button"] = "button";
-    NavigationItemType["Social"] = "social";
-})(NavigationItemType = exports.NavigationItemType || (exports.NavigationItemType = {}));