@doyourjob/gravity-ui-page-constructor 5.31.16

package/build/esm/components/IconWrapper/IconWrapper.css

@@ -0,0 +1,32 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-icon-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+.pc-icon-wrapper_icon-position_left {
+  flex-direction: row;
+}
+.pc-icon-wrapper__icon-container {
+  flex-shrink: 0;
+}
+.pc-icon-wrapper__icon {
+  max-width: 100%;
+  margin-bottom: 12px;
+  height: 32px;
+  object-fit: contain;
+  display: block;
+}
+.pc-icon-wrapper__icon_icon-position_left {
+  height: 22px;
+  width: 22px;
+  margin: 1px 12px 1px 0px;
+}
+.pc-icon-wrapper__content {
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 auto;
+}
+.pc-icon-wrapper__content_icon-position_left.pc-icon-wrapper__content_icon-position_left {
+  flex: 1 0 0;
+}

package/build/esm/components/IconWrapper/IconWrapper.d.ts

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+import type { ClassNameProps, IconWrapperProps } from '../../models';
+import './IconWrapper.css';
+declare const IconWrapper: (props: PropsWithChildren<IconWrapperProps> & ClassNameProps) => JSX.Element;
+export default IconWrapper;

package/build/esm/components/IconWrapper/IconWrapper.js

@@ -0,0 +1,18 @@
+import React, { Fragment } from 'react';
+import { block } from '../../utils';
+import Image from '../Image/Image';
+import { getMediaImage } from '../Media/Image/utils';
+import './IconWrapper.css';
+const b = block('icon-wrapper');
+const IconWrapper = (props) => {
+    const { icon, children, className } = props;
+    if (!icon) {
+        return React.createElement(Fragment, null, children);
+    }
+    const iconProps = getMediaImage(icon.value);
+    const iconPosition = icon === null || icon === void 0 ? void 0 : icon.position;
+    return (React.createElement("div", { className: b({ ['icon-position']: iconPosition }, className) },
+        iconProps && (React.createElement(Image, Object.assign({}, iconProps, { containerClassName: b('icon-container'), className: b('icon', { ['icon-position']: iconPosition }) }))),
+        React.createElement("div", { className: b('content', { ['icon-position']: iconPosition }) }, children)));
+};
+export default IconWrapper;

package/build/esm/components/Image/Image.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties, MouseEventHandler, ReactEventHandler } from 'react';
+import { ImageDeviceProps, ImageObjectProps, QAProps } from '../../models';
+export interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDeviceProps>, QAProps {
+    style?: CSSProperties;
+    className?: string;
+    onClick?: MouseEventHandler;
+    onLoad?: ReactEventHandler<HTMLDivElement>;
+    containerClassName?: string;
+}
+export interface DeviceSpecificFragmentProps extends QAProps {
+    disableWebp: boolean;
+    src: string;
+    breakpoint: number;
+}
+declare const Image: (props: ImageProps) => JSX.Element | null;
+export default Image;

package/build/esm/components/Image/Image.js

@@ -0,0 +1,32 @@
+import React, { Fragment, useContext, useState, } from 'react';
+import { BREAKPOINTS } from '../../constants';
+import { ProjectSettingsContext } from '../../context/projectSettingsContext';
+import { getQaAttrubutes } from '../../utils';
+import { isCompressible } from '../../utils/imageCompress';
+import ImageBase from '../ImageBase/ImageBase';
+const checkWebP = (src) => {
+    return src.endsWith('.webp') ? src : src + '.webp';
+};
+const DeviceSpecificFragment = ({ disableWebp, src, breakpoint, qa, }) => (React.createElement(Fragment, null,
+    !disableWebp && (React.createElement("source", { srcSet: checkWebP(src), type: "image/webp", media: `(max-width: ${breakpoint}px)`, "data-qa": `${qa}-compressed` })),
+    React.createElement("source", { srcSet: src, media: `(max-width: ${breakpoint}px)`, "data-qa": qa })));
+const Image = (props) => {
+    const projectSettings = useContext(ProjectSettingsContext);
+    const { src: imageSrc, alt, disableCompress, tablet, desktop, mobile, style, className, onClick, onLoad, containerClassName, qa, fetchPriority, loading, } = props;
+    const [imgLoadingError, setImgLoadingError] = useState(false);
+    const src = imageSrc || desktop;
+    if (!src) {
+        return null;
+    }
+    const qaAttributes = getQaAttrubutes(qa, 'mobile-webp-source', 'mobile-source', 'tablet-webp-source', 'tablet-source', 'desktop-source-compressed');
+    const disableWebp = projectSettings.disableCompress ||
+        disableCompress ||
+        !isCompressible(src) ||
+        imgLoadingError;
+    return (React.createElement("picture", { className: containerClassName, "data-qa": qa },
+        mobile && (React.createElement(DeviceSpecificFragment, { src: mobile, disableWebp: disableWebp, breakpoint: BREAKPOINTS.sm, qa: qaAttributes.mobileSource })),
+        tablet && (React.createElement(DeviceSpecificFragment, { src: tablet, disableWebp: disableWebp, breakpoint: BREAKPOINTS.md, qa: qaAttributes.tabletSource })),
+        src && !disableWebp && (React.createElement("source", { srcSet: checkWebP(src), type: "image/webp", "data-qa": qaAttributes.desktopSourceCompressed })),
+        React.createElement(ImageBase, { className: className, alt: alt, src: src, style: style, fetchPriority: fetchPriority, loading: loading, onClick: onClick, onError: () => setImgLoadingError(true), onLoad: onLoad })));
+};
+export default Image;

package/build/esm/components/Image/schema.d.ts

@@ -0,0 +1,232 @@
+export declare const imageUrlPattern = "^(files\\.[^:\\s]+|((http[s]?|ftp):\\/)?\\/?([^:\\/\\s]+)((\\/\\w+)*\\/)([\\w\\-\\.]+[^#?\\s]+)(.*)?(#[\\w\\-]+)?)$";
+export declare const ImageDeviceProps: {
+    type: string;
+    additionalProperties: boolean;
+    required: string[];
+    properties: {
+        desktop: {
+            type: string;
+            pattern: string;
+        };
+        tablet: {
+            type: string;
+            pattern: string;
+        };
+        mobile: {
+            type: string;
+            pattern: string;
+        };
+        alt: {
+            type: string;
+            contentType: string;
+        };
+        disableCompress: {
+            type: string;
+        };
+        loading: {
+            type: string;
+            enum: string[];
+        };
+        fetchPriority: {
+            type: string;
+            enum: string[];
+        };
+    };
+};
+export declare const ImageBaseObjectProps: {
+    type: string;
+    additionalProperties: boolean;
+    properties: {
+        src: {
+            type: string;
+            pattern: string;
+        };
+        style: {
+            type: string;
+            additionalProperties: boolean;
+            required: never[];
+            properties: {
+                backgroundColor: {
+                    type: string;
+                };
+                height: {
+                    type: string[];
+                };
+                width: {
+                    type: string[];
+                };
+                color: {
+                    type: string;
+                };
+            };
+        };
+        alt: {
+            type: string;
+            contentType: string;
+        };
+        disableCompress: {
+            type: string;
+        };
+        loading: {
+            type: string;
+            enum: string[];
+        };
+        fetchPriority: {
+            type: string;
+            enum: string[];
+        };
+    };
+};
+export declare const ImageObjectProps: {
+    required: string[];
+    type: string;
+    additionalProperties: boolean;
+    properties: {
+        src: {
+            type: string;
+            pattern: string;
+        };
+        style: {
+            type: string;
+            additionalProperties: boolean;
+            required: never[];
+            properties: {
+                backgroundColor: {
+                    type: string;
+                };
+                height: {
+                    type: string[];
+                };
+                width: {
+                    type: string[];
+                };
+                color: {
+                    type: string;
+                };
+            };
+        };
+        alt: {
+            type: string;
+            contentType: string;
+        };
+        disableCompress: {
+            type: string;
+        };
+        loading: {
+            type: string;
+            enum: string[];
+        };
+        fetchPriority: {
+            type: string;
+            enum: string[];
+        };
+    };
+};
+export declare const ImageProps: {
+    oneOf: ({
+        type: string;
+        properties: {
+            when: {
+                type: string;
+            };
+        };
+    } | {
+        type: string;
+        pattern: string;
+        optionName: string;
+        items?: undefined;
+    } | {
+        type: string;
+        items: {
+            type: string;
+            properties: {
+                when: {
+                    type: string;
+                };
+            };
+        };
+        optionName: string;
+        pattern?: undefined;
+    })[];
+};
+export declare const BackgroundImageProps: {
+    anyOf: ({
+        optionName: string;
+        type: string;
+        additionalProperties: boolean;
+        properties: {
+            src: {
+                type: string;
+                pattern: string;
+            };
+            style: {
+                type: string;
+                additionalProperties: boolean;
+                required: never[];
+                properties: {
+                    backgroundColor: {
+                        type: string;
+                    };
+                    height: {
+                        type: string[];
+                    };
+                    width: {
+                        type: string[];
+                    };
+                    color: {
+                        type: string;
+                    };
+                };
+            };
+            alt: {
+                type: string;
+                contentType: string;
+            };
+            disableCompress: {
+                type: string;
+            };
+            loading: {
+                type: string;
+                enum: string[];
+            };
+            fetchPriority: {
+                type: string;
+                enum: string[];
+            };
+        };
+    } | {
+        optionName: string;
+        type: string;
+        additionalProperties: boolean;
+        required: string[];
+        properties: {
+            desktop: {
+                type: string;
+                pattern: string;
+            };
+            tablet: {
+                type: string;
+                pattern: string;
+            };
+            mobile: {
+                type: string;
+                pattern: string;
+            };
+            alt: {
+                type: string;
+                contentType: string;
+            };
+            disableCompress: {
+                type: string;
+            };
+            loading: {
+                type: string;
+                enum: string[];
+            };
+            fetchPriority: {
+                type: string;
+                enum: string[];
+            };
+        };
+    })[];
+};

package/build/esm/components/Image/schema.js

@@ -0,0 +1,78 @@
+import { filteredItem } from '../../schema/validators/utils';
+export const imageUrlPattern = '^(files\\.[^:\\s]+|((http[s]?|ftp):\\/)?\\/?([^:\\/\\s]+)((\\/\\w+)*\\/)([\\w\\-\\.]+[^#?\\s]+)(.*)?(#[\\w\\-]+)?)$';
+const ImageBase = {
+    alt: {
+        type: 'string',
+        contentType: 'text',
+    },
+    disableCompress: {
+        type: 'boolean',
+    },
+    loading: {
+        type: 'string',
+        enum: ['eager', 'lazy'],
+    },
+    fetchPriority: {
+        type: 'string',
+        enum: ['high', 'low', 'auto'],
+    },
+};
+const StyleBase = {
+    type: 'object',
+    additionalProperties: false,
+    required: [],
+    properties: {
+        backgroundColor: { type: 'string' },
+        height: { type: ['string', 'number'] },
+        width: { type: ['string', 'number'] },
+        color: { type: 'string' },
+    },
+};
+export const ImageDeviceProps = {
+    type: 'object',
+    additionalProperties: false,
+    required: ['desktop', 'mobile'],
+    properties: Object.assign(Object.assign({}, ImageBase), { desktop: { type: 'string', pattern: imageUrlPattern }, tablet: {
+            type: 'string',
+            pattern: imageUrlPattern,
+        }, mobile: {
+            type: 'string',
+            pattern: imageUrlPattern,
+        } }),
+};
+export const ImageBaseObjectProps = {
+    type: 'object',
+    additionalProperties: false,
+    properties: Object.assign(Object.assign({}, ImageBase), { src: {
+            type: 'string',
+            pattern: imageUrlPattern,
+        }, style: StyleBase }),
+};
+export const ImageObjectProps = Object.assign(Object.assign({}, ImageBaseObjectProps), { required: ['src'] });
+export const ImageProps = {
+    oneOf: [
+        {
+            type: 'string',
+            pattern: imageUrlPattern,
+            optionName: 'url',
+        },
+        filteredItem(Object.assign(Object.assign({}, ImageObjectProps), { optionName: 'options' })),
+        filteredItem(Object.assign(Object.assign({}, ImageDeviceProps), { optionName: 'device options' })),
+        {
+            type: 'array',
+            items: filteredItem(Object.assign({}, ImageObjectProps)),
+            optionName: 'options list',
+        },
+        {
+            type: 'array',
+            items: filteredItem(Object.assign({}, ImageDeviceProps)),
+            optionName: 'device options list',
+        },
+    ],
+};
+export const BackgroundImageProps = {
+    anyOf: [
+        Object.assign(Object.assign({}, ImageBaseObjectProps), { optionName: 'options' }),
+        Object.assign(Object.assign({}, ImageDeviceProps), { optionName: 'device options' }),
+    ],
+};

package/build/esm/components/ImageBase/ImageBase.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties, MouseEventHandler, ReactEventHandler } from 'react';
+import { ImageObjectProps } from '../../models';
+export interface ImageBaseProps extends Partial<ImageObjectProps> {
+    style?: CSSProperties;
+    className?: string;
+    onClick?: MouseEventHandler;
+    onLoad?: ReactEventHandler<HTMLDivElement>;
+    onError?: () => void;
+}
+export declare const ImageBase: ({ fetchPriority, alt, ...props }: ImageBaseProps) => JSX.Element;
+export default ImageBase;

package/build/esm/components/ImageBase/ImageBase.js

@@ -0,0 +1,14 @@
+import { __rest } from "tslib";
+import React from 'react';
+import { ImageContext } from '../../context/imageContext/imageContext';
+export const ImageBase = (_a) => {
+    var { fetchPriority, alt } = _a, props = __rest(_a, ["fetchPriority", "alt"]);
+    const { Image } = React.useContext(ImageContext);
+    return Image ? (React.createElement(Image, Object.assign({ fetchPriority: fetchPriority, alt: alt }, props))) : (
+    // There is an issue with fetchpriority attr in img in React.
+    // It is still not supported. However it's nice to have ability to manage
+    // this prop is good to have to improve Core Web Vitals.
+    // So, here is a workaround to assign the attr.
+    React.createElement("img", Object.assign({}, { fetchpriority: fetchPriority }, { alt: alt }, props)));
+};
+export default ImageBase;

package/build/esm/components/InfiniteScroll/InfiniteScroll.d.ts

@@ -0,0 +1,7 @@
+type InfiniteScrollProps = {
+    onNext?: () => void;
+    preventiveLoadFactor?: number;
+    hasMore?: boolean;
+};
+export declare const InfiniteScroll: ({ hasMore, onNext, preventiveLoadFactor, }: InfiniteScrollProps) => JSX.Element | null;
+export default InfiniteScroll;

package/build/esm/components/InfiniteScroll/InfiniteScroll.js

@@ -0,0 +1,31 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import { supportsPassiveEvents } from 'detect-passive-events';
+export const InfiniteScroll = ({ hasMore, onNext, preventiveLoadFactor = 0.5, }) => {
+    const moreEl = useRef(null);
+    const isBottomEdge = useCallback((node) => {
+        const rect = node.getBoundingClientRect();
+        const height = window.innerHeight;
+        // element factor (default is half) window height down
+        return rect.top - height < height * preventiveLoadFactor;
+    }, [preventiveLoadFactor]);
+    const handleScroll = useCallback(() => {
+        if (!moreEl.current) {
+            return;
+        }
+        if (isBottomEdge(moreEl.current)) {
+            onNext === null || onNext === void 0 ? void 0 : onNext();
+        }
+    }, [onNext, isBottomEdge]);
+    useEffect(() => {
+        handleScroll();
+        window.addEventListener('scroll', handleScroll, supportsPassiveEvents ? { passive: true } : undefined);
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+        };
+    }, [handleScroll]);
+    if (!hasMore) {
+        return null;
+    }
+    return React.createElement("div", { ref: moreEl });
+};
+export default InfiniteScroll;

package/build/esm/components/InnerForm/InnerForm.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { FormBlockData } from '../../models';
+interface InnerFormProps {
+    formData: FormBlockData;
+    onContentLoad: () => void;
+    className?: string;
+}
+declare const InnerForm: React.FC<InnerFormProps>;
+export default InnerForm;

package/build/esm/components/InnerForm/InnerForm.js

@@ -0,0 +1,32 @@
+import { __rest } from "tslib";
+import React, { useContext, useEffect } from 'react';
+import { YandexForm } from '..';
+import { FormsContext, } from '../../context/formsContext/FormsContext';
+import { useTheme } from '../../context/theme';
+import { isHubspotDataForm, isYandexDataForm } from '../../models';
+import { HubspotForm } from '../../sub-blocks';
+import { getThemedValue } from '../../utils';
+const InnerForm = (props) => {
+    const { formData, onContentLoad, className } = props;
+    const formsConfig = useContext(FormsContext);
+    const theme = useTheme();
+    useEffect(() => {
+        if (isHubspotDataForm(formData)) {
+            onContentLoad();
+        }
+    }, [onContentLoad, formData]);
+    if (isYandexDataForm(formData)) {
+        const _a = getThemedValue(formData.yandex, theme), { onLoad } = _a, rest = __rest(_a, ["onLoad"]);
+        return (React.createElement("div", { className: className },
+            React.createElement(YandexForm, Object.assign({}, formsConfig.yandex, rest, { onLoad: () => {
+                    onContentLoad();
+                    onLoad === null || onLoad === void 0 ? void 0 : onLoad();
+                } }))));
+    }
+    if (isHubspotDataForm(formData)) {
+        const themedFormData = getThemedValue(formData.hubspot, theme);
+        return (React.createElement(HubspotForm, Object.assign({ createDOMElement: true }, formsConfig.hubspot, themedFormData)));
+    }
+    return null;
+};
+export default InnerForm;

package/build/esm/components/Link/Link.css

@@ -0,0 +1,71 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-link-block {
+  margin-top: 16px;
+}
+.pc-link-block__link {
+  outline: none;
+  color: var(--g-color-text-link);
+  text-decoration: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  border-radius: var(--g-focus-border-radius);
+}
+.utilityfocus .pc-link-block__link:focus {
+  outline: 2px solid #ffdb4d;
+}
+.pc-link-block__link:hover, .pc-link-block__link:active {
+  --pc-text-header-color: var(--g-color-text-link-hover);
+  color: var(--g-color-text-link-hover);
+}
+.pc-link-block__link:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-link-block__link:focus:not(:focus-visible) {
+  outline: 0;
+}
+.pc-link-block__link_theme_dark {
+  color: var(--g-color-text-light-primary);
+}
+.pc-link-block__link_theme_dark:hover {
+  color: var(--g-color-text-light-secondary);
+}
+.pc-link-block__link_has-arrow {
+  display: inherit;
+  white-space: nowrap;
+}
+.pc-link-block__link_has-arrow:hover, .pc-link-block__link_has-arrow:active {
+  --pc-text-header-color: inherit;
+  color: var(--g-color-text-link);
+}
+.pc-link-block__link_has-arrow .pc-link-block__content {
+  white-space: normal;
+}
+.pc-link-block__link:hover .pc-link-block__arrow {
+  transform: translateX(5px);
+}
+.pc-link-block__link.pc-link-block__link_has-arrow.pc-link-block__link_theme_dark:hover {
+  color: var(--g-color-text-light-primary);
+}
+.pc-link-block__arrow {
+  position: relative;
+  top: 2px;
+  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+.pc-link-block_size_l {
+  font-size: var(--g-text-body-3-font-size, var(--pc-text-body-3-font-size));
+  line-height: var(--g-text-body-3-line-height, var(--pc-text-body-3-line-height));
+}
+.pc-link-block_size_m {
+  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-link-block_size_m .pc-link-block__arrow {
+  top: 1px;
+}
+.pc-link-block_size_s {
+  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));
+}

package/build/esm/components/Link/Link.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ClassNameProps, LinkProps, Tabbable } from '../../models';
+import { QAProps } from '../../models/common';
+import './Link.css';
+export type LinkFullProps = LinkProps & ClassNameProps & Tabbable & QAProps;
+declare const LinkBlock: (props: React.PropsWithChildren<LinkFullProps>) => JSX.Element;
+export default LinkBlock;

package/build/esm/components/Link/Link.js

@@ -0,0 +1,59 @@
+import React, { Fragment, useContext } from 'react';
+import { ChevronRight } from '@gravity-ui/icons';
+import { Icon } from '@gravity-ui/uikit';
+import { LocaleContext } from '../../context/localeContext';
+import { LocationContext } from '../../context/locationContext';
+import { useAnalytics } from '../../hooks';
+import { DefaultEventNames } from '../../models';
+import { block, getLinkProps, setUrlTld } from '../../utils';
+import { getQaAttrubutes } from '../../utils/index';
+import BackLink from '../BackLink/BackLink';
+import FileLink from '../FileLink/FileLink';
+import './Link.css';
+const b = block('link-block');
+const WORD_JOINER_SYM = '\u200b';
+function getArrowSize(size) {
+    switch (size) {
+        case 'l':
+            return 20;
+        case 'm':
+            return 18;
+        case 's':
+            return 14;
+        default:
+            return 14;
+    }
+}
+const LinkBlock = (props) => {
+    const { text, url, arrow, analyticsEvents, theme = 'file-link', colorTheme = 'light', textSize = 'm', className, target, children, tabIndex, qa, urlTitle, extraProps, } = props;
+    const qaAttributes = getQaAttrubutes(qa, ['normal']);
+    const handleAnalytics = useAnalytics(DefaultEventNames.Link, url);
+    const { hostname } = useContext(LocationContext);
+    const { tld } = useContext(LocaleContext);
+    const href = setUrlTld(props.url, tld);
+    const defaultTextSize = theme === 'back' ? 'l' : 'm';
+    const onClick = () => {
+        handleAnalytics(analyticsEvents);
+    };
+    const getLinkByType = () => {
+        switch (theme) {
+            case 'back':
+                return (React.createElement(BackLink, { title: children || text, url: href, onClick: onClick, tabIndex: tabIndex, extraProps: extraProps }));
+            case 'file-link':
+            case 'underline':
+                return (React.createElement(FileLink, { text: children || text, href: href, type: "horizontal", textSize: textSize, onClick: onClick, tabIndex: tabIndex, extraProps: extraProps }));
+            case 'normal': {
+                const linkProps = getLinkProps(url, hostname, target);
+                const content = children || text;
+                return (React.createElement("a", Object.assign({ className: b('link', { theme: colorTheme, 'has-arrow': arrow }), href: href, onClick: onClick, tabIndex: tabIndex, title: urlTitle }, linkProps, { "data-qa": qaAttributes.normal }, extraProps), arrow ? (React.createElement(Fragment, null,
+                    React.createElement("span", { className: b('content') }, content),
+                    WORD_JOINER_SYM,
+                    React.createElement(Icon, { className: b('arrow'), data: ChevronRight, size: getArrowSize(textSize) }))) : (content)));
+            }
+            default:
+                return null;
+        }
+    };
+    return (React.createElement("div", { className: b({ size: textSize || defaultTextSize }, className) }, getLinkByType()));
+};
+export default LinkBlock;