@gravity-ui/page-constructor 4.24.0-alpha.0 → 4.24.0

package/build/esm/components/ReactPlayer/CustomBarControls.css

@@ -55,11 +55,10 @@ unpredictable css rules order in build */
   background: #eff2f8;
 }
 .pc-CustomBarControls__button_type_with-mute-button:focus {
-  outline: 2px solid var(--g-color-line-focus);
-  outline-offset: 0;
+  outline: 2px solid var(--g-color-line-misc);
 }
 .pc-CustomBarControls__button_type_with-mute-button:focus:not(:focus-visible) {
-  outline: 0;
+  outline: none;
 }
 .pc-CustomBarControls__button_type_with-play-pause-button {
   width: 42px;
@@ -68,11 +67,10 @@ unpredictable css rules order in build */
   background: var(--g-color-base-background);
 }
 .pc-CustomBarControls__button_type_with-play-pause-button:focus {
-  outline: 2px solid var(--g-color-line-focus);
-  outline-offset: 0;
+  outline: 2px solid var(--g-color-line-misc);
 }
 .pc-CustomBarControls__button_type_with-play-pause-button:focus:not(:focus-visible) {
-  outline: 0;
+  outline: none;
 }
 .pc-CustomBarControls__play-icon_type_with-play-pause-button {
   height: 16px;

package/build/esm/components/ReactPlayer/ReactPlayer.css

@@ -27,13 +27,6 @@ unpredictable css rules order in build */
   height: 64px;
   border-radius: 166px;
 }
-.pc-ReactPlayer__button:focus {
-  outline: 2px solid var(--g-color-line-focus);
-  outline-offset: 0;
-}
-.pc-ReactPlayer__button:focus:not(:focus-visible) {
-  outline: 0;
-}
 .pc-ReactPlayer__button_theme_blue {
   color: var(--g-color-base-background);
   background-color: var(--g-color-base-brand);

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

@@ -216,7 +216,7 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
         }, className), ref: ref, onClick: handleClick, onMouseEnter: onFocusIn, onMouseLeave: onFocusOut, onFocus: onFocusIn, onBlur: onFocusOut }, isMounted ? (React.createElement(Fragment, null,
         React.createElement(ReactPlayer, { className: b('player'), url: videoSrc, muted: muted, controls: controls === MediaVideoControlsType.Default, height: currentHeight || '100%', width: width || '100%', light: previewImgUrl, playing: isPlaying, playIcon: playIcon, progressInterval: FPS, onClickPreview: handleClickPreview, onStart: onStart, onReady: setPlayerRef, onPlay: onPlay, onPause: autoPlay && customControlsType !== CustomControlsType.WithMuteButton
                 ? undefined
-                : onPause, onProgress: onProgress, onEnded: onEnded, "aria-label": ariaLabel, previewTabIndex: -1 }),
+                : onPause, onProgress: onProgress, onEnded: onEnded, "aria-label": ariaLabel }),
         controls === MediaVideoControlsType.Custom && (React.createElement(CustomBarControls, { className: customBarControlsClassName, mute: {
                 isMuted: muted,
                 changeMute: (event) => {

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

@@ -62,19 +62,11 @@ unpredictable css rules order in build */
   color: inherit;
   text-decoration: none;
   padding-right: 8px;
-  border-radius: var(--g-focus-border-radius);
 }
 .pc-title-item__link:hover, .pc-title-item__link:active {
   --pc-text-header-color: inherit;
   color: inherit;
 }
-.pc-title-item__link:focus {
-  outline: 2px solid var(--g-color-line-focus);
-  outline-offset: 0;
-}
-.pc-title-item__link:focus:not(:focus-visible) {
-  outline: 0;
-}
 .pc-title-item__link:hover {
   cursor: pointer;
 }

package/build/esm/components/VideoBlock/VideoBlock.css

@@ -43,13 +43,6 @@ unpredictable css rules order in build */
   background-color: var(--g-color-base-brand);
   border-radius: 50%;
 }
-.pc-VideoBlock__button:focus {
-  outline: 2px solid var(--g-color-line-focus);
-  outline-offset: 0;
-}
-.pc-VideoBlock__button:focus:not(:focus-visible) {
-  outline: 0;
-}
 .pc-VideoBlock__icon {
   margin-left: 6px;
 }

package/build/esm/containers/PageConstructor/PageConstructor.css

@@ -41,14 +41,12 @@ unpredictable css rules order in build */
   --pc-color-base-gold: #ffdb4d;
   --pc-color-base-asphalt: #313538;
   --pc-color-base-copper: #ffe6c4;
-  --g-color-line-focus: var(--g-color-text-brand);
 }
 .g-root_theme_dark {
   --pc-color-base-silver: #bcc0c4;
   --pc-color-base-gold: #ffde5d;
   --pc-color-base-asphalt: #474d52;
   --pc-color-base-copper: #7f7262;
-  --g-color-line-focus: var(--g-color-text-light-primary);
 }
 .g-root.g-root_theme_dark {
   --pc-color-sfx-shadow: var(--g-color-sfx-shadow);
@@ -126,7 +124,6 @@ unpredictable css rules order in build */
   color: var(--g-color-text-link);
   text-decoration: none;
   cursor: pointer;
-  border-radius: var(--g-focus-border-radius);
 }
 .utilityfocus .yfm_constructor a:focus {
   outline: 2px solid #ffdb4d;
@@ -135,12 +132,6 @@ unpredictable css rules order in build */
   --pc-text-header-color: var(--g-color-text-link-hover);
   color: var(--g-color-text-link-hover);
 }
-.yfm_constructor a:focus {
-  box-shadow: 0 0 0 2px var(--g-color-line-focus);
-}
-.yfm_constructor a:focus:not(:focus-visible) {
-  box-shadow: none;
-}
 .yfm_constructor table {
   color: var(--g-color-text-primary);
   border: 1px solid var(--g-color-line-generic);

package/build/esm/schema/constants.d.ts

@@ -1053,6 +1053,9 @@ export declare const cardSchemas: {
             fullscreen: {
                 type: string;
             };
+            ratio: {
+                type: string;
+            };
             border: {
                 type: string;
                 enum: string[];

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

@@ -1321,6 +1321,9 @@ export declare const MediaProps: {
             };
         })[];
     };
+    ratio: {
+        type: string;
+    };
 };
 export declare const YMapMarkerLabel: {
     type: string;

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

@@ -517,6 +517,9 @@ export const MediaProps = {
     analyticsEvents: {
         anyOf: [AnalyticsEventSchema, { type: 'array', items: AnalyticsEventSchema }],
     },
+    ratio: {
+        type: 'number',
+    },
 };
 export const YMapMarkerLabel = {
     type: 'object',

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

@@ -4,9 +4,6 @@
 
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-banner-card_theme_dark {
-  --g-color-line-focus: var(--g-color-text-light-primary);
-}
 .pc-banner-card_theme_dark.pc-banner-card_theme_dark .pc-banner-card__title,
 .pc-banner-card_theme_dark.pc-banner-card_theme_dark .pc-banner-card__subtitle {
   color: var(--g-color-text-light-primary);

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

@@ -91,9 +91,6 @@ unpredictable css rules order in build */
 .pc-content_size_l .pc-content__button {
   margin-top: 12px;
 }
-.pc-content_theme_dark {
-  --g-color-line-focus: var(--g-color-text-light-primary);
-}
 .pc-content_theme_dark .pc-content__title *,
 .pc-content_theme_dark .pc-content__text .yfm,
 .pc-content_theme_dark .pc-content__text .yfm *,

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

@@ -301,13 +301,6 @@ unpredictable css rules order in build */
   white-space: nowrap;
   appearance: none;
 }
-.pc-hubspot-form .hs-button.primary:focus {
-  outline: 2px solid var(--g-color-line-focus);
-  outline-offset: 1px;
-}
-.pc-hubspot-form .hs-button.primary:focus:not(:focus-visible) {
-  outline: 0;
-}
 .pc-hubspot-form .hs-button.primary:hover {
   background-color: var(--g-color-base-brand-hover);
 }

package/build/esm/sub-blocks/LayoutItem/schema.d.ts

@@ -243,6 +243,9 @@ export declare const LayoutItem: {
                     };
                 })[];
             };
+            ratio: {
+                type: string;
+            };
         };
         content: Partial<{
             title: {

package/build/esm/sub-blocks/MediaCard/schema.d.ts

@@ -248,6 +248,9 @@ export declare const MediaCardBlock: {
             fullscreen: {
                 type: string;
             };
+            ratio: {
+                type: string;
+            };
             border: {
                 type: string;
                 enum: string[];

package/build/esm/sub-blocks/PriceDetailed/PriceDetails/PriceDetails.css

@@ -23,29 +23,11 @@ unpredictable css rules order in build */
   margin: auto 10px;
 }
 .pc-price-details__foldable_title {
-  font-size: var(--g-text-body-2-font-size);
-  line-height: var(--g-text-body-2-line-height);
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-  font: inherit;
-  border: none;
-  outline: none;
-  color: inherit;
-  background: none;
-  cursor: pointer;
   cursor: pointer;
   display: flex;
-  align-items: center;
   font-weight: 400;
-  border-radius: var(--g-focus-border-radius);
-}
-.pc-price-details__foldable_title:focus {
-  outline: 2px solid var(--g-color-line-focus);
-  outline-offset: 0;
-}
-.pc-price-details__foldable_title:focus:not(:focus-visible) {
-  outline: 0;
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
 }
 .pc-price-details__foldable_title_color_cornflower {
   color: var(--g-color-text-link);

package/build/esm/sub-blocks/PriceDetailed/PriceDetails/PriceDetails.js

@@ -26,7 +26,7 @@ const PriceDetails = (props) => {
         return React.createElement("div", { className: b('foldable_block') }, getPriceDetails());
     };
     const getFoldableTitle = () => {
-        return (React.createElement("button", { className: b('foldable_title', { color: foldableColor, size: foldableSize }), onClick: toggleOpen, "aria-expanded": isOpened },
+        return (React.createElement("div", { className: b('foldable_title', { color: foldableColor, size: foldableSize }), onClick: toggleOpen },
             foldableTitle,
             React.createElement(ToggleArrow, { open: isOpened, size: 14, type: 'vertical', className: b('arrow') })));
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "4.24.0-alpha.0",
+  "version": "4.24.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {

package/styles/mixins.scss

@@ -8,26 +8,6 @@
     line-height: var(--g-text-#{$name}-line-height);
 }
 
-@mixin focusable($offset: 0, $mode: 'outline') {
-    @if $mode == 'outline' {
-        &:focus {
-            outline: 2px solid var(--g-color-line-focus);
-            outline-offset: $offset;
-        }
-        &:focus:not(:focus-visible) {
-            outline: 0;
-        }
-    }
-    @if $mode == 'box-shadow' {
-        &:focus {
-            box-shadow: 0 0 0 2px var(--g-color-line-focus);
-        }
-        &:focus:not(:focus-visible) {
-            box-shadow: none;
-        }
-    }
-}
-
 @mixin link() {
     @include islands-focus();
 

package/styles/root.scss

@@ -37,12 +37,10 @@
 
     &_theme_light {
         @include pc-colors-light;
-        --g-color-line-focus: var(--g-color-text-brand);
     }
 
     &_theme_dark {
         @include pc-colors-dark;
-        --g-color-line-focus: var(--g-color-text-light-primary);
     }
 
     &.g-root_theme_dark {

package/styles/styles.css

@@ -70,7 +70,6 @@ unpredictable css rules order in build */
   color: var(--g-color-text-link);
   text-decoration: none;
   cursor: pointer;
-  border-radius: var(--g-focus-border-radius);
 }
 .utilityfocus .yfm_constructor a:focus {
   outline: 2px solid #ffdb4d;
@@ -79,12 +78,6 @@ unpredictable css rules order in build */
   --pc-text-header-color: var(--g-color-text-link-hover);
   color: var(--g-color-text-link-hover);
 }
-.yfm_constructor a:focus {
-  box-shadow: 0 0 0 2px var(--g-color-line-focus);
-}
-.yfm_constructor a:focus:not(:focus-visible) {
-  box-shadow: none;
-}
 .yfm_constructor table {
   color: var(--g-color-text-primary);
   border: 1px solid var(--g-color-line-generic);

package/styles/yfm.scss

@@ -85,8 +85,6 @@
 
     a {
         @include link();
-        @include focusable(0, 'box-shadow');
-        border-radius: var(--g-focus-border-radius);
     }
 
     table {