@doyourjob/gravity-ui-page-constructor-addons 2.1.8

package/build/esm/components/Navigation/components/popups/components/PopupSecondaryGroup/PopupSecondaryGroup.css

@@ -0,0 +1,17 @@
+.pc-addons-popup-secondary-group {
+  width: calc(100% + 12px);
+  margin-top: 32px;
+  margin-left: -12px;
+  padding-top: 14px;
+  padding-bottom: 16px;
+  border-radius: var(--g-border-radius-xl);
+  background-color: var(--g-color-base-generic-ultralight);
+}
+
+.pc-addons-popup-secondary-group__title {
+  margin: 0 0 15px 16px;
+}
+
+.pc-addons-popup-secondary-group__items.row.row {
+  margin-left: -4px;
+}

package/build/esm/components/Navigation/components/popups/components/PopupSecondaryGroup/PopupSecondaryGroup.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { GridColumnSizesType } from '@doyourjob/gravity-ui-page-constructor';
+import { CategoryGroupData } from '../../../../models';
+import './PopupSecondaryGroup.css';
+type PopupSecondaryGroupProps = CategoryGroupData & {
+    sizes?: GridColumnSizesType;
+};
+export declare const PopupSecondaryGroup: ({ sizes, ...props }: PopupSecondaryGroupProps) => React.JSX.Element;
+export {};

package/build/esm/components/Navigation/components/popups/components/PopupSecondaryGroup/PopupSecondaryGroup.js

@@ -0,0 +1,17 @@
+import { __rest } from "tslib";
+import React from 'react';
+import { Row } from '@doyourjob/gravity-ui-page-constructor';
+import { block } from '../../../../../../utils/cn';
+import { NavigationPopupItem } from '../../../Navigation/NavigationPopupItem/NavigationPopupItem';
+import { PopupTitle } from '../PopupTitle/PopupTitle';
+import './PopupSecondaryGroup.css';
+const b = block('popup-secondary-group');
+export const PopupSecondaryGroup = (_a) => {
+    var { sizes } = _a, props = __rest(_a, ["sizes"]);
+    return (React.createElement("div", { className: b() },
+        React.createElement(PopupTitle, Object.assign({}, props, { className: b('title') })),
+        React.createElement("div", null,
+            React.createElement(Row, { className: b('items') }, Object.values(props.items).map(({ title: popupTitle, icon, url: itemUrl }) => {
+                return (React.createElement(NavigationPopupItem, { key: popupTitle, url: itemUrl, image: icon, title: popupTitle, padding: "s", imageSize: "s", sizes: sizes }));
+            })))));
+};

package/build/esm/components/Navigation/components/popups/components/PopupTitle/PopupTitle.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { ClassNameProps } from '@doyourjob/gravity-ui-page-constructor';
+import { CategoryGroupData } from '../../../../models';
+export declare const PopupTitle: ({ title, url, className }: CategoryGroupData & ClassNameProps) => React.JSX.Element;

package/build/esm/components/Navigation/components/popups/components/PopupTitle/PopupTitle.js

@@ -0,0 +1,14 @@
+import React, { useMemo } from 'react';
+import { Title } from '@doyourjob/gravity-ui-page-constructor';
+export const PopupTitle = ({ title, url, className }) => {
+    const titleProps = useMemo(() => {
+        return title
+            ? {
+                text: title,
+                textSize: 'xs',
+                url: url,
+            }
+            : undefined;
+    }, [title, url]);
+    return React.createElement(Title, { title: titleProps, className: className });
+};

package/build/esm/components/Navigation/components/popups/components/Search/Search.css

@@ -0,0 +1,38 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-popup-search {
+  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));
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  max-width: 376px;
+  height: 44px;
+  transition: width 0.3s;
+}
+
+.pc-addons-popup-search__close-button, .pc-addons-popup-search__search-button {
+  position: absolute;
+  z-index: 2;
+  right: 10px;
+  color: var(--g-color-text-hint);
+}
+
+.pc-addons-popup-search__search-button:hover {
+  color: var(--g-color-text-secondary);
+}
+
+.pc-addons-popup-search__search-suggest-container {
+  width: 100%;
+}
+
+.pc-addons-popup-search__search-suggest .yc-text-input__control {
+  padding-right: 32px;
+}
+
+.pc-addons-popup-search_size_s {
+  height: 36px;
+  width: 352px;
+  max-width: 100%;
+}

package/build/esm/components/Navigation/components/popups/components/Search/Search.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { IconData } from '@gravity-ui/uikit';
+import { ClassNameProps } from '../../../../../../models';
+import './Search.css';
+export type SearchSize = 's' | 'm';
+interface SearchProps extends ClassNameProps {
+    value?: string;
+    initialValue: string;
+    onSubmit: (value: string) => void;
+    debounce?: number;
+    placeholder?: string;
+    size?: SearchSize;
+    autoFocus?: boolean;
+    className?: string;
+    customSearchIcon?: IconData;
+}
+declare const Search: (props: SearchProps) => React.JSX.Element;
+export default Search;

package/build/esm/components/Navigation/components/popups/components/Search/Search.js

@@ -0,0 +1,45 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Magnifier, Xmark } from '@gravity-ui/icons';
+import { Button, Icon, TextInput } from '@gravity-ui/uikit';
+import debounce from 'lodash/debounce';
+import { useIsIPhone } from '../../../../../../hooks/useIsIPhone';
+import { block } from '../../../../../../utils/cn';
+import i18n from './i18n';
+import './Search.css';
+const b = block('popup-search');
+const Search = (props) => {
+    const { className, initialValue, onSubmit, debounce: debounceTime = 300, placeholder = i18n('search'), size = 'm', autoFocus = false, value: externalValue, customSearchIcon, } = props;
+    const [value, setValue] = useState(initialValue);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const onChangeDebounce = useCallback(debounce(onSubmit, debounceTime), []);
+    const inputRef = useRef(null);
+    const isIPhone = useIsIPhone();
+    useEffect(() => {
+        if (externalValue !== undefined) {
+            setValue(externalValue);
+        }
+    }, [externalValue]);
+    useEffect(() => {
+        if (autoFocus && !isIPhone) {
+            setTimeout(() => { var _a; return (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true }); }, 0);
+        }
+    }, [autoFocus, inputRef, isIPhone]);
+    return (React.createElement("div", { className: b({ size }, className) },
+        React.createElement("div", { className: b('search-suggest-container'), "data-qa": "search-suggest-container" },
+            React.createElement(TextInput, { value: value, onUpdate: (query) => {
+                    setValue(query);
+                    onChangeDebounce(query);
+                }, placeholder: placeholder, className: b('search-suggest'), size: size === 'm' ? 'xl' : 'l', controlRef: inputRef })),
+        value ? (React.createElement(Button, { className: b('close-button'), size: "xs", onClick: () => {
+                onChangeDebounce.cancel();
+                setValue('');
+                onSubmit('');
+            }, view: "flat", extraProps: { 'aria-label': i18n('clear-button-label') } },
+            React.createElement(Icon, { data: Xmark, size: 18 }))) : (React.createElement(Button, { className: b('search-button'), size: "xs", disabled: true, onClick: () => {
+                onChangeDebounce.cancel();
+                setValue('');
+                onSubmit('');
+            }, view: "flat", extraProps: { 'aria-label': i18n('search-button-label') } },
+            React.createElement(Icon, { data: customSearchIcon || Magnifier, size: 16 })))));
+};
+export default Search;

package/build/esm/components/Navigation/components/popups/components/Search/i18n/en.json

@@ -0,0 +1,5 @@
+{
+  "placeholder": "Search",
+  "clear-button-label": "Clear",
+  "search-button-label": "Search"
+}

package/build/esm/components/Navigation/components/popups/components/Search/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

package/build/esm/components/Navigation/components/popups/components/Search/i18n/index.js

@@ -0,0 +1,5 @@
+import { registerKeyset } from '../../../../../../../utils/registerKeyset';
+import en from './en.json';
+import ru from './ru.json';
+const COMPONENT = 'Search';
+export default registerKeyset({ en, ru }, COMPONENT);

package/build/esm/components/Navigation/components/popups/components/Search/i18n/ru.json

@@ -0,0 +1,5 @@
+{
+  "placeholder": "Поиск",
+  "clear-button-label": "Очистить",
+  "search-button-label": "Поиск"
+}

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

@@ -0,0 +1,7 @@
+export declare const SWITCH_MENU_TAB_TIMEOUT = 200;
+export declare const NO_MENU_TAB_SELECTED = -1;
+export declare const DefaultCategorizedItemSizes: {
+    lg: number;
+    sm: number;
+    all: number;
+};

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

@@ -0,0 +1,8 @@
+import { GridColumnSize } from '@doyourjob/gravity-ui-page-constructor';
+export const SWITCH_MENU_TAB_TIMEOUT = 200;
+export const NO_MENU_TAB_SELECTED = -1;
+export const DefaultCategorizedItemSizes = {
+    [GridColumnSize.Lg]: 4,
+    [GridColumnSize.Sm]: 6,
+    [GridColumnSize.All]: 12,
+};

package/build/esm/components/Navigation/containers/Footer/Footer.css

@@ -0,0 +1,104 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+:root {
+  --footer-margin-xs: 12px;
+  --footer-margin-s: 16px;
+  --footer-margin-m: 24px;
+  --footer-margin-l: 32px;
+  --footer-margin-xl: 48px;
+}
+
+.pc-addons-footer {
+  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));
+}
+
+.pc-addons-footer_type_default .pc-addons-footer__container-fluid {
+  padding-top: var(--footer-margin-xl);
+}
+
+.pc-addons-footer_type_simple {
+  margin: 0 40px;
+}
+
+.pc-addons-footer__group-wrapper + .pc-addons-footer__group-wrapper {
+  margin-top: var(--footer-margin-xl);
+}
+
+.pc-addons-footer__underline {
+  border-top: 1px solid var(--g-color-line-generic);
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding: var(--footer-margin-l) 0;
+}
+
+.pc-addons-footer__column_underline:not(:only-child) {
+  margin-top: var(--footer-margin-xl);
+}
+
+.pc-addons-footer__underline-links {
+  display: flex;
+  color: var(--g-color-text-primary);
+}
+
+.pc-addons-footer__item:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+
+.pc-addons-footer__item:focus:not(:focus-visible) {
+  outline: 0;
+}
+
+.pc-addons-footer__item_underline:not(:last-child) {
+  margin-right: var(--footer-margin-m);
+}
+
+.pc-addons-footer__item_lang-switch {
+  top: -3px;
+}
+
+.pc-addons-footer__copyright {
+  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));
+  color: var(--g-color-text-primary);
+}
+
+.mobile .pc-addons-footer_type_simple {
+  margin: 0 20px;
+}
+
+@media (max-width: 1081px) {
+  .pc-addons-footer__underline {
+    flex-direction: column;
+  }
+  .pc-addons-footer__underline-links:not(:last-child) {
+    margin-bottom: var(--footer-margin-s);
+  }
+  .pc-addons-footer__project {
+    margin: 0 var(--footer-margin-m) 0 0;
+  }
+}
+@media (max-width: 769px) {
+  .pc-addons-footer__underline-links {
+    flex-direction: column;
+  }
+  .pc-addons-footer__item_underline:not(:last-child) {
+    margin-bottom: var(--footer-margin-s);
+  }
+  .pc-addons-footer__project {
+    margin: 0 0 var(--footer-margin-s) 0;
+  }
+  .pc-addons-footer__column {
+    margin-top: var(--footer-margin-xl);
+  }
+  .pc-addons-footer_type_simple {
+    margin: 0 20px;
+  }
+}
+@media (min-width: 577px) and (max-width: 769px) {
+  .pc-addons-footer__column_underline {
+    padding: 0 8px;
+  }
+}

package/build/esm/components/Navigation/containers/Footer/Footer.d.ts

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

package/build/esm/components/Navigation/containers/Footer/Footer.js

@@ -0,0 +1,54 @@
+import React, { useMemo } from 'react';
+import { Col, Grid, Row } from '@doyourjob/gravity-ui-page-constructor';
+import { useMobile } from '@gravity-ui/uikit';
+import { block } from '../../../../utils/cn';
+import { EnrichedLink } from '../../../EnrichedLink/EnrichedLink';
+import { LangSwitch } from '../../components/LangSwitch';
+import GroupLinks from './GroupLinks/GroupLinks';
+import './Footer.css';
+const b = block('footer');
+const columnSize = {
+    all: 6,
+    sm: 3,
+    md: 2,
+};
+export const Footer = (props) => {
+    const { type = 'default', underline, columns, media, customItems } = props;
+    const isMobile = useMobile();
+    const mediaContent = useMemo(() => {
+        if (!media) {
+            return null;
+        }
+        return React.createElement(Col, { sizes: { all: 12, md: media.md || 6 } }, media.item);
+    }, [media]);
+    const groupLinks = useMemo(() => {
+        if (!(columns === null || columns === void 0 ? void 0 : columns.length)) {
+            return null;
+        }
+        return (React.createElement(React.Fragment, null, columns.map((groups, index) => (React.createElement(Col, { key: index, className: b('column'), sizes: columnSize }, groups.map((group, groupIndex) => (React.createElement(GroupLinks, { key: groupIndex, columnGroup: group, className: b('group-wrapper') }))))))));
+    }, [columns]);
+    const isSimple = type === 'simple';
+    const underlineBlock = useMemo(() => {
+        var _a, _b;
+        if (!underline) {
+            return null;
+        }
+        const itemClass = b('item', { underline: true });
+        return (React.createElement("div", { className: b('underline') },
+            React.createElement("div", { className: b('underline-links') },
+                underline.langSwitch && (React.createElement(LangSwitch, Object.assign({}, underline.langSwitch, { className: b('item', { underline: true, 'lang-switch': true }), direction: ['top-start', 'top', 'top-end'], size: "m", iconSize: 16, isMobile: isMobile }))),
+                !isSimple &&
+                    ((_a = underline.leftItems) === null || _a === void 0 ? void 0 : _a.map((item) => (React.createElement(EnrichedLink, Object.assign({ key: item.title, className: itemClass }, item)))))),
+            React.createElement("div", { className: b('underline-links') }, (_b = underline.rightItems) === null || _b === void 0 ? void 0 :
+                _b.map((item) => (React.createElement(EnrichedLink, Object.assign({ key: item.title, className: itemClass }, item)))),
+                underline.copyright && (React.createElement("div", { className: b('copyright') }, underline.copyright)))));
+    }, [underline, isSimple, isMobile]);
+    const isRightMedia = (media === null || media === void 0 ? void 0 : media.position) === 'right';
+    return (React.createElement("footer", { className: b({ type }) }, isSimple ? (underlineBlock) : (React.createElement(Grid, { containerClass: b('container-fluid') },
+        React.createElement(Row, { className: b('wrapper') },
+            !isRightMedia && mediaContent,
+            groupLinks,
+            isRightMedia && mediaContent,
+            customItems,
+            React.createElement(Col, { className: b('column', { underline: true }), sizes: { all: 12 } }, underlineBlock))))));
+};

package/build/esm/components/Navigation/containers/Footer/GroupLinks/GroupLinks.css

@@ -0,0 +1,68 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+:root {
+  --footer-margin-xs: 12px;
+  --footer-margin-s: 16px;
+  --footer-margin-m: 24px;
+  --footer-margin-l: 32px;
+  --footer-margin-xl: 48px;
+}
+
+.pc-addons-group-links {
+  display: flex;
+}
+
+.pc-addons-group-links__group {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  flex: 1;
+  width: 100%;
+}
+
+.pc-addons-group-links__group:not(:first-child) {
+  margin-left: 8px;
+}
+
+.pc-addons-group-links__group-title {
+  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));
+  color: var(--g-color-text-primary);
+  margin-bottom: var(--footer-margin-s);
+}
+
+.pc-addons-group-links__item-wrapper {
+  margin-bottom: var(--footer-margin-s);
+}
+
+.pc-addons-group-links__item-wrapper:last-of-type {
+  margin-bottom: 0;
+}
+
+.pc-addons-group-links__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));
+}
+
+.pc-addons-group-links__item:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+
+.pc-addons-group-links__item:focus:not(:focus-visible) {
+  outline: 0;
+}
+
+.pc-addons-group-links__item_underline:not(:last-child) {
+  margin-right: var(--footer-margin-m);
+}
+
+.pc-addons-group-links__item_social:not(:last-child) {
+  margin-right: 8px;
+}
+
+@media (max-width: 769px) {
+  .pc-addons-group-links__item_underline:not(:last-child) {
+    margin-bottom: var(--footer-margin-s);
+  }
+}

package/build/esm/components/Navigation/containers/Footer/GroupLinks/GroupLinks.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { EnrichedLinkProps } from '../../../../EnrichedLink/EnrichedLink';
+import './GroupLinks.css';
+export interface GroupLinksProps {
+    columnGroup: GroupLinkColumn;
+    className?: string;
+}
+export interface GroupLinkColumn {
+    title?: string;
+    items: EnrichedLinkProps[];
+}
+declare const GroupLinks: ({ columnGroup: { title, items }, className }: GroupLinksProps) => React.JSX.Element;
+export default GroupLinks;

package/build/esm/components/Navigation/containers/Footer/GroupLinks/GroupLinks.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { block } from '../../../../../utils/cn';
+import { EnrichedLink } from '../../../../EnrichedLink/EnrichedLink';
+import './GroupLinks.css';
+const b = block('group-links');
+const GroupLinks = ({ columnGroup: { title, items }, className }) => {
+    return (React.createElement("div", { className: b(null, className), key: title },
+        React.createElement("ul", { className: b('group') },
+            title && React.createElement("h5", { className: b('group-title') }, title),
+            items.map((item) => (React.createElement("li", { key: item.title, className: b('item-wrapper') },
+                React.createElement(EnrichedLink, Object.assign({ className: b('item') }, item))))))));
+};
+export default GroupLinks;

package/build/esm/components/Navigation/containers/Footer/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Footer';
+export * from './GroupLinks/GroupLinks';
+export * from './models';

package/build/esm/components/Navigation/containers/Footer/index.js

@@ -0,0 +1,3 @@
+export * from './Footer';
+export * from './GroupLinks/GroupLinks';
+export * from './models';

package/build/esm/components/Navigation/containers/Footer/models.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import type { ClassNameProps } from '@doyourjob/gravity-ui-page-constructor';
+import type { EnrichedLinkProps } from '../../../EnrichedLink/EnrichedLink';
+import { LangSwitchProps } from '../../components/LangSwitch';
+import type { GroupLinkColumn } from './GroupLinks/GroupLinks';
+export type FooterType = 'simple' | 'default';
+export type FooterMedia = {
+    item: React.ReactNode;
+    md?: number;
+    position: 'left' | 'right';
+};
+export interface FooterProps extends ClassNameProps {
+    type?: FooterType;
+    underline?: {
+        leftItems?: EnrichedLinkProps[];
+        rightItems?: EnrichedLinkProps[];
+        copyright?: string;
+        langSwitch?: Pick<LangSwitchProps, 'text' | 'showText' | 'items'>;
+    };
+    columns?: GroupLinkColumn[][];
+    customItems?: React.ReactNode;
+    media?: FooterMedia;
+}

package/build/esm/components/Navigation/containers/Footer/models.js

@@ -0,0 +1 @@
+export {};

package/build/esm/components/Navigation/containers/Footer/variables.css

@@ -0,0 +1,7 @@
+:root {
+  --footer-margin-xs: 12px;
+  --footer-margin-s: 16px;
+  --footer-margin-m: 24px;
+  --footer-margin-l: 32px;
+  --footer-margin-xl: 48px;
+}