@gravity-ui/page-constructor 1.26.0 → 1.26.2-alpha.0

package/build/esm/components/Map/YMap/YandexMap.js

@@ -13,8 +13,12 @@ import { getMapHeight } from '../helpers';
 const b = block('map');
 const DEFAULT_CONTAINER_ID = 'ymap';
 const DEFAULT_ZOOM = 9;
+// Center - is a required parameter for creating a new map
+// We use this init center to create a map
+// The real center of the map will be calculated later, using the coordinates of the markers
+const INITIAL_CENTER = [0, 0];
 const YandexMap = (props) => {
-    const { markers, zoom, center, id } = props;
+    const { markers, zoom, id } = props;
     const { apiKey, scriptSrc, nonce } = useContext(MapsContext);
     const isMobile = useContext(MobileContext);
     const { lang = 'ru' } = useContext(LocaleContext);
@@ -23,6 +27,7 @@ const YandexMap = (props) => {
     const [height, setHeight] = useState(undefined);
     const ref = useRef(null);
     const [loading, setLoading] = useState(false);
+    const [ready, setReady] = useState(false);
     const [attemptsIndex, setAttemptsIndex] = useState(0);
     const onTryAgain = useCallback(() => {
         setAttemptsIndex(attemptsIndex + 1);
@@ -30,20 +35,17 @@ const YandexMap = (props) => {
     useEffect(() => {
         (async function () {
             var _a;
-            if (!center) {
-                return;
-            }
             setLoading(true);
             await YMapsApiLoader.loadApi(apiKey, scriptSrc, lang, nonce);
             (_a = window.ymaps) === null || _a === void 0 ? void 0 : _a.ready(() => {
                 setYmaps(new YMap(new window.ymaps.Map(containerId, {
-                    center,
+                    center: INITIAL_CENTER,
                     zoom: zoom || DEFAULT_ZOOM,
                 }, { autoFitToViewport: 'always' }), ref.current));
             });
             setLoading(false);
         })();
-    }, [apiKey, lang, scriptSrc, containerId, zoom, center, nonce, attemptsIndex, setLoading]);
+    }, [apiKey, lang, scriptSrc, containerId, zoom, nonce, attemptsIndex, setLoading]);
     useEffect(() => {
         const updateSize = _.debounce(() => {
             if (ref.current) {
@@ -58,12 +60,19 @@ const YandexMap = (props) => {
     }, [markers, ymap, setYmaps, isMobile]);
     useEffect(() => {
         if (ymap) {
-            ymap.showPlacemarks(markers);
+            // show with computed center and placemarks
+            const showPlacemarks = async () => {
+                await ymap.showPlacemarks({ markers, zoom });
+                setReady(true);
+            };
+            showPlacemarks();
         }
     });
-    if (!center)
+    if (!markers)
         return null;
     return (React.createElement(ErrorWrapper, { isError: YMapsApiLoader.status === MapApiStatus.Error, text: i18n('map-load-error'), buttonText: i18n('map-try-again'), handler: onTryAgain, className: b('wrapper') },
-        React.createElement("div", { id: containerId, className: b(), ref: ref, style: { height } }, loading ? React.createElement(Spin, { size: "xl", className: b('spinner') }) : null)));
+        React.createElement("div", { className: b('wrapper') },
+            React.createElement("div", { id: containerId, className: b({ hidden: !ready }), ref: ref, style: { height } }),
+            loading ? React.createElement(Spin, { size: "xl", className: b('spinner') }) : null)));
 };
 export default YandexMap;

package/build/esm/components/ReactPlayer/utils.js

@@ -1,19 +1,20 @@
 // the file serves to support live video with react-player@2.9
 const LIVE_YUOTUBE_VIDEO_REGEX = /(?:youtu\.be\/live\/|youtube(?:-nocookie)?\.com\/(?:live\/))((\w|-){11})/;
 const YOUTUBE_VIDEO_TEMPLATE = 'https://www.youtube.com/watch?v=';
+const transformYoutubeUrl = (src) => {
+    var _a;
+    if (LIVE_YUOTUBE_VIDEO_REGEX.test(src)) {
+        const youtubeLiveId = (_a = src.match(LIVE_YUOTUBE_VIDEO_REGEX)) === null || _a === void 0 ? void 0 : _a[1];
+        if (!youtubeLiveId) {
+            return src;
+        }
+        return `${YOUTUBE_VIDEO_TEMPLATE}${youtubeLiveId}`;
+    }
+    return src;
+};
 export const checkYoutubeVideos = (src) => {
     if (Array.isArray(src)) {
-        return src.map((videoUrl) => {
-            var _a;
-            if (LIVE_YUOTUBE_VIDEO_REGEX.test(videoUrl)) {
-                const youtubeLiveId = (_a = videoUrl.match(LIVE_YUOTUBE_VIDEO_REGEX)) === null || _a === void 0 ? void 0 : _a[1];
-                if (!youtubeLiveId) {
-                    return videoUrl;
-                }
-                return `${YOUTUBE_VIDEO_TEMPLATE}${youtubeLiveId}`;
-            }
-            return videoUrl;
-        });
+        return src.map((videoUrl) => transformYoutubeUrl(videoUrl));
     }
-    return src;
+    return transformYoutubeUrl(src);
 };

package/build/esm/components/Title/Title.css

@@ -1,4 +1,4 @@
-.pc-title-block_size_l, .pc-title-block_size_m, .pc-title-block_size_s {
+.pc-title-block_size_l, .pc-title-block_size_m, .pc-title-block_size_s, .pc-title-block_size_xs {
   margin: 0;
 }
 
@@ -10,6 +10,12 @@ unpredictable css rules order in build */
 .pc-title-block_justify_end {
   text-align: right;
 }
+.pc-title-block_size_xs {
+  font-size: var(--yc-text-body-3-font-size);
+  line-height: var(--yc-text-body-3-line-height);
+  color: var(--pc-text-header-color);
+  font-weight: var(--yc-text-accent-font-weight);
+}
 .pc-title-block_size_s {
   font-size: var(--yc-text-header-1-font-size);
   line-height: var(--yc-text-header-1-line-height);
@@ -44,10 +50,13 @@ unpredictable css rules order in build */
   }
 }
 .pc-title-block__arrow {
-  margin: 8px 0 0 4px;
+  margin-top: 10px;
+}
+.pc-title-block__arrow_size_xs {
+  margin-top: 7px;
 }
 .pc-title-block__arrow_size_s {
-  margin: 4px 0 0 4px;
+  margin-top: 5px;
 }
 .pc-title-block__link {
   color: inherit;
@@ -62,7 +71,10 @@ unpredictable css rules order in build */
   cursor: pointer;
 }
 .pc-title-block__link:hover .pc-title-block__arrow {
-  margin-left: 12px;
+  margin-left: 10px;
+}
+.pc-title-block__link:hover .pc-title-block__arrow_size_xs {
+  margin-left: 6px;
 }
 .pc-title-block__link:hover .pc-title-block__arrow_size_s {
   margin-left: 8px;
@@ -90,7 +102,10 @@ unpredictable css rules order in build */
   margin-top: 0;
 }
 @media (max-width: 577px) {
-  .pc-title-block_size_l {
+  .pc-title-block_size_l:not(.pc-title-block_reset-margin) {
     margin-top: 48px;
   }
+  .pc-title-block__arrow_size_m, .pc-title-block__arrow_size_l {
+    margin-top: 9px;
+  }
 }

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

@@ -1,6 +1,6 @@
 import { TextSize, TitleProps } from '../../models';
 import './Title.css';
-export declare function getArrowSize(size: TextSize, isMobile: boolean): 16 | 20 | 24;
+export declare function getArrowSize(size: TextSize, isMobile: boolean): 16 | 13 | 20 | 24 | 22 | 26 | 38;
 export interface TitleFullProps extends TitleProps {
     className?: string;
     onClick?: () => void;

package/build/esm/components/Title/Title.js

@@ -8,12 +8,14 @@ import './Title.css';
 const b = block('title-block');
 export function getArrowSize(size, isMobile) {
     switch (size) {
+        case 'xs':
+            return 13;
         case 's':
             return 16;
         case 'm':
-            return isMobile ? 20 : 24;
+            return isMobile ? 22 : 24;
         case 'l':
-            return isMobile ? 20 : 24;
+            return isMobile ? 26 : 38;
         default:
             return 20;
     }

package/build/esm/models/constructor-items/common.d.ts

@@ -38,7 +38,7 @@ export declare enum MediaVideoControlsType {
     Custom = "custom"
 }
 export type TextTheme = 'light' | 'dark';
-export type TextSize = 's' | 'm' | 'l';
+export type TextSize = 'xs' | 's' | 'm' | 'l';
 export type DividerSize = '0' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';
 export type HeaderWidth = 's' | 'm' | 'l';
 export type HeaderImageSize = 's' | 'm';
@@ -130,20 +130,22 @@ export interface FileLinkProps extends ClassNameProps {
     theme?: ContentTheme;
     onClick?: () => void;
 }
+export type ButtonTheme = ButtonView | 'github' | 'app-store' | 'google-play' | 'scale' | 'monochrome';
 export interface ButtonProps extends AnalyticsEventsBase {
     text: string;
     url: string;
     primary?: boolean;
     size?: ButtonSize;
-    theme?: ButtonView | 'github' | 'app-store' | 'google-play' | 'scale' | 'monochrome';
+    theme?: ButtonTheme;
     img?: ButtonImageProps | string;
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: ButtonPixel;
     target?: string;
 }
+export type ButtonImagePosition = 'left' | 'right';
 export interface ButtonImageProps {
     url: string;
-    position?: 'left' | 'right';
+    position?: ButtonImagePosition;
     alt?: string;
 }
 export interface PlayButtonProps extends ClassNameProps {
@@ -189,7 +191,6 @@ export interface MediaProps extends Animatable, Partial<MediaComponentDataLensPr
 export type Coordinate = number[];
 export interface MapBaseProps {
     zoom?: number;
-    center?: Coordinate;
 }
 export interface GMapProps extends MapBaseProps {
     address: string;
@@ -197,7 +198,6 @@ export interface GMapProps extends MapBaseProps {
 export interface YMapProps extends MapBaseProps {
     markers: YMapMarker[];
     id: string;
-    center: Coordinate;
 }
 export interface YMapMarker {
     address?: string;

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

@@ -7,6 +7,7 @@ import { ItemColumnName } from '../../constants';
 import { NavigationListItem } from '../NavigationListItem/NavigationListItem';
 import './Navigation.css';
 const b = block('navigation');
+const EVENT_HANDLE_DELAY = 100;
 const Navigation = ({ className, onActiveItemChange, links, activeItemId, highlightActiveItem, }) => {
     const { asPath, pathname } = useContext(LocationContext);
     const itemRefs = useRef([]);
@@ -22,21 +23,21 @@ const Navigation = ({ className, onActiveItemChange, links, activeItemId, highli
         }
     }, []);
     useEffect(() => {
-        const debouncedCalculateItemPositions = _.debounce(calculateItemPositions, 100);
-        const calculateOnScroll = _.debounce(() => {
+        const debouncedCalculateItemPositions = _.debounce(calculateItemPositions, EVENT_HANDLE_DELAY);
+        const debouncedCalculateOnScroll = _.debounce(() => {
             const curLeftScroll = window.pageXOffset;
             if (curLeftScroll !== lastLeftScroll) {
                 setLastLeftScroll(window.pageXOffset);
                 calculateItemPositions();
             }
-        }, 100);
+        }, EVENT_HANDLE_DELAY);
         calculateItemPositions();
         setLastLeftScroll(window.pageXOffset);
         window.addEventListener('resize', debouncedCalculateItemPositions);
-        window.addEventListener('scroll', calculateOnScroll);
+        window.addEventListener('scroll', debouncedCalculateOnScroll);
         return () => {
-            window.removeEventListener(`resize`, calculateItemPositions);
-            window.removeEventListener('scroll', calculateOnScroll);
+            window.removeEventListener(`resize`, debouncedCalculateItemPositions);
+            window.removeEventListener('scroll', debouncedCalculateOnScroll);
         };
     }, [calculateItemPositions, itemRefs, lastLeftScroll]);
     useEffect(() => {

package/build/esm/schema/validators/common.d.ts

@@ -1168,12 +1168,6 @@ export declare const MapProps: {
     zoom: {
         type: string;
     };
-    center: {
-        type: string;
-        items: {
-            type: string;
-        };
-    };
     address: {
         type: string;
     };

package/build/esm/schema/validators/common.js

@@ -489,10 +489,6 @@ export const MapProps = {
     zoom: {
         type: 'number',
     },
-    center: {
-        type: 'array',
-        items: { type: 'number' },
-    },
     address: {
         type: 'string',
     },

package/build/esm/sub-blocks/BannerCard/BannerCard.css

@@ -70,9 +70,10 @@ unpredictable css rules order in build */
   font-weight: var(--yc-text-accent-font-weight);
   font-weight: normal;
 }
-.pc-banner-card__button {
+.pc-banner-card__button.pc-banner-card__button {
   margin-top: 28px;
 }
+
 .pc-banner-card__image {
   border-top-right-radius: var(--pc-border-radius);
   border-bottom-right-radius: var(--pc-border-radius);

package/build/esm/sub-blocks/Content/Content.css

@@ -31,6 +31,9 @@ unpredictable css rules order in build */
   margin-top: 0;
   margin-right: 12px;
 }
+.pc-content__button.pc-content__button:last-child {
+  margin-right: 0;
+}
 
 .pc-content__links {
   display: flex;
@@ -41,6 +44,9 @@ unpredictable css rules order in build */
   display: block;
   margin-right: 32px;
 }
+.pc-content__link:last-child {
+  margin-right: 0;
+}
 .pc-content_centered.pc-content_centered {
   margin: 0 auto;
   text-align: center;

package/build/esm/sub-blocks/HubspotForm/HubspotForm.css

@@ -268,6 +268,7 @@ unpredictable css rules order in build */
 .pc-hubspot-form .hs-button.primary {
   margin: 0;
   padding: 0;
+  font-family: var(--yc-text-body-font-family);
   font-size: inherit;
   font-weight: 400;
   color: inherit;

package/build/esm/utils/blocks.d.ts

@@ -1,6 +1,6 @@
 import { ConstructorBlock } from '../models/constructor';
 import { TextSize, CustomConfig, PCShareSocialNetwork } from '../models';
-export declare function getHeaderTag(size: TextSize): "h1" | "h2" | "h4";
+export declare function getHeaderTag(size: TextSize): "h1" | "h2" | "h4" | "h5";
 export declare function getBlockKey(block: ConstructorBlock, index: number): string;
 export declare const getCustomBlockTypes: ({ blocks, headers }?: CustomConfig) => string[];
 export declare const getCustomItems: ({ blocks, headers, subBlocks }?: CustomConfig) => {

package/build/esm/utils/blocks.js

@@ -5,6 +5,8 @@ export function getHeaderTag(size) {
             return 'h1';
         case 's':
             return 'h4';
+        case 'xs':
+            return 'h5';
         case 'm':
         default:
             return 'h2';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "1.26.0",
+  "version": "1.26.2-alpha.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {
@@ -61,8 +61,8 @@
     "uuid": "^9.0.0"
   },
   "peerDependencies": {
-    "react": "^16.0.0 || ^17.0.0",
-    "@gravity-ui/uikit": "^3.11.0",
+    "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+    "@gravity-ui/uikit": "^4.1.0",
     "@doc-tools/transform": "^2.6.1"
   },
   "devDependencies": {
@@ -73,19 +73,20 @@
     "@gravity-ui/prettier-config": "^1.0.1",
     "@gravity-ui/stylelint-config": "^1.0.0",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^3.11.0",
+    "@gravity-ui/uikit": "^4.1.0",
     "@storybook/addon-actions": "^6.3.12",
     "@storybook/addon-essentials": "^6.5.10",
     "@storybook/addon-knobs": "^6.3.1",
     "@storybook/addon-viewport": "^6.3.12",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^6.5.10",
+    "@storybook/react": "^6.5.16",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^29.2.4",
     "@types/lodash": "^4.14.176",
-    "@types/react": "^16.14.20",
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
     "@types/react-slick": "^0.23.7",
     "@types/react-transition-group": "^4.4.4",
     "@types/sanitize-html": "^2.6.0",

package/server/models/constructor-items/common.d.ts

@@ -38,7 +38,7 @@ export declare enum MediaVideoControlsType {
     Custom = "custom"
 }
 export type TextTheme = 'light' | 'dark';
-export type TextSize = 's' | 'm' | 'l';
+export type TextSize = 'xs' | 's' | 'm' | 'l';
 export type DividerSize = '0' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';
 export type HeaderWidth = 's' | 'm' | 'l';
 export type HeaderImageSize = 's' | 'm';
@@ -130,20 +130,22 @@ export interface FileLinkProps extends ClassNameProps {
     theme?: ContentTheme;
     onClick?: () => void;
 }
+export type ButtonTheme = ButtonView | 'github' | 'app-store' | 'google-play' | 'scale' | 'monochrome';
 export interface ButtonProps extends AnalyticsEventsBase {
     text: string;
     url: string;
     primary?: boolean;
     size?: ButtonSize;
-    theme?: ButtonView | 'github' | 'app-store' | 'google-play' | 'scale' | 'monochrome';
+    theme?: ButtonTheme;
     img?: ButtonImageProps | string;
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: ButtonPixel;
     target?: string;
 }
+export type ButtonImagePosition = 'left' | 'right';
 export interface ButtonImageProps {
     url: string;
-    position?: 'left' | 'right';
+    position?: ButtonImagePosition;
     alt?: string;
 }
 export interface PlayButtonProps extends ClassNameProps {
@@ -189,7 +191,6 @@ export interface MediaProps extends Animatable, Partial<MediaComponentDataLensPr
 export type Coordinate = number[];
 export interface MapBaseProps {
     zoom?: number;
-    center?: Coordinate;
 }
 export interface GMapProps extends MapBaseProps {
     address: string;
@@ -197,7 +198,6 @@ export interface GMapProps extends MapBaseProps {
 export interface YMapProps extends MapBaseProps {
     markers: YMapMarker[];
     id: string;
-    center: Coordinate;
 }
 export interface YMapMarker {
     address?: string;

package/server/utils/blocks.d.ts

@@ -1,6 +1,6 @@
 import { ConstructorBlock } from '../models/constructor';
 import { TextSize, CustomConfig, PCShareSocialNetwork } from '../models';
-export declare function getHeaderTag(size: TextSize): "h1" | "h2" | "h4";
+export declare function getHeaderTag(size: TextSize): "h1" | "h2" | "h4" | "h5";
 export declare function getBlockKey(block: ConstructorBlock, index: number): string;
 export declare const getCustomBlockTypes: ({ blocks, headers }?: CustomConfig) => string[];
 export declare const getCustomItems: ({ blocks, headers, subBlocks }?: CustomConfig) => {

package/server/utils/blocks.js

@@ -8,6 +8,8 @@ function getHeaderTag(size) {
             return 'h1';
         case 's':
             return 'h4';
+        case 'xs':
+            return 'h5';
         case 'm':
         default:
             return 'h2';

package/styles/mixins.scss

@@ -141,15 +141,17 @@
 }
 
 @mixin label($size: m) {
-    @include text-size(body-1);
+    @if $size == m {
+        @include text-size(body-1);
 
-    $label-height: 20px;
+        $label-height: 20px;
 
-    display: inline-block;
-    padding: 0 8px;
-    border-radius: 2px;
-    height: $label-height;
-    line-height: $label-height;
+        display: inline-block;
+        padding: 0 8px;
+        border-radius: 2px;
+        height: $label-height;
+        line-height: $label-height;
+    }
 
     @if $size == s {
         @include text-size(caption-2);