@doyourjob/gravity-ui-page-constructor 5.31.86-b → 5.31.87

package/build/cjs/blocks/Header/Header.css

@@ -6,6 +6,7 @@
 unpredictable css rules order in build */
 .pc-header-block {
   position: relative;
+  z-index: 1;
 }
 .pc-header-block_full-width {
   --pc-border-radius: 0;

package/build/cjs/blocks/HighlightTable/HighlightTable.css

@@ -91,6 +91,7 @@ unpredictable css rules order in build */
   margin-top: -5px;
   border-radius: 2px;
   background-color: var(--g-color-private-black-150);
+  display: none;
 }
 @media (max-width: 769px) {
   .pc-highlight-table-block__scrollbar {

package/build/cjs/blocks/HighlightTable/HighlightTable.js

@@ -37,7 +37,7 @@ const HighlightTableBlock = ({ title, description, table, legend = [], contentSi
         if (!tableContentElem || !blockElem)
             return () => { };
         const updateSizes = (0, debounce_1.default)(() => {
-            const width = Math.max(672, blockElem.clientWidth - 24 - 2); // 24 - padding, 2 - border
+            const width = Math.max(648, blockElem.clientWidth - 24 - 2); // 24 - padding, 2 - border
             tableContentElem.style.setProperty('--block-width', `${width}px`);
         });
         updateSizes();
@@ -53,6 +53,14 @@ const HighlightTableBlock = ({ title, description, table, legend = [], contentSi
         if (!tableElem || !scrollBar || !scrollThumb)
             return () => { };
         const updateProgress = (0, debounce_1.default)(() => {
+            if (tableElem.clientWidth === tableElem.scrollWidth) {
+                if (scrollBar.style.getPropertyValue('display') !== 'none') {
+                    scrollBar.style.setProperty('display', `none`);
+                }
+            }
+            else if (scrollBar.style.getPropertyValue('display') !== 'block') {
+                scrollBar.style.setProperty('display', `block`);
+            }
             const scrollWidth = Math.round(scrollBar.clientWidth * (tableElem.clientWidth / tableElem.scrollWidth));
             const scrollLeft = Math.round(scrollBar.clientWidth * (tableElem.scrollLeft / tableElem.scrollWidth));
             scrollThumb.style.setProperty('transform', `translateX(${scrollLeft}px)`);

package/build/cjs/blocks/ReportsSections/ReportsSections.css

@@ -3,6 +3,16 @@ unpredictable css rules order in build */
 .pc-reports-sections-block__title {
   margin-bottom: 24px;
 }
+@media (min-width: 769px) {
+  .pc-reports-sections-block__wrap-sections.pc-AnimateBlock .pc-reports-sections-block__sections, .pc-AnimateBlock .pc-reports-sections-block__wrap-sections .pc-reports-sections-block__sections {
+    opacity: 0;
+  }
+  .pc-reports-sections-block__wrap-sections.pc-AnimateBlock.animate .pc-reports-sections-block__sections, .pc-AnimateBlock .pc-reports-sections-block__wrap-sections.animate .pc-reports-sections-block__sections {
+    opacity: 1;
+    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    transition-delay: 0s;
+  }
+}
 .pc-reports-sections-block__sections {
   display: flex;
   flex-direction: column;

package/build/cjs/blocks/ReportsSections/ReportsSections.js

@@ -30,7 +30,8 @@ const ReportsSectionsBlock = ({ title, typeKey, empty }) => {
     return (react_1.default.createElement("div", { className: b() },
         title && react_1.default.createElement(components_1.Title, { className: b('title'), title: titleProps, colSizes: titleColSizes }),
         react_1.default.createElement(FilterSelects_1.default, { selects: selects, filters: localFilters, handleChange: handleChange }),
-        filteredItems.length ? (react_1.default.createElement("div", { className: b('sections') }, filteredItems.map((item, index) => (react_1.default.createElement(Section_1.default, Object.assign({ key: index }, item)))))) : (react_1.default.createElement(components_1.EmptyPlug, { empty: empty, className: b('empty') }))));
+        filteredItems.length ? (react_1.default.createElement(components_1.AnimateBlock, { key: JSON.stringify(localFilters), className: b('wrap-sections'), animate: true },
+            react_1.default.createElement("div", { className: b('sections') }, filteredItems.map((item, index) => (react_1.default.createElement(Section_1.default, Object.assign({ key: index }, item))))))) : (react_1.default.createElement(components_1.EmptyPlug, { empty: empty, className: b('empty') }))));
 };
 exports.ReportsSectionsBlock = ReportsSectionsBlock;
 exports.default = exports.ReportsSectionsBlock;

package/build/cjs/blocks/Slider/Slider.css

@@ -118,25 +118,6 @@ unpredictable css rules order in build */
 .pc-SliderBlock .slick-arrow.slick-prev {
   right: 42px;
 }
-.pc-SliderBlock__slick-mobile {
-  display: none;
-}
-.pc-SliderBlock__mobile-scroll {
-  display: flex;
-  margin: 0 -24px;
-  padding: 24px;
-  gap: 16px;
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-  scrollbar-width: none;
-}
-.pc-SliderBlock__mobile-scroll::-webkit-scrollbar {
-  display: none;
-}
-.pc-SliderBlock__mobile-scroll-item {
-  flex: 0 0 auto;
-  width: 90%;
-}
 .pc-SliderBlock__header_no-description {
   position: relative;
   top: -3px;
@@ -672,6 +653,26 @@ unpredictable css rules order in build */
 .pc-SliderBlock_type_header-card .slick-arrow.slick-prev {
   left: 0;
 }
+@media (max-width: 577px) {
+  .pc-SliderBlock_type_header-card .slick-arrow {
+    display: none;
+  }
+  .pc-SliderBlock_type_header-card.pc-SliderBlock:not(.pc-SliderBlock_type_header-card_one-slide) .slick-list {
+    margin-left: 0;
+  }
+  .pc-SliderBlock_type_header-card.pc-SliderBlock:not(.pc-SliderBlock_type_header-card_one-slide) .slick-track {
+    padding-left: 0;
+  }
+  .pc-SliderBlock_type_header-card.pc-SliderBlock:not(.pc-SliderBlock_type_header-card_one-slide) .slick-slide {
+    /* stylelint-disable declaration-no-important */
+    padding-right: 0 !important;
+    padding-left: 0 !important;
+    /* stylelint-enable declaration-no-important */
+  }
+  .pc-SliderBlock_type_header-card.pc-SliderBlock:not(.pc-SliderBlock_type_header-card_one-slide) .slick-slide:last-child {
+    padding-right: 0;
+  }
+}
 @media (max-width: 769px) {
   .pc-SliderBlock__footer {
     display: block;
@@ -683,10 +684,20 @@ unpredictable css rules order in build */
   }
 }
 @media (max-width: 577px) {
-  .pc-SliderBlock__slick {
-    display: none;
+  .pc-SliderBlock:not(.pc-SliderBlock_one-slide) {
+    margin-left: -24px;
+    padding-left: 24px;
+    width: calc(100% + 48px);
+    overflow-x: auto;
   }
-  .pc-SliderBlock__slick-mobile {
-    display: block;
+  .pc-SliderBlock:not(.pc-SliderBlock_one-slide) .slick-list {
+    margin-left: -24px;
+    margin-right: 0;
+  }
+  .pc-SliderBlock:not(.pc-SliderBlock_one-slide) .slick-track {
+    padding-left: 16px;
+  }
+  .pc-SliderBlock:not(.pc-SliderBlock_one-slide) .slick-slide {
+    padding: 0 8px;
   }
 }

package/build/cjs/blocks/Slider/Slider.js

@@ -269,15 +269,11 @@ const SliderBlock = (props) => {
             lazyLoad,
             accessibility: false,
         };
-        return (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(OutsideClick_1.default, { className: b('slick'), onOutsideClick: isMobile ? unsetFocus : noop_1.default },
-                react_1.default.createElement(react_slick_1.default, Object.assign({}, settings), disclosedChildren),
-                react_1.default.createElement("div", { className: b('footer') },
-                    renderDisclaimer(),
-                    renderNavigation())),
-            react_1.default.createElement("div", { className: b('slick-mobile') },
-                react_1.default.createElement("div", { className: b('mobile-scroll') }, disclosedChildren.map((child, index) => (react_1.default.createElement("div", { key: index, className: b('mobile-scroll-item') }, child)))),
-                react_1.default.createElement("div", { className: b('footer') }, renderDisclaimer()))));
+        return (react_1.default.createElement(OutsideClick_1.default, { onOutsideClick: isMobile ? unsetFocus : noop_1.default },
+            react_1.default.createElement(react_slick_1.default, Object.assign({}, settings), disclosedChildren),
+            react_1.default.createElement("div", { className: b('footer') },
+                renderDisclaimer(),
+                renderNavigation())));
     };
     return (react_1.default.createElement(StylesContext_1.StylesContext.Provider, { value: Object.assign(Object.assign({}, childStyles), { setStyles: setChildStyles }) },
         react_1.default.createElement("div", { className: b({

package/build/cjs/components/Filters/FilterSelect/FilterSelect.css

@@ -7,6 +7,9 @@ unpredictable css rules order in build */
   max-height: 500px;
   border-radius: 12px;
 }
+.pc-filter-select__popup .g-select-list {
+  scrollbar-width: none;
+}
 .pc-filter-select__popup .g-select-list::-webkit-scrollbar {
   display: none;
 }

package/build/esm/blocks/Header/Header.css

@@ -6,6 +6,7 @@
 unpredictable css rules order in build */
 .pc-header-block {
   position: relative;
+  z-index: 1;
 }
 .pc-header-block_full-width {
   --pc-border-radius: 0;

package/build/esm/blocks/HighlightTable/HighlightTable.css

@@ -91,6 +91,7 @@ unpredictable css rules order in build */
   margin-top: -5px;
   border-radius: 2px;
   background-color: var(--g-color-private-black-150);
+  display: none;
 }
 @media (max-width: 769px) {
   .pc-highlight-table-block__scrollbar {

package/build/esm/blocks/HighlightTable/HighlightTable.js

@@ -34,7 +34,7 @@ export const HighlightTableBlock = ({ title, description, table, legend = [], co
         if (!tableContentElem || !blockElem)
             return () => { };
         const updateSizes = debounce(() => {
-            const width = Math.max(672, blockElem.clientWidth - 24 - 2); // 24 - padding, 2 - border
+            const width = Math.max(648, blockElem.clientWidth - 24 - 2); // 24 - padding, 2 - border
             tableContentElem.style.setProperty('--block-width', `${width}px`);
         });
         updateSizes();
@@ -50,6 +50,14 @@ export const HighlightTableBlock = ({ title, description, table, legend = [], co
         if (!tableElem || !scrollBar || !scrollThumb)
             return () => { };
         const updateProgress = debounce(() => {
+            if (tableElem.clientWidth === tableElem.scrollWidth) {
+                if (scrollBar.style.getPropertyValue('display') !== 'none') {
+                    scrollBar.style.setProperty('display', `none`);
+                }
+            }
+            else if (scrollBar.style.getPropertyValue('display') !== 'block') {
+                scrollBar.style.setProperty('display', `block`);
+            }
             const scrollWidth = Math.round(scrollBar.clientWidth * (tableElem.clientWidth / tableElem.scrollWidth));
             const scrollLeft = Math.round(scrollBar.clientWidth * (tableElem.scrollLeft / tableElem.scrollWidth));
             scrollThumb.style.setProperty('transform', `translateX(${scrollLeft}px)`);

package/build/esm/blocks/ReportsSections/ReportsSections.css

@@ -3,6 +3,16 @@ unpredictable css rules order in build */
 .pc-reports-sections-block__title {
   margin-bottom: 24px;
 }
+@media (min-width: 769px) {
+  .pc-reports-sections-block__wrap-sections.pc-AnimateBlock .pc-reports-sections-block__sections, .pc-AnimateBlock .pc-reports-sections-block__wrap-sections .pc-reports-sections-block__sections {
+    opacity: 0;
+  }
+  .pc-reports-sections-block__wrap-sections.pc-AnimateBlock.animate .pc-reports-sections-block__sections, .pc-AnimateBlock .pc-reports-sections-block__wrap-sections.animate .pc-reports-sections-block__sections {
+    opacity: 1;
+    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    transition-delay: 0s;
+  }
+}
 .pc-reports-sections-block__sections {
   display: flex;
   flex-direction: column;

package/build/esm/blocks/ReportsSections/ReportsSections.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useContext, useMemo, useState } from 'react';
-import { EmptyPlug, Title } from '../../components';
+import { AnimateBlock, EmptyPlug, Title } from '../../components';
 import FilterSelects from '../../components/Filters/FilterSelects/FilterSelects';
 import { ReportsSectionsContext } from '../../context/reportsSectionsContext';
 import { block } from '../../utils';
@@ -27,6 +27,7 @@ export const ReportsSectionsBlock = ({ title, typeKey, empty }) => {
     return (React.createElement("div", { className: b() },
         title && React.createElement(Title, { className: b('title'), title: titleProps, colSizes: titleColSizes }),
         React.createElement(FilterSelects, { selects: selects, filters: localFilters, handleChange: handleChange }),
-        filteredItems.length ? (React.createElement("div", { className: b('sections') }, filteredItems.map((item, index) => (React.createElement(Section, Object.assign({ key: index }, item)))))) : (React.createElement(EmptyPlug, { empty: empty, className: b('empty') }))));
+        filteredItems.length ? (React.createElement(AnimateBlock, { key: JSON.stringify(localFilters), className: b('wrap-sections'), animate: true },
+            React.createElement("div", { className: b('sections') }, filteredItems.map((item, index) => (React.createElement(Section, Object.assign({ key: index }, item))))))) : (React.createElement(EmptyPlug, { empty: empty, className: b('empty') }))));
 };
 export default ReportsSectionsBlock;

package/build/esm/blocks/Slider/Slider.css

@@ -118,25 +118,6 @@ unpredictable css rules order in build */
 .pc-SliderBlock .slick-arrow.slick-prev {
   right: 42px;
 }
-.pc-SliderBlock__slick-mobile {
-  display: none;
-}
-.pc-SliderBlock__mobile-scroll {
-  display: flex;
-  margin: 0 -24px;
-  padding: 24px;
-  gap: 16px;
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-  scrollbar-width: none;
-}
-.pc-SliderBlock__mobile-scroll::-webkit-scrollbar {
-  display: none;
-}
-.pc-SliderBlock__mobile-scroll-item {
-  flex: 0 0 auto;
-  width: 90%;
-}
 .pc-SliderBlock__header_no-description {
   position: relative;
   top: -3px;
@@ -672,6 +653,26 @@ unpredictable css rules order in build */
 .pc-SliderBlock_type_header-card .slick-arrow.slick-prev {
   left: 0;
 }
+@media (max-width: 577px) {
+  .pc-SliderBlock_type_header-card .slick-arrow {
+    display: none;
+  }
+  .pc-SliderBlock_type_header-card.pc-SliderBlock:not(.pc-SliderBlock_type_header-card_one-slide) .slick-list {
+    margin-left: 0;
+  }
+  .pc-SliderBlock_type_header-card.pc-SliderBlock:not(.pc-SliderBlock_type_header-card_one-slide) .slick-track {
+    padding-left: 0;
+  }
+  .pc-SliderBlock_type_header-card.pc-SliderBlock:not(.pc-SliderBlock_type_header-card_one-slide) .slick-slide {
+    /* stylelint-disable declaration-no-important */
+    padding-right: 0 !important;
+    padding-left: 0 !important;
+    /* stylelint-enable declaration-no-important */
+  }
+  .pc-SliderBlock_type_header-card.pc-SliderBlock:not(.pc-SliderBlock_type_header-card_one-slide) .slick-slide:last-child {
+    padding-right: 0;
+  }
+}
 @media (max-width: 769px) {
   .pc-SliderBlock__footer {
     display: block;
@@ -683,10 +684,20 @@ unpredictable css rules order in build */
   }
 }
 @media (max-width: 577px) {
-  .pc-SliderBlock__slick {
-    display: none;
+  .pc-SliderBlock:not(.pc-SliderBlock_one-slide) {
+    margin-left: -24px;
+    padding-left: 24px;
+    width: calc(100% + 48px);
+    overflow-x: auto;
   }
-  .pc-SliderBlock__slick-mobile {
-    display: block;
+  .pc-SliderBlock:not(.pc-SliderBlock_one-slide) .slick-list {
+    margin-left: -24px;
+    margin-right: 0;
+  }
+  .pc-SliderBlock:not(.pc-SliderBlock_one-slide) .slick-track {
+    padding-left: 16px;
+  }
+  .pc-SliderBlock:not(.pc-SliderBlock_one-slide) .slick-slide {
+    padding: 0 8px;
   }
 }

package/build/esm/blocks/Slider/Slider.js

@@ -266,15 +266,11 @@ export const SliderBlock = (props) => {
             lazyLoad,
             accessibility: false,
         };
-        return (React.createElement(React.Fragment, null,
-            React.createElement(OutsideClick, { className: b('slick'), onOutsideClick: isMobile ? unsetFocus : noop },
-                React.createElement(SlickSlider, Object.assign({}, settings), disclosedChildren),
-                React.createElement("div", { className: b('footer') },
-                    renderDisclaimer(),
-                    renderNavigation())),
-            React.createElement("div", { className: b('slick-mobile') },
-                React.createElement("div", { className: b('mobile-scroll') }, disclosedChildren.map((child, index) => (React.createElement("div", { key: index, className: b('mobile-scroll-item') }, child)))),
-                React.createElement("div", { className: b('footer') }, renderDisclaimer()))));
+        return (React.createElement(OutsideClick, { onOutsideClick: isMobile ? unsetFocus : noop },
+            React.createElement(SlickSlider, Object.assign({}, settings), disclosedChildren),
+            React.createElement("div", { className: b('footer') },
+                renderDisclaimer(),
+                renderNavigation())));
     };
     return (React.createElement(StylesContext.Provider, { value: Object.assign(Object.assign({}, childStyles), { setStyles: setChildStyles }) },
         React.createElement("div", { className: b({

package/build/esm/components/Filters/FilterSelect/FilterSelect.css

@@ -7,6 +7,9 @@ unpredictable css rules order in build */
   max-height: 500px;
   border-radius: 12px;
 }
+.pc-filter-select__popup .g-select-list {
+  scrollbar-width: none;
+}
 .pc-filter-select__popup .g-select-list::-webkit-scrollbar {
   display: none;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@doyourjob/gravity-ui-page-constructor",
-  "version": "5.31.86-b",
+  "version": "5.31.87",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {