@doyourjob/gravity-ui-page-constructor-addons 2.1.25-dev.0 → 2.1.25

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

@@ -1,70 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { block } from '../../../../utils/cn';
-import { NO_MENU_TAB_SELECTED, SWITCH_MENU_TAB_TIMEOUT } from '../../constants';
-import { NavigationItemType, } from '../../models';
-import { CompanyPopup } from '../CompanyPopup/CompanyPopup';
-import { InvestorPopup } from '../InvestorPopup/InvestorPopup';
-import { MediumPopup } from '../MediumPopup/MediumPopup';
-import { NavigationItem } from '../NavigationItem/NavigationItem';
-import { NavigationPopup } from '../NavigationPopup/NavigationPopup';
-import { ProductsPopup } from '../ProductsPopup/ProductsPopup';
-import { ResourcesPopup } from '../ResourcesPopup/ResourcesPopup';
-import { SolutionsPopup } from '../SolutionsPopup/SolutionsPopup';
-import { WhyPopup } from '../WhyPopup/WhyPopup';
-import './Navigation.css';
-const b = block('navigation');
-const tooltipPrefixId = 'navigation-item-key';
-const getPopupContent = (sectionData) => {
-    const { type, data } = sectionData;
-    switch (type) {
-        case NavigationItemType.MediumPopup:
-            return React.createElement(MediumPopup, Object.assign({}, data));
-        case NavigationItemType.ProductsPopup:
-            return React.createElement(ProductsPopup, Object.assign({}, data));
-        case NavigationItemType.SolutionsPopup:
-            return React.createElement(SolutionsPopup, Object.assign({}, data));
-        case NavigationItemType.WhyPopup:
-            return React.createElement(WhyPopup, Object.assign({}, data));
-        case NavigationItemType.ResourcesPopup:
-            return React.createElement(ResourcesPopup, Object.assign({}, data));
-        case NavigationItemType.CompanyPopup:
-            return React.createElement(CompanyPopup, Object.assign({}, data));
-        case NavigationItemType.InvestorPopup:
-            return React.createElement(InvestorPopup, Object.assign({}, data));
-        default:
-            return null;
-    }
-};
-export const Navigation = ({ data, headerRef, setupRouteChangeHandler }) => {
-    const [activeTab, setActiveTab] = useState(NO_MENU_TAB_SELECTED);
-    const [pretendentActiveTab, setPretendentAciveTab] = useState(NO_MENU_TAB_SELECTED);
-    const [previouslyFocusedElement, setPreviouslyFocusedElement] = useState(null);
-    const handleActiveTab = useCallback((currentIndex) => {
-        setPreviouslyFocusedElement(document.activeElement);
-        setPretendentAciveTab(currentIndex);
-    }, []);
-    const onEscapeKeyDown = useCallback((event) => {
-        if (event.key === 'Escape') {
-            setActiveTab(NO_MENU_TAB_SELECTED);
-            setPretendentAciveTab(NO_MENU_TAB_SELECTED);
-            previouslyFocusedElement === null || previouslyFocusedElement === void 0 ? void 0 : previouslyFocusedElement.focus({ preventScroll: true });
-        }
-    }, [previouslyFocusedElement]);
-    useEffect(() => setupRouteChangeHandler === null || setupRouteChangeHandler === void 0 ? void 0 : setupRouteChangeHandler(() => {
-        handleActiveTab(NO_MENU_TAB_SELECTED);
-    }), [setupRouteChangeHandler, handleActiveTab]);
-    useEffect(() => {
-        const timerId = setTimeout(() => {
-            setActiveTab(pretendentActiveTab);
-        }, SWITCH_MENU_TAB_TIMEOUT);
-        return () => clearTimeout(timerId);
-    }, [activeTab, pretendentActiveTab]);
-    useEffect(() => {
-        document.addEventListener('keydown', onEscapeKeyDown);
-        return () => {
-            document.removeEventListener('keydown', onEscapeKeyDown);
-        };
-    }, [onEscapeKeyDown]);
-    return (React.createElement("nav", null,
-        React.createElement("ul", { className: b() }, data.map((item, i) => (React.createElement(NavigationItem, { key: item.title, item: item, handleActiveTab: handleActiveTab, index: i, isActive: activeTab === i, tooltipId: `${tooltipPrefixId}-${i}` }, activeTab === i && item.type !== NavigationItemType.Link && (React.createElement(NavigationPopup, { headerRef: headerRef, id: `${tooltipPrefixId}-${i}` }, getPopupContent(item)))))))));
-};

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

@@ -1,81 +0,0 @@
-/* use this for style redefinitions to awoid problems with
-unpredictable css rules order in build */
-.pc-addons-navigation-item {
-  white-space: nowrap;
-  color: var(--g-color-text-primary);
-}
-
-.pc-addons-navigation-item:hover .pc-addons-navigation-item__text {
-  color: var(--g-color-text-link);
-}
-
-.pc-addons-navigation-item_disable {
-  pointer-events: none;
-}
-
-.pc-addons-navigation-item__popup {
-  --yc-popup-border-width: 0;
-  --yc-popup-border-color: none;
-  border-radius: var(--pc-border-radius, 24px);
-  box-shadow: 0 3px 10px var(--g-color-base-generic-hover);
-  --yc-popover-max-width: 1296px;
-  --yc-popover-padding: 20px;
-  width: var(--yc-popover-max-width);
-  left: 0;
-  box-shadow: 0 4px 24px var(--g-color-base-generic-hover), 0 2px 8px var(--g-color-base-generic-hover);
-}
-
-.pc-addons-navigation-item__text {
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-  font: inherit;
-  border: none;
-  outline: none;
-  color: inherit;
-  background: none;
-  cursor: pointer;
-  color: inherit;
-  text-decoration: none;
-  display: block;
-  margin: 0 12px;
-  padding-bottom: 12px;
-  border-bottom: 2px solid transparent;
-  color: var(--g-color-text-primary);
-  position: relative;
-}
-
-.pc-addons-navigation-item__text:focus::before {
-  content: "";
-  width: 100%;
-  height: calc(100% - 12px - 2px);
-  position: absolute;
-  outline: 2px solid var(--g-color-line-focus);
-  border-radius: var(--g-focus-border-radius);
-  left: 0;
-  right: 0;
-  top: 2px;
-}
-
-.pc-addons-navigation-item__text:focus:not(:focus-visible)::before {
-  display: none;
-}
-
-.pc-addons-navigation-item__text_active {
-  color: var(--g-color-text-link);
-  border-color: var(--g-color-text-link);
-}
-
-.pc-addons-navigation-item__text_cursor_default {
-  cursor: default;
-}
-
-.pc-addons-navigation-item:first-child .pc-addons-navigation-item__text {
-  margin-left: 0;
-}
-
-@media (max-width: 1296px) {
-  .pc-addons-navigation-item__popup {
-    --yc-popover-max-width: calc(100% - 32px);
-  }
-}

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

@@ -1,13 +0,0 @@
-import type { FC, ReactNode } from 'react';
-import { NavigationItemData } from '../../models';
-import './NavigationItem.css';
-interface NavigationItemOwnProps {
-    index: number;
-    item: NavigationItemData;
-    isActive: boolean;
-    handleActiveTab: (currentIndex: number) => void;
-    children?: ReactNode;
-    tooltipId?: string;
-}
-export declare const NavigationItem: FC<NavigationItemOwnProps>;
-export {};

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

@@ -1,25 +0,0 @@
-import React, { useCallback, useContext, useEffect } from 'react';
-import { getLinkProps } from '@doyourjob/gravity-ui-page-constructor';
-import { block } from '../../../../utils/cn';
-import { NO_MENU_TAB_SELECTED } from '../../constants';
-import { RouteChangeHandlerContext } from '../../contexts/route-change';
-import { NavigationItemType } from '../../models';
-import './NavigationItem.css';
-const b = block('navigation-item');
-export const NavigationItem = ({ item, isActive, handleActiveTab, index, children, tooltipId, }) => {
-    var _a, _b, _c, _d;
-    const setupRouteChangeHandler = useContext(RouteChangeHandlerContext);
-    const handleMouseEnter = useCallback(() => handleActiveTab(index), [handleActiveTab, index]);
-    const handleMouseLeave = useCallback(() => handleActiveTab(NO_MENU_TAB_SELECTED), [handleActiveTab]);
-    useEffect(() => setupRouteChangeHandler === null || setupRouteChangeHandler === void 0 ? void 0 : setupRouteChangeHandler(() => {
-        handleMouseLeave();
-    }), [handleMouseLeave, setupRouteChangeHandler]);
-    if (item.type === NavigationItemType.Link) {
-        return (React.createElement("li", { key: item.title, className: b({ disable: !((_a = item.data) === null || _a === void 0 ? void 0 : _a.url) }), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
-            React.createElement("a", Object.assign({ className: b('text', { active: isActive }), href: (_b = item.data) === null || _b === void 0 ? void 0 : _b.url }, getLinkProps(((_c = item.data) === null || _c === void 0 ? void 0 : _c.url) || '', undefined, (_d = item.data) === null || _d === void 0 ? void 0 : _d.target)), item.title),
-            children));
-    }
-    return (React.createElement("li", { key: item.title, className: b({}), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
-        React.createElement("button", { className: b('text', { active: isActive, cursor: 'default' }), onClick: handleMouseEnter, "aria-expanded": isActive, "aria-controls": tooltipId }, item.title),
-        children));
-};

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

@@ -1,10 +0,0 @@
-.pc-addons-navigation-popup {
-  position: absolute;
-  margin: 0 32px;
-  width: calc(100% - 64px);
-  z-index: 10;
-}
-
-.pc-addons-navigation-popup:focus {
-  outline: 0;
-}

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

@@ -1,10 +0,0 @@
-import type { RefObject } from 'react';
-import React from 'react';
-import './NavigationPopup.css';
-interface NavigationPopupProps {
-    headerRef?: RefObject<HTMLDivElement>;
-    children: React.ReactNode;
-    id?: string;
-}
-export declare const NavigationPopup: ({ headerRef, children, id }: NavigationPopupProps) => React.ReactPortal | null;
-export {};

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

@@ -1,14 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { FocusTrap } from '../../../../utils/FocusTrap';
-import { block } from '../../../../utils/cn';
-import './NavigationPopup.css';
-const b = block('navigation-popup');
-export const NavigationPopup = ({ headerRef, children, id }) => {
-    return (headerRef === null || headerRef === void 0 ? void 0 : headerRef.current)
-        ? ReactDOM.createPortal(React.createElement(FocusTrap, { enabled: true },
-            React.createElement("div", { 
-                // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-                tabIndex: 0, className: b(), id: id }, children)), headerRef.current)
-        : null;
-};

package/build/esm/components/NewHeader/components/PopupItem/PopupItem.css

@@ -1,111 +0,0 @@
-/* use this for style redefinitions to awoid problems with
-unpredictable css rules order in build */
-.pc-addons-navigation-popup-item {
-  font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
-  line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
-  margin-bottom: 2px;
-}
-
-.pc-addons-navigation-popup-item__content {
-  outline: none;
-  color: inherit;
-  text-decoration: none;
-  display: flex;
-  border-radius: var(--g-border-radius-xl);
-  height: 100%;
-}
-
-.utilityfocus .pc-addons-navigation-popup-item__content:focus {
-  outline: 2px solid #ffdb4d;
-}
-
-.pc-addons-navigation-popup-item__content:focus {
-  outline: 2px solid var(--g-color-line-focus);
-  outline-offset: -2px;
-}
-
-.pc-addons-navigation-popup-item__content:focus:not(:focus-visible) {
-  outline: 0;
-}
-
-.pc-addons-navigation-popup-item__content_padding_default {
-  padding: 12px;
-}
-
-.pc-addons-navigation-popup-item__content_padding_s {
-  padding: 6px 12px;
-}
-
-.pc-addons-navigation-popup-item__content:hover, .pc-addons-navigation-popup-item__content:active {
-  color: var(--g-color-base-brand);
-}
-
-.pc-addons-navigation-popup-item__content_hover:hover, .pc-addons-navigation-popup-item__content_hover:active {
-  color: inherit;
-}
-
-.pc-addons-navigation-popup-item__content_hover:hover {
-  background-color: var(--g-color-base-simple-hover);
-}
-
-.pc-addons-navigation-popup-item__content_disable {
-  pointer-events: none;
-}
-
-.pc-addons-navigation-popup-item__icon {
-  color: var(--g-color-base-brand);
-}
-
-.pc-addons-navigation-popup-item__icon-container {
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.pc-addons-navigation-popup-item__container_with-margin {
-  margin-left: 28px;
-}
-
-.pc-addons-navigation-popup-item__description {
-  font-size: var(--g-text-body-1-font-size, var(--pc-text-body-1-font-size));
-  line-height: var(--g-text-body-1-line-height, var(--pc-text-body-1-line-height));
-  display: block;
-  margin-top: 2px;
-  color: var(--g-color-text-secondary);
-}
-
-.pc-addons-navigation-popup-item__tag {
-  position: relative;
-  top: -2px;
-}
-
-.pc-addons-navigation-popup-item__image {
-  display: block;
-  position: relative;
-  top: 2px;
-}
-
-.pc-addons-navigation-popup-item__image_size_m {
-  width: 18px;
-  height: 18px;
-}
-
-.pc-addons-navigation-popup-item__image_size_xm {
-  width: 16px;
-  height: 16px;
-}
-
-.pc-addons-navigation-popup-item__image_size_s {
-  width: 14px;
-  height: 14px;
-}
-
-.pc-addons-navigation-popup-item__image-container {
-  display: flex;
-  justify-content: center;
-  min-width: 20px;
-  margin-right: 8px;
-}

package/build/esm/components/NewHeader/components/PopupItem/PopupItem.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-import type { GridColumnSizesType } from '@doyourjob/gravity-ui-page-constructor';
-import { PopupItemData } from '../../models';
-import './PopupItem.css';
-export interface PopupItemProps extends Partial<PopupItemData> {
-    hover?: boolean;
-    sizes?: GridColumnSizesType;
-    className?: string;
-    padding?: 'default' | 's';
-    imageSize?: 's' | 'xm' | 'm';
-    target?: string;
-}
-export declare const PopupItem: (props: PopupItemProps) => React.JSX.Element;

package/build/esm/components/NewHeader/components/PopupItem/PopupItem.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import { Col, HTML, Image, getLinkProps } from '@doyourjob/gravity-ui-page-constructor';
-import { Icon } from '@gravity-ui/uikit';
-import { block } from '../../../../utils/cn';
-import { DefaultCategorizedItemSizes } from '../../constants';
-import { NavigationTag } from '../Tag/Tag';
-import './PopupItem.css';
-const b = block('navigation-popup-item');
-export const PopupItem = (props) => {
-    const { icon, url, target, title, tag, description, image, imageSize = 'm', hover, className, sizes = DefaultCategorizedItemSizes, padding = 'default', } = props;
-    const navigationTag = tag && React.createElement(NavigationTag, Object.assign({ className: b('tag'), size: "s" }, tag));
-    return (React.createElement(Col, { className: b(null, className), sizes: sizes },
-        React.createElement("a", Object.assign({ className: b('content', { hover, padding, disable: !url }), href: url }, getLinkProps(url || '', undefined, target)),
-            icon && (React.createElement("div", { className: b('icon-container') },
-                React.createElement(Icon, { className: b('icon'), data: icon, size: 16 }))),
-            image && (React.createElement("div", { className: b('image-container') },
-                React.createElement(Image, { className: b('image', { size: imageSize }), src: image }))),
-            React.createElement("div", { className: b('container', { 'with-margin': Boolean(icon) }) },
-                React.createElement("div", { className: b('title-tag-wrapper') },
-                    React.createElement("span", { className: b('title') }, title),
-                    "\u00A0",
-                    navigationTag),
-                description && React.createElement(HTML, { className: b('description') }, description)))));
-};

package/build/esm/components/NewHeader/components/ProductsPopup/ProductsPopup.css

@@ -1,113 +0,0 @@
-/* use this for style redefinitions to awoid problems with
-unpredictable css rules order in build */
-.pc-addons-products-popup {
-  background: var(--g-color-base-float);
-  box-shadow: 0 4px 24px var(--g-color-base-generic), 0 2px 8px var(--g-color-base-generic);
-  max-height: calc(100vh - 64px - 64px);
-  overflow: auto;
-  max-width: 1200px;
-  width: 100%;
-  border-radius: var(--pc-border-radius, 24px);
-  scrollbar-width: none;
-}
-
-.pc-addons-products-popup::-webkit-scrollbar {
-  display: none;
-}
-
-.pc-addons-products-popup__container {
-  padding: 0;
-}
-
-.pc-addons-products-popup > div + div {
-  border-top: 1px solid #e4ebf0;
-}
-
-.pc-addons-products-popup__wrap {
-  padding: 24px;
-  gap: 24px;
-  display: flex;
-  flex-direction: column;
-}
-
-.pc-addons-products-popup__title {
-  font-size: var(--g-text-header-1-font-size, var(--pc-text-header-1-font-size));
-  line-height: var(--g-text-header-1-line-height, var(--pc-text-header-1-line-height));
-  padding: 24px;
-  max-width: 108px;
-  font-weight: 600;
-  background-color: #e0e0e0;
-}
-
-.pc-addons-products-popup__subtitle {
-  font-size: var(--g-text-header-1-font-size, var(--pc-text-header-1-font-size));
-  line-height: var(--g-text-header-1-line-height, var(--pc-text-header-1-line-height));
-  font-weight: 700;
-  color: #e0e0e0;
-}
-
-.pc-addons-products-popup__powered-card {
-  font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
-  line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
-  font-weight: 500;
-  background-color: #f2f6f9;
-  border-radius: 16px;
-  padding: 16px;
-  display: flex;
-  gap: 24px;
-}
-
-.pc-addons-products-popup__powered-card-wrap {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  flex: 1;
-  gap: 20px;
-}
-
-.pc-addons-products-popup__powered-card-description {
-  color: #9fb1bd;
-}
-
-.pc-addons-products-popup__powered-card-container-image {
-  flex: 1;
-  max-width: 140px;
-}
-
-.pc-addons-products-popup__powered-card-image {
-  width: 100%;
-  aspect-ratio: 1;
-}
-
-.pc-addons-products-popup__run-card {
-  font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
-  line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
-  font-weight: 500;
-  border-radius: 16px;
-  background-color: #f2f6f9;
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  height: 100%;
-}
-
-.pc-addons-products-popup__run-card_border {
-  border: 1px solid #e4ebf0;
-  background-color: transparent;
-}
-
-.pc-addons-products-popup__run-card-wrap {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  gap: 4px;
-}
-
-.pc-addons-products-popup__run-card-description {
-  color: #9fb1bd;
-}
-
-.pc-addons-products-popup__run-card-image {
-  height: 40px;
-}

package/build/esm/components/NewHeader/components/ProductsPopup/ProductsPopup.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { ProductsPopupData } from '../../models';
-import './ProductsPopup.css';
-export declare const ProductsPopup: ({ sections, poweredCard }: ProductsPopupData) => React.JSX.Element;

package/build/esm/components/NewHeader/components/ProductsPopup/ProductsPopup.js

@@ -1,61 +0,0 @@
-import React from 'react';
-import { Col, Grid, GridColumnSize, Image, Row } from '@doyourjob/gravity-ui-page-constructor';
-import { block } from '../../../../utils/cn';
-import { PopupItem } from '../PopupItem/PopupItem';
-import './ProductsPopup.css';
-const b = block('products-popup');
-const PoweredCard = ({ title, description, image }) => {
-    return (React.createElement("div", { className: b('powered-card') },
-        React.createElement("div", { className: b('powered-card-wrap') },
-            React.createElement("div", { className: b('powered-card-title') }, title),
-            React.createElement("div", { className: b('powered-card-description') }, description)),
-        React.createElement(Image, { className: b('powered-card-image'), containerClassName: b('powered-card-container-image'), src: image })));
-};
-const RunCard = ({ title, description, image, border }) => {
-    return (React.createElement("div", { className: b('run-card', { border: border }) },
-        React.createElement(Image, { className: b('run-card-image'), src: image }),
-        React.createElement("div", { className: b('run-card-wrap') },
-            React.createElement("div", { className: b('run-card-title') }, title),
-            React.createElement("div", { className: b('run-card-description') }, description))));
-};
-export const ProductsPopup = ({ sections, poweredCard }) => (React.createElement(Grid, { className: b(), containerClass: b('container') }, sections.map((section, index) => {
-    var _a, _b, _c;
-    const isScaleSection = index === 2; // "Scale" section is usually the 3rd one
-    const isRunSection = section.runCards && section.runCards.length > 0;
-    let content;
-    if (isRunSection) {
-        content = (React.createElement(Col, null,
-            React.createElement(Row, null, (_a = section.runCards) === null || _a === void 0 ? void 0 : _a.map((card, cardIndex) => (React.createElement(Col, { key: `${card.title}-${cardIndex}`, sizes: {
-                    [GridColumnSize.Md]: 3,
-                    [GridColumnSize.All]: 12,
-                } },
-                React.createElement(RunCard, Object.assign({}, card))))))));
-    }
-    else if (isScaleSection) {
-        content = (React.createElement(React.Fragment, null,
-            React.createElement(Col, { sizes: {
-                    [GridColumnSize.Md]: 8,
-                    [GridColumnSize.All]: 12,
-                } },
-                React.createElement(Row, null, (_b = section.items) === null || _b === void 0 ? void 0 : _b.map((item, itemIndex) => (React.createElement(PopupItem, Object.assign({ key: `${item.title}-${itemIndex}` }, item, { hover: true, sizes: {
-                        [GridColumnSize.Md]: 6,
-                        [GridColumnSize.All]: 12,
-                    } })))))),
-            React.createElement(Col, { sizes: {
-                    [GridColumnSize.Md]: 4,
-                    [GridColumnSize.All]: 12,
-                } }, poweredCard && React.createElement(PoweredCard, Object.assign({}, poweredCard)))));
-    }
-    else {
-        content = (_c = section.items) === null || _c === void 0 ? void 0 : _c.map((item, itemIndex) => (React.createElement(PopupItem, Object.assign({ key: `${item.title}-${itemIndex}` }, item, { hover: true, sizes: {
-                [GridColumnSize.Md]: 4,
-                [GridColumnSize.All]: 12,
-            } }))));
-    }
-    return (React.createElement(Row, { key: section.title },
-        React.createElement(Col, { className: b('title') }, section.title),
-        React.createElement(Col, { className: b('wrap') },
-            React.createElement(Row, null,
-                React.createElement(Col, { className: b('subtitle') }, section.subtitle)),
-            React.createElement(Row, null, content))));
-})));