@doyourjob/gravity-ui-page-constructor 5.31.16

package/build/esm/blocks/Tabs/schema.js

@@ -0,0 +1,38 @@
+import omit from 'lodash/omit';
+import { ImageProps } from '../../components/Image/schema';
+import { BlockBaseProps, BlockHeaderProps, LinkProps, MediaProps, containerSizesArray, contentSizes, mediaDirection, sizeNumber, withTheme, } from '../../schema/validators/common';
+import { filteredArray } from '../../schema/validators/utils';
+import { ContentBase } from '../../sub-blocks/Content/schema';
+const TabsItemContentProps = omit(ContentBase, ['size', 'colSizes', 'centered', 'theme']);
+export const tabsItem = {
+    type: 'object',
+    additionalProperties: false,
+    required: ['tabName'],
+    properties: Object.assign(Object.assign({}, TabsItemContentProps), { tabName: {
+            type: 'string',
+        }, caption: {
+            type: 'string',
+            contentType: 'text',
+        }, media: withTheme({
+            type: 'object',
+            properties: MediaProps,
+        }), 
+        //TODO deprecated
+        link: LinkProps, image: withTheme(ImageProps), border: {
+            type: 'string',
+            enum: ['shadow', 'line', 'none'],
+        } }),
+};
+export const TabsBlock = {
+    'tabs-block': {
+        additionalProperties: false,
+        required: ['title', 'items'],
+        properties: Object.assign(Object.assign(Object.assign({}, BlockBaseProps), BlockHeaderProps), { tabsColSizes: containerSizesArray.reduce((acc, size) => (Object.assign(Object.assign({}, acc), { [size]: sizeNumber })), {}), direction: {
+                type: 'string',
+                enum: mediaDirection,
+            }, centered: { type: 'boolean' }, items: filteredArray(tabsItem), contentSize: {
+                type: 'string',
+                enum: contentSizes,
+            } }),
+    },
+};

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

@@ -0,0 +1,26 @@
+export { default as BannerBlock } from './Banner/Banner';
+export { default as CompaniesBlock } from './Companies/Companies';
+export { default as InfoBlock } from './Info/Info';
+export { default as MediaBlock } from './Media/Media';
+export { default as MapBlock } from './Map/Map';
+export { default as SliderBlock } from './Slider/Slider';
+export { default as ExtendedFeaturesBlock } from './ExtendedFeatures/ExtendedFeatures';
+export { default as PromoFeaturesBlock } from './PromoFeaturesBlock/PromoFeaturesBlock';
+export { default as QuestionsBlock } from './Questions/Questions';
+export { default as TableBlock } from './Table/Table';
+export { default as TabsBlock } from './Tabs/Tabs';
+export { default as HeaderBlock } from './Header/Header';
+export { default as IconsBlock } from './Icons/Icons';
+export { default as HeaderSliderBlock } from './HeaderSlider/HeaderSlider';
+export { default as CardLayoutBlock } from './CardLayout/CardLayout';
+export { default as ContentLayoutBlock } from './ContentLayout/ContentLayout';
+export { default as ShareBlock } from './Share/Share';
+export { default as FilterBlock } from './FilterBlock/FilterBlock';
+export { default as FormBlock } from './Form/Form';
+export { default as MarqueeLinksBlock } from './MarqueeLinks/MarqueeLinks';
+export { default as SolutionsBlock } from './Solutions/Solutions';
+export { default as ServicesBlock } from './Services/Services';
+export { default as QuotesBlock } from './Quotes/Quotes';
+export { default as LinkTableBlock } from './LinkTable/LinkTable';
+export { default as EventsFeedBlock } from './EventsFeed/EventsFeed';
+export { default as PressReleasesBlock } from './PressReleases/PressReleases';

package/build/esm/blocks/index.js

@@ -0,0 +1,26 @@
+export { default as BannerBlock } from './Banner/Banner';
+export { default as CompaniesBlock } from './Companies/Companies';
+export { default as InfoBlock } from './Info/Info';
+export { default as MediaBlock } from './Media/Media';
+export { default as MapBlock } from './Map/Map';
+export { default as SliderBlock } from './Slider/Slider';
+export { default as ExtendedFeaturesBlock } from './ExtendedFeatures/ExtendedFeatures';
+export { default as PromoFeaturesBlock } from './PromoFeaturesBlock/PromoFeaturesBlock';
+export { default as QuestionsBlock } from './Questions/Questions';
+export { default as TableBlock } from './Table/Table';
+export { default as TabsBlock } from './Tabs/Tabs';
+export { default as HeaderBlock } from './Header/Header';
+export { default as IconsBlock } from './Icons/Icons';
+export { default as HeaderSliderBlock } from './HeaderSlider/HeaderSlider';
+export { default as CardLayoutBlock } from './CardLayout/CardLayout';
+export { default as ContentLayoutBlock } from './ContentLayout/ContentLayout';
+export { default as ShareBlock } from './Share/Share';
+export { default as FilterBlock } from './FilterBlock/FilterBlock';
+export { default as FormBlock } from './Form/Form';
+export { default as MarqueeLinksBlock } from './MarqueeLinks/MarqueeLinks';
+export { default as SolutionsBlock } from './Solutions/Solutions';
+export { default as ServicesBlock } from './Services/Services';
+export { default as QuotesBlock } from './Quotes/Quotes';
+export { default as LinkTableBlock } from './LinkTable/LinkTable';
+export { default as EventsFeedBlock } from './EventsFeed/EventsFeed';
+export { default as PressReleasesBlock } from './PressReleases/PressReleases';

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

@@ -0,0 +1 @@
+export { default as SliderNewBlock } from './SliderNew/Slider';

package/build/esm/blocks/unstable.js

@@ -0,0 +1 @@
+export { default as SliderNewBlock } from './SliderNew/Slider';

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

@@ -0,0 +1,16 @@
+export * from './Banner/schema';
+export * from './CardLayout/schema';
+export * from './Companies/schema';
+export * from './ContentLayout/schema';
+export * from './ExtendedFeatures/schema';
+export * from './Header/schema';
+export * from './HeaderSlider/schema';
+export * from './Icons/schema';
+export * from './Info/schema';
+export * from './Media/schema';
+export * from './PromoFeaturesBlock/schema';
+export * from './Questions/schema';
+export * from './Slider/schema';
+export * from './Table/schema';
+export * from './Share/schema';
+export * from './MarqueeLinks/schema';

package/build/esm/blocks/validators.js

@@ -0,0 +1,16 @@
+export * from './Banner/schema';
+export * from './CardLayout/schema';
+export * from './Companies/schema';
+export * from './ContentLayout/schema';
+export * from './ExtendedFeatures/schema';
+export * from './Header/schema';
+export * from './HeaderSlider/schema';
+export * from './Icons/schema';
+export * from './Info/schema';
+export * from './Media/schema';
+export * from './PromoFeaturesBlock/schema';
+export * from './Questions/schema';
+export * from './Slider/schema';
+export * from './Table/schema';
+export * from './Share/schema';
+export * from './MarqueeLinks/schema';

package/build/esm/components/Anchor/Anchor.css

@@ -0,0 +1,8 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-Anchor {
+  display: block;
+  position: relative;
+  top: calc(-1 * var(--header-height) - var(--anchor-offset, 0px));
+  visibility: hidden;
+}

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

@@ -0,0 +1,8 @@
+import { ClassNameProps, QAProps } from '../../models';
+import './Anchor.css';
+export declare const qaIdByDefault = "qa-anchor";
+export interface AnchorProps extends ClassNameProps, QAProps {
+    id: string;
+}
+declare const Anchor: ({ id, className, qa }: AnchorProps) => JSX.Element;
+export default Anchor;

package/build/esm/components/Anchor/Anchor.js

@@ -0,0 +1,8 @@
+//TODO move to cloud components
+import React from 'react';
+import { block } from '../../utils';
+import './Anchor.css';
+const b = block('Anchor');
+export const qaIdByDefault = 'qa-anchor';
+const Anchor = ({ id, className, qa }) => (React.createElement("div", { id: id, className: b(null, className), "data-qa": qa || qaIdByDefault }));
+export default Anchor;

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

@@ -0,0 +1,12 @@
+import React, { CSSProperties } from 'react';
+import { AnimateContextProps } from '../../context/animateContext/AnimateContext';
+import { QAProps } from '../../models';
+export interface AnimateBlockProps extends AnimateContextProps, QAProps {
+    animate?: boolean;
+    offset?: number;
+    className?: string;
+    style?: CSSProperties;
+    onScroll?: () => void;
+}
+declare const AnimateBlock: (props: React.PropsWithChildren<AnimateBlockProps>) => JSX.Element;
+export default AnimateBlock;

package/build/esm/components/AnimateBlock/AnimateBlock.js

@@ -0,0 +1,26 @@
+import React, { useContext, useState } from 'react';
+import { Waypoint } from 'react-waypoint';
+import { AnimateContext } from '../../context/animateContext/AnimateContext';
+import { block } from '../../utils';
+const b = block('AnimateBlock');
+const AnimateBlock = (props) => {
+    const { animated } = useContext(AnimateContext);
+    const { children, className, offset = 100, onScroll, style, animate = animated, qa } = props;
+    const [playAnimation, setPlayAnimation] = useState(false);
+    const divClassName = animate
+        ? b(null, `${playAnimation && 'animate'} ${className}`)
+        : className;
+    return (React.createElement("div", { className: divClassName, style: style, "data-qa": qa },
+        React.createElement(Waypoint
+        // trigger animation if element is above screen
+        , { 
+            // trigger animation if element is above screen
+            topOffset: '-100000%', bottomOffset: offset, onEnter: async () => {
+                setPlayAnimation(true);
+                if (onScroll) {
+                    onScroll();
+                }
+            } }),
+        children));
+};
+export default AnimateBlock;

package/build/esm/components/Author/Author.css

@@ -0,0 +1,58 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-author {
+  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));
+  display: flex;
+  flex-direction: column;
+}
+.pc-author__avatar {
+  width: 80px;
+  height: 80px;
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+  border-radius: 16px;
+  overflow: hidden;
+}
+.pc-author__avatar img {
+  width: 80px;
+  height: 80px;
+  object-fit: cover;
+  display: block;
+}
+.pc-author__name {
+  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-author__description {
+  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-secondary);
+  padding-top: 4px;
+}
+.pc-author__label:not(:first-child) {
+  font-weight: 400;
+  margin-top: 8px;
+}
+.pc-author_type_column {
+  z-index: 1;
+  position: relative;
+}
+.pc-author_type_line {
+  flex-flow: row nowrap;
+  align-items: center;
+  width: 100%;
+}
+.pc-author_type_line .pc-author__avatar {
+  margin: 0;
+}
+.pc-author_type_line .pc-author__label {
+  margin-top: 0;
+}
+.pc-author_type_line .pc-author__label:not(:first-child) {
+  margin-left: 16px;
+}
+.pc-author_theme_dark .pc-author__description {
+  color: var(--g-color-text-light-secondary);
+}

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

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

package/build/esm/components/Author/Author.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { AuthorType } from '../../models';
+import { block } from '../../utils';
+import { getMediaImage } from '../Media/Image/utils';
+import { Image } from '../index';
+import './Author.css';
+const b = block('author');
+const Author = (props) => {
+    const { author, className, authorContainerClassName, type = AuthorType.Column, qa, theme, } = props;
+    const { firstName, secondName, description, avatar } = author;
+    const name = secondName ? `${firstName} ${secondName}` : firstName;
+    const isAvatarJSX = React.isValidElement(avatar);
+    let avatarProps = {};
+    if (!isAvatarJSX && avatar) {
+        avatarProps = getMediaImage(avatar);
+    }
+    return (React.createElement("div", { className: b({ type, theme }, className), "data-qa": qa },
+        avatar && (React.createElement("div", { className: b('avatar', authorContainerClassName) }, isAvatarJSX ? avatar : React.createElement(Image, Object.assign({}, avatarProps)))),
+        React.createElement("div", { className: b('label') },
+            React.createElement("div", { className: b('name') }, name),
+            description && React.createElement("div", { className: b('description') }, description))));
+};
+export default Author;

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

@@ -0,0 +1,58 @@
+export declare const author: {
+    author: {
+        additionalProperties: boolean;
+        required: string[];
+        properties: {
+            asides: {};
+            author: {
+                type: string;
+                required: string[];
+                properties: {
+                    firstName: {
+                        type: string;
+                        contentType: string;
+                    };
+                    secondName: {
+                        type: string;
+                        contentType: string;
+                    };
+                    avatar: {
+                        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;
+                        })[];
+                    };
+                    description: {
+                        type: string;
+                        contentType: string;
+                    };
+                };
+            };
+            type: {};
+            when: {
+                type: string;
+            };
+        };
+    };
+};

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

@@ -0,0 +1,8 @@
+import { BaseProps, authorItem } from '../../schema/validators/common';
+export const author = {
+    author: {
+        additionalProperties: false,
+        required: ['author'],
+        properties: Object.assign(Object.assign({}, BaseProps), { asides: {}, author: authorItem }),
+    },
+};

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

@@ -0,0 +1,15 @@
+import { HTMLProps, ReactNode } from 'react';
+import { ButtonSize } from '@gravity-ui/uikit';
+import { Tabbable } from '../../models';
+export type Theme = 'default' | 'special';
+export interface BackLinkProps<T = HTMLElement> extends Tabbable {
+    url: string;
+    title: ReactNode;
+    theme?: Theme;
+    size?: ButtonSize;
+    className?: string;
+    shouldHandleBackAction?: boolean;
+    onClick?: () => void;
+    extraProps?: HTMLProps<T>;
+}
+export default function BackLink(props: BackLinkProps): JSX.Element;

package/build/esm/components/BackLink/BackLink.js

@@ -0,0 +1,29 @@
+import React, { useCallback, useContext } from 'react';
+import { ArrowLeft } from '@gravity-ui/icons';
+import { Button, Icon } from '@gravity-ui/uikit';
+import { LocationContext } from '../../context/locationContext';
+import { useAnalytics } from '../../hooks';
+import { DefaultEventNames } from '../../models';
+export default function BackLink(props) {
+    const { history } = useContext(LocationContext);
+    const { url, title, theme = 'default', size = 'l', className, shouldHandleBackAction = false, onClick, tabIndex, extraProps, } = props;
+    const handleAnalytics = useAnalytics(DefaultEventNames.ShareButton, url);
+    const backActionHandler = useCallback(async () => {
+        handleAnalytics();
+        if (!history) {
+            return;
+        }
+        if (onClick) {
+            onClick();
+        }
+        if (history.length > 1) {
+            history.goBack();
+        }
+        else {
+            history.push({ pathname: url });
+        }
+    }, [handleAnalytics, history, onClick, url]);
+    return (React.createElement(Button, { className: className, view: theme === 'special' ? 'flat-contrast' : 'flat-secondary', size: size, href: shouldHandleBackAction ? undefined : url, onClick: shouldHandleBackAction ? backActionHandler : undefined, tabIndex: tabIndex, extraProps: extraProps },
+        React.createElement(Icon, { data: ArrowLeft, size: 20 }),
+        React.createElement("span", null, title)));
+}

package/build/esm/components/BackgroundImage/BackgroundImage.css

@@ -0,0 +1,16 @@
+.pc-storage-background-image {
+  position: relative;
+  overflow: hidden;
+}
+.pc-storage-background-image__img {
+  left: 0;
+  top: 0;
+  pointer-events: none;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.pc-storage-background-image__container {
+  position: relative;
+}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { BackgroundImageProps } from '../../models';
+import './BackgroundImage.css';
+export declare const qaIdByDefault = "background-image";
+declare const BackgroundImage: (props: React.PropsWithChildren<BackgroundImageProps>) => JSX.Element;
+export default BackgroundImage;

package/build/esm/components/BackgroundImage/BackgroundImage.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { block, getQaAttrubutes } from '../../utils';
+import Image from '../Image/Image';
+import './BackgroundImage.css';
+export const qaIdByDefault = 'background-image';
+const b = block('storage-background-image');
+const BackgroundImage = (props) => {
+    const { children, src, desktop, className, imageClassName, style, hide, qa } = props;
+    const qaAttributes = getQaAttrubutes(qa || qaIdByDefault);
+    return (React.createElement("div", { className: b(null, className), style: style, "data-qa": qa || qaIdByDefault },
+        (src || desktop) && !hide && (React.createElement(Image, Object.assign({}, props, { className: b('img', imageClassName), qa: qaAttributes.image }))),
+        children && React.createElement("div", { className: b('container') }, children)));
+};
+export default BackgroundImage;

package/build/esm/components/BackgroundMedia/BackgroundMedia.css

@@ -0,0 +1,60 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-BackgroundMedia {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+.pc-BackgroundMedia__media {
+  margin: 0 auto;
+  max-width: 1440px;
+  text-align: center;
+  height: 100%;
+}
+.pc-BackgroundMedia__media_full-width-media {
+  max-width: none;
+}
+.pc-BackgroundMedia__media_full-width-media .pc-BackgroundMedia__video video {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}
+.pc-BackgroundMedia__image {
+  height: 100%;
+  width: 100%;
+}
+.pc-BackgroundMedia__video {
+  position: relative;
+  height: 100%;
+}
+.pc-BackgroundMedia__video video {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.pc-BackgroundMedia__video,
+.pc-BackgroundMedia video {
+  width: auto;
+}
+@media (max-width: 769px) {
+  .pc-BackgroundMedia__image {
+    display: block;
+  }
+  .pc-BackgroundMedia__video {
+    display: none;
+  }
+}
+@media (min-width: 769px) {
+  .pc-BackgroundMedia.pc-AnimateBlock__image, .pc-AnimateBlock .pc-BackgroundMedia__image {
+    position: relative;
+    bottom: 100px;
+    opacity: 0;
+  }
+  .pc-BackgroundMedia.pc-AnimateBlock.animate .pc-BackgroundMedia__image, .pc-AnimateBlock .pc-BackgroundMedia.animate .pc-BackgroundMedia__image {
+    bottom: 0;
+    opacity: 1;
+    transition: bottom 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  }
+}

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

@@ -0,0 +1,4 @@
+import { BackgroundMediaProps } from '../../models';
+import './BackgroundMedia.css';
+declare const BackgroundMedia: ({ className, color, animated, parallax, video, mediaClassName, fullWidthMedia, qa, ...props }: BackgroundMediaProps) => JSX.Element;
+export default BackgroundMedia;

package/build/esm/components/BackgroundMedia/BackgroundMedia.js

@@ -0,0 +1,17 @@
+import { __rest } from "tslib";
+import React, { useContext } from 'react';
+import { MobileContext } from '../../context/mobileContext';
+import { block, getQaAttrubutes } from '../../utils';
+import AnimateBlock from '../AnimateBlock/AnimateBlock';
+import Media from '../Media/Media';
+import './BackgroundMedia.css';
+const b = block('BackgroundMedia');
+const BackgroundMedia = (_a) => {
+    var { className, color, animated, parallax = true, video, mediaClassName, fullWidthMedia, qa } = _a, props = __rest(_a, ["className", "color", "animated", "parallax", "video", "mediaClassName", "fullWidthMedia", "qa"]);
+    const isMobile = useContext(MobileContext);
+    const qaAttributes = getQaAttrubutes(qa, 'media');
+    return (React.createElement(AnimateBlock, { className: b(null, className), style: { backgroundColor: color }, animate: animated, qa: qaAttributes.animate },
+        React.createElement(Media, Object.assign({ className: b('media', { 'full-width-media': fullWidthMedia }, mediaClassName), imageClassName: b('image'), videoClassName: b('video'), isBackground: true, qa: qaAttributes.media }, Object.assign({ height: 720, color,
+            parallax, video: isMobile ? undefined : video }, props)))));
+};
+export default BackgroundMedia;

package/build/esm/components/BalancedMasonry/BalancedMasonry.css

@@ -0,0 +1,10 @@
+.pc-BalancedMasonry {
+  position: relative;
+}
+.pc-BalancedMasonry__hidden-container {
+  position: absolute;
+  visibility: hidden;
+  overflow: hidden;
+  height: 100%;
+  z-index: -1;
+}

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

@@ -0,0 +1,13 @@
+import React, { ReactNode } from 'react';
+import { QAProps } from '../../models';
+import './BalancedMasonry.css';
+export interface BalancedMasonryProps extends QAProps {
+    className: string;
+    columnClassName: string;
+    children: ReactNode[];
+    breakpointCols: {
+        [key: number]: number;
+    };
+}
+declare const BalancedMasonry: (props: React.PropsWithChildren<BalancedMasonryProps>) => JSX.Element;
+export default BalancedMasonry;

package/build/esm/components/BalancedMasonry/BalancedMasonry.js

@@ -0,0 +1,85 @@
+import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import debounce from 'lodash/debounce';
+import first from 'lodash/first';
+import minBy from 'lodash/minBy';
+import { SSRContext } from '../../context/ssrContext';
+import { block, getQaAttrubutes } from '../../utils';
+import './BalancedMasonry.css';
+const b = block('BalancedMasonry');
+const BalancedMasonry = (props) => {
+    const { className, columnClassName, children = [], breakpointCols, qa } = props;
+    const qaAttributes = getQaAttrubutes(qa, 'column');
+    const { isServer } = useContext(SSRContext);
+    const getCurrentColumnsCount = useCallback(() => {
+        const breakpoints = Object.entries(breakpointCols).sort(([firstBreakpoint], [secondBreakpoint]) => {
+            return Number(secondBreakpoint) - Number(firstBreakpoint);
+        });
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        let [, result] = first(breakpoints);
+        if (isServer) {
+            return result;
+        }
+        for (const [rawWidth, columnCount] of breakpoints) {
+            const width = Number(rawWidth);
+            if ((document === null || document === void 0 ? void 0 : document.body.clientWidth) <= width) {
+                result = columnCount;
+            }
+        }
+        return result;
+    }, [breakpointCols, isServer]);
+    const [columnCount, setColumnCount] = useState(getCurrentColumnsCount());
+    const [columns, setColumns] = useState([]);
+    const containerRef = useRef(null);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const balanceColumns = useCallback(debounce(() => {
+        if (!containerRef.current) {
+            return;
+        }
+        const localColumns = [];
+        const columnsMeta = [];
+        for (let i = 0; i < columnCount; i++) {
+            columnsMeta.push({ id: i, height: 0 });
+            localColumns.push([]);
+        }
+        for (let i = 0; i < containerRef.current.children.length; i++) {
+            const node = containerRef.current.children.item(i);
+            if (!node) {
+                continue;
+            }
+            const minColumn = minBy(columnsMeta, 'height') || { id: 0, height: 0 };
+            const { id: columnId } = minColumn;
+            localColumns[columnId].push(children[i]);
+            minColumn.height += node.offsetHeight;
+        }
+        setColumns(localColumns);
+    }, 300), [children, columnCount]);
+    useEffect(() => {
+        balanceColumns();
+    }, [balanceColumns, children, columnCount]);
+    useEffect(() => {
+        const updateColumnCounter = () => setColumnCount(getCurrentColumnsCount());
+        window.addEventListener('resize', updateColumnCounter, { passive: true });
+        return () => window.removeEventListener('resize', updateColumnCounter);
+    }, [setColumnCount, columns, getCurrentColumnsCount]);
+    useEffect(() => {
+        const currentRef = containerRef.current;
+        const isResizeEventsSupported = 'ResizeObserver' in window;
+        if (!currentRef || !isResizeEventsSupported) {
+            return () => { };
+        }
+        const observer = new ResizeObserver(balanceColumns);
+        for (let i = 0; i < currentRef.children.length; i++) {
+            const node = currentRef.children.item(i);
+            if (!node) {
+                continue;
+            }
+            observer.observe(node);
+        }
+        return () => observer.disconnect();
+    }, [balanceColumns, children]);
+    return (React.createElement("div", { className: b(null, className), "data-qa": qa },
+        React.createElement("div", { className: b('hidden-container'), style: { width: `${100 / columnCount}%` } },
+            React.createElement("div", { ref: containerRef, className: b('hidden-list') }, children)),
+        columns.map((columnElements, index) => (React.createElement("div", { key: index, className: columnClassName, style: { width: `${100 / columnCount}%` }, "data-qa": qaAttributes.column }, columnElements)))));
+};
+export default BalancedMasonry;