@megafon/ui-shared 4.21.2 → 5.0.1

package/dist/es/components/Card/Card.js

@@ -1,198 +1,278 @@
 import _extends from "@babel/runtime/helpers/extends";
 import "core-js/modules/es.string.link.js";
-import "core-js/modules/es.object.values.js";
+import "core-js/modules/es.array.map.js";
 import React from 'react';
-import "./Card.css";
-import { Header, Button, TextLink, Link } from '@megafon/ui-core';
-import { cnCreate, filterDataAttrs, convert, titleConvertConfig, textConvertConfig } from '@megafon/ui-helpers';
+import { Button, Header } from '@megafon/ui-core';
+import { cnCreate, convert, filterDataAttrs } from '@megafon/ui-helpers';
 import PropTypes from 'prop-types';
-export var Target = {
-  SELF: '_self',
-  BLANK: '_blank'
-};
-export var ObjectFit = {
-  FILL: 'fill',
-  CONTAIN: 'contain'
+import "./Card.css";
+var textsConvertConfig = {
+  b: {
+    component: function component(_ref) {
+      var children = _ref.children;
+      return /*#__PURE__*/React.createElement("b", null, children);
+    }
+  },
+  ul: {
+    component: function component(_ref2) {
+      var children = _ref2.children;
+      return /*#__PURE__*/React.createElement("ul", null, children);
+    }
+  },
+  ol: {
+    component: function component(_ref3) {
+      var children = _ref3.children;
+      return /*#__PURE__*/React.createElement("ol", null, children);
+    }
+  },
+  li: {
+    component: function component(_ref4) {
+      var children = _ref4.children;
+      return /*#__PURE__*/React.createElement("li", null, children);
+    }
+  }
 };
-var cn = cnCreate('mfui-card-old');
-
-var Card = function Card(_ref) {
-  var dataAttrs = _ref.dataAttrs,
-      className = _ref.className,
-      _ref$classes = _ref.classes,
-      classes = _ref$classes === void 0 ? {} : _ref$classes,
-      rootRef = _ref.rootRef,
-      imageSrc = _ref.imageSrc,
-      imageAlt = _ref.imageAlt,
-      svgSrc = _ref.svgSrc,
-      title = _ref.title,
-      text = _ref.text,
-      button = _ref.button,
-      link = _ref.link,
-      _ref$isCenteredText = _ref.isCenteredText,
-      isCenteredText = _ref$isCenteredText === void 0 ? false : _ref$isCenteredText,
-      _ref$isLeftHAlign = _ref.isLeftHAlign,
-      isLeftHAlign = _ref$isLeftHAlign === void 0 ? false : _ref$isLeftHAlign,
-      _ref$isFullHeight = _ref.isFullHeight,
-      isFullHeight = _ref$isFullHeight === void 0 ? false : _ref$isFullHeight,
-      href = _ref.href,
-      target = _ref.target,
-      _ref$objectFit = _ref.objectFit,
-      objectFit = _ref$objectFit === void 0 ? 'fill' : _ref$objectFit;
-  var isAlignAvailable = !button || !link;
-  var isCardLink = !!href;
-  var Element = href ? Link : 'div';
-  var renderImage = React.useCallback(function () {
-    switch (true) {
-      case !!imageSrc:
-        {
-          return /*#__PURE__*/React.createElement("div", {
-            className: cn('pic-wrapper', {
-              'object-fit': objectFit
-            })
-          }, /*#__PURE__*/React.createElement("img", {
-            className: cn('img'),
-            src: imageSrc,
-            alt: imageAlt
-          }));
-        }
-
-      case !!svgSrc:
-        {
-          return /*#__PURE__*/React.createElement("div", {
-            className: cn('svg-wrapper')
-          }, svgSrc);
-        }
-
-      default:
-        return null;
+var cn = cnCreate('mfui-card');
+
+var Card = function Card(_ref5) {
+  var dataAttrs = _ref5.dataAttrs,
+      className = _ref5.className,
+      _ref5$isFullHeight = _ref5.isFullHeight,
+      isFullHeight = _ref5$isFullHeight === void 0 ? false : _ref5$isFullHeight,
+      link = _ref5.link,
+      _ref5$view = _ref5.view,
+      view = _ref5$view === void 0 ? 'shadow' : _ref5$view,
+      image = _ref5.image,
+      icon = _ref5.icon,
+      title = _ref5.title,
+      textsList = _ref5.textsList,
+      featuresList = _ref5.featuresList,
+      iconsList = _ref5.iconsList,
+      price = _ref5.price,
+      button = _ref5.button,
+      extraButton = _ref5.extraButton,
+      onClick = _ref5.onClick;
+  var isOnlyTitle = !image && !icon && !textsList && !featuresList && !iconsList && !price && !button && !extraButton;
+  var isLink = (link === null || link === void 0 ? void 0 : link.href) && !button && !extraButton;
+  var isBottomImage = (image === null || image === void 0 ? void 0 : image.position) === 'bottom';
+  var ElementType = isLink ? 'a' : 'div';
+
+  var renderImage = function renderImage() {
+    if (!image) {
+      return null;
     }
-  }, [imageSrc, svgSrc, objectFit, imageAlt]);
-  var renderLink = React.useCallback(function () {
-    if (!link) {
+
+    return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.imgBox), {
+      className: cn('img-box', {
+        position: image.position
+      })
+    }), /*#__PURE__*/React.createElement("img", {
+      className: cn('img'),
+      src: image.src,
+      alt: image.alt
+    }));
+  };
+
+  var renderIcon = function renderIcon() {
+    if (!icon) {
       return null;
     }
 
-    var linkHref = link.href,
-        linkTitle = link.title,
-        linkTarget = link.target,
-        download = link.download,
-        linkRel = link.rel;
+    return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.icon), {
+      className: cn('icon')
+    }), icon);
+  };
 
-    if (!linkHref || isCardLink) {
-      return /*#__PURE__*/React.createElement("span", {
-        className: cn('fake-link')
-      }, linkTitle);
+  var renderContent = function renderContent() {
+    if (textsList) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: cn('texts')
+      }, textsList.map(function (item, i) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: cn('texts-item'),
+          key: i
+        }, !!item.title && /*#__PURE__*/React.createElement("div", {
+          className: cn('texts-title')
+        }, convert(item.title, textsConvertConfig)), /*#__PURE__*/React.createElement("div", {
+          className: cn('texts-desc')
+        }, convert(item.desc, textsConvertConfig)));
+      }));
     }
 
-    return /*#__PURE__*/React.createElement(TextLink, {
-      href: linkHref,
-      download: download,
-      target: linkTarget,
-      rel: linkRel,
-      dataAttrs: {
-        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link
-      },
-      className: cn('link', [classes.link])
-    }, linkTitle);
-  }, [link, isCardLink, classes, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link]);
-  var renderBtn = React.useCallback(function () {
-    if (!button || isCardLink) {
+    if (featuresList) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: cn('features')
+      }, /*#__PURE__*/React.createElement("div", {
+        className: cn('features-list')
+      }, featuresList.items.map(function (item, i) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: cn('features-item'),
+          key: i
+        }, /*#__PURE__*/React.createElement("div", {
+          className: cn('features-item-title')
+        }, item.title), /*#__PURE__*/React.createElement("div", {
+          className: cn('features-item-separator')
+        }), /*#__PURE__*/React.createElement("div", {
+          className: cn('features-item-value')
+        }, item.value));
+      })), featuresList.desc);
+    }
+
+    if (iconsList) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: cn('icons')
+      }, !!iconsList.desc && /*#__PURE__*/React.createElement("div", {
+        className: cn('icons-desc')
+      }, iconsList.desc), /*#__PURE__*/React.createElement("div", {
+        className: cn('icons-list')
+      }, iconsList.items.map(function (item, i) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: cn('icons-item'),
+          key: i
+        }, /*#__PURE__*/React.createElement("div", {
+          className: cn('icons-item-icon')
+        }, item.icon), /*#__PURE__*/React.createElement("div", {
+          className: cn('icons-item-text')
+        }, item.text));
+      })));
+    }
+
+    return null;
+  };
+
+  var renderPrice = function renderPrice() {
+    if (!price) {
       return null;
     }
 
-    var btnHref = button.href,
-        btnTitle = button.title,
-        btnTarget = button.target,
-        btnDownload = button.download,
-        btnRel = button.rel,
-        btnOnClick = button.onClick;
-    return /*#__PURE__*/React.createElement(Button, {
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('price')
+    }, !!price.oldValue && /*#__PURE__*/React.createElement("div", {
+      className: cn('price-old-value')
+    }, price.oldValue), /*#__PURE__*/React.createElement("div", {
+      className: cn('price-value')
+    }, price.value), !!price.period && /*#__PURE__*/React.createElement("div", {
+      className: cn('price-period')
+    }, price.period));
+  };
+
+  var renderButtons = function renderButtons() {
+    if (!button && !extraButton) {
+      return null;
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('buttons', {
+        centered: (button === null || button === void 0 ? void 0 : button.isCentered) || (extraButton === null || extraButton === void 0 ? void 0 : extraButton.isCentered)
+      })
+    }, !!button && /*#__PURE__*/React.createElement(Button, {
       dataAttrs: {
         root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
       },
-      className: cn('button', [classes.button]),
-      href: btnHref,
-      target: btnTarget,
-      download: btnDownload,
-      rel: btnRel,
-      onClick: btnOnClick
-    }, btnTitle);
-  }, [button, isCardLink, classes, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button]);
-  var renderBtnsWrapper = React.useCallback(function () {
-    var btnElem = renderBtn();
-    var linkElem = renderLink();
-
-    if (!btnElem && !linkElem) {
+      className: cn('button'),
+      href: button.href,
+      target: button.target,
+      onClick: button === null || button === void 0 ? void 0 : button.onClick
+    }, button.title), !!extraButton && /*#__PURE__*/React.createElement(Button, {
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.extraButton
+      },
+      className: cn('button'),
+      href: extraButton.href,
+      target: extraButton.target,
+      type: "outline",
+      onClick: extraButton === null || extraButton === void 0 ? void 0 : extraButton.onClick
+    }, extraButton.title));
+  };
+
+  var renderFooter = function renderFooter() {
+    if (!price && !button && !extraButton && !image) {
       return null;
     }
 
     return /*#__PURE__*/React.createElement("div", {
-      className: cn('btns-wrapper', {
-        'left-align': isAlignAvailable && isLeftHAlign
-      })
-    }, btnElem, linkElem);
-  }, [renderBtn, renderLink, isAlignAvailable, isLeftHAlign]);
-  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
-    className: cn('', {
-      href: !!href,
-      'full-height': isFullHeight,
-      'centered-text': isCenteredText
-    }, [className, classes.root]),
-    ref: rootRef
-  }), /*#__PURE__*/React.createElement(Element, {
-    href: href,
-    target: target,
-    className: cn('inner', [classes.inner])
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, renderImage(), /*#__PURE__*/React.createElement(Header, {
+      className: cn('footer')
+    }, isBottomImage && renderImage(), renderPrice(), renderButtons());
+  };
+
+  return /*#__PURE__*/React.createElement(ElementType, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      'only-title': isOnlyTitle,
+      view: view,
+      link: isLink,
+      'full-height': isFullHeight
+    }, [className]),
+    href: isLink ? link === null || link === void 0 ? void 0 : link.href : undefined,
+    target: isLink ? link === null || link === void 0 ? void 0 : link.target : undefined,
+    onClick: isLink ? onClick : undefined
+  }), renderIcon(), !isBottomImage && renderImage(), /*#__PURE__*/React.createElement(Header, {
+    className: cn('title'),
     as: "h3",
-    className: cn('title')
-  }, typeof title === 'string' ? convert(title, titleConvertConfig) : title), !!text && /*#__PURE__*/React.createElement("div", {
-    className: cn('text')
-  }, typeof text === 'string' ? convert(text, textConvertConfig) : text), renderBtnsWrapper())));
+    align: title.align
+  }, title.text), renderContent(), renderFooter());
 };
 
 Card.propTypes = {
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired),
-    link: PropTypes.objectOf(PropTypes.string.isRequired),
-    button: PropTypes.objectOf(PropTypes.string.isRequired)
+    icon: PropTypes.objectOf(PropTypes.string.isRequired),
+    imgBox: PropTypes.objectOf(PropTypes.string.isRequired),
+    button: PropTypes.objectOf(PropTypes.string.isRequired),
+    extraButton: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
   className: PropTypes.string,
-  classes: PropTypes.shape({
-    root: PropTypes.string,
-    button: PropTypes.string,
-    link: PropTypes.string,
-    inner: PropTypes.string
+  view: PropTypes.oneOf(['shadow', 'background']),
+  link: PropTypes.shape({
+    href: PropTypes.string,
+    target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top'])
+  }),
+  image: PropTypes.shape({
+    src: PropTypes.string.isRequired,
+    alt: PropTypes.string,
+    position: PropTypes.oneOf(['top', 'bottom'])
+  }),
+  icon: PropTypes.node,
+  title: PropTypes.shape({
+    text: PropTypes.string.isRequired,
+    align: PropTypes.oneOf(['left', 'center'])
+  }).isRequired,
+  textsList: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string,
+    desc: PropTypes.string.isRequired
+  }).isRequired),
+  featuresList: PropTypes.shape({
+    desc: PropTypes.string,
+    items: PropTypes.arrayOf(PropTypes.shape({
+      title: PropTypes.string.isRequired,
+      value: PropTypes.string.isRequired
+    }).isRequired).isRequired
+  }),
+  iconsList: PropTypes.shape({
+    desc: PropTypes.string,
+    items: PropTypes.arrayOf(PropTypes.shape({
+      icon: PropTypes.node.isRequired,
+      text: PropTypes.string.isRequired
+    }).isRequired).isRequired
+  }),
+  price: PropTypes.shape({
+    oldValue: PropTypes.string,
+    value: PropTypes.string.isRequired,
+    period: PropTypes.string
   }),
-  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
-    current: PropTypes.elementType
-  }), PropTypes.any])]),
-  imageSrc: PropTypes.string,
-  imageAlt: PropTypes.string,
-  svgSrc: PropTypes.node,
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
-  text: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   button: PropTypes.shape({
     title: PropTypes.string.isRequired,
     href: PropTypes.string,
-    target: PropTypes.oneOf(Object.values(Target)),
-    download: PropTypes.bool,
-    rel: PropTypes.string,
+    target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
+    isCentered: PropTypes.bool,
     onClick: PropTypes.func
   }),
-  link: PropTypes.shape({
+  extraButton: PropTypes.shape({
     title: PropTypes.string.isRequired,
     href: PropTypes.string,
-    target: PropTypes.oneOf(Object.values(Target)),
-    download: PropTypes.bool,
-    rel: PropTypes.string
+    target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
+    isCentered: PropTypes.bool,
+    onClick: PropTypes.func
   }),
-  isCenteredText: PropTypes.bool,
-  isLeftHAlign: PropTypes.bool,
-  isFullHeight: PropTypes.bool,
-  href: PropTypes.string,
-  target: PropTypes.oneOf(Object.values(Target)),
-  objectFit: PropTypes.oneOf(Object.values(ObjectFit))
+  onClick: PropTypes.func
 };
 export default Card;

package/dist/es/components/Card/types.d.ts

@@ -0,0 +1,71 @@
+/// <reference types="react" />
+declare type Target = '_self' | '_blank' | '_parent' | '_top';
+export declare type Link = {
+    /** Ссылка */
+    href?: string;
+    /** Target свойство ссылки */
+    target?: Target;
+};
+export declare type Image = {
+    /** Ссылка на изображение */
+    src: string;
+    /** Значение тега alt для изображения */
+    alt?: string;
+    /** Позиция изображения */
+    position?: 'top' | 'bottom';
+};
+export declare type Title = {
+    /** Текст */
+    text: string;
+    /** Выравнивание */
+    align?: 'left' | 'center';
+};
+export declare type TextsList = {
+    /** Заголовок */
+    title?: string;
+    /** Описание */
+    desc: string;
+}[];
+export declare type FeaturesList = {
+    /** Список */
+    items: {
+        /** Заголовок */
+        title: string;
+        /** Значение */
+        value: string;
+    }[];
+    /** Описание */
+    desc?: string;
+};
+export declare type IconsList = {
+    /** Список */
+    items: {
+        /** Иконка */
+        icon: React.ReactNode;
+        /** Текст */
+        text: string;
+    }[];
+    /** Описание */
+    desc?: string;
+};
+export declare type Price = {
+    /** Старая цена */
+    oldValue?: string;
+    /** Текущая цена */
+    value: string;
+    /** Период */
+    period?: string;
+};
+export declare type ButtonType = {
+    /** Название */
+    title: string;
+    /** Ссылка */
+    href?: string;
+    /** Target свойство кнопки */
+    target?: Target;
+    /** Центрировать кнопку */
+    isCentered?: boolean;
+    /** Обработчик клика по кнопке */
+    onClick?: () => void;
+};
+export {};

package/dist/es/components/CardsBox/CardsBox.d.ts

@@ -1,16 +1,13 @@
 import * as React from 'react';
 import { ICard } from '../Card/Card';
 interface ICardsBoxProps {
-    /** Выравнивание всех колонок компонента Grid по горизонтали */
-    gridHAlign?: 'left' | 'right' | 'center' | 'between' | 'around';
-    /** Ссылка на корневой элемент */
-    rootRef?: React.Ref<HTMLDivElement>;
+    /** Выводить по две колонки в ряду для 2 или 4 карточек */
+    renderTwoColumnsInRow?: boolean;
     /** Дата атрибуты для корневого элемента */
     dataAttrs?: {
-        [key: string]: string;
+        root?: Record<string, string>;
+        column?: Record<string, string>;
     };
-    /** Обработчик смены слайда (должен быть обернут в useCallback) */
-    onChange?: (currentIndex: number, previousIndex: number, slidesPerView?: number | 'auto') => void;
     children: Array<React.ReactElement<ICard>> | React.ReactElement<ICard>;
 }
 declare const CardsBox: React.FC<ICardsBoxProps>;

package/dist/es/components/CardsBox/CardsBox.js

@@ -1,83 +1,37 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-var _SlidesSettings;
-
 import "core-js/modules/es.array.map.js";
 import * as React from 'react';
-import { Grid, GridColumn, Carousel } from '@megafon/ui-core';
-import { breakpoints, cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
-import throttle from 'lodash.throttle';
+import { Grid, GridColumn } from '@megafon/ui-core';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
-import throttleTime from "../../constants/throttleTime";
-var MAX_CARDS_COUNT_IN_GRID_ON_MOBILE = 2;
-var SlidesSettings = (_SlidesSettings = {}, _defineProperty(_SlidesSettings, breakpoints.MOBILE_SMALL_START, {
-  slidesPerView: 1,
-  spaceBetween: 16
-}), _defineProperty(_SlidesSettings, breakpoints.MOBILE_BIG_START, {
-  slidesPerView: 2,
-  spaceBetween: 20
-}), _SlidesSettings);
+import getColumnConfig from "./helpers";
 var cn = cnCreate('mfui-cards-box');
 
 var CardsBox = function CardsBox(_ref) {
-  var gridHAlign = _ref.gridHAlign,
-      rootRef = _ref.rootRef,
+  var _ref$renderTwoColumns = _ref.renderTwoColumnsInRow,
+      renderTwoColumnsInRow = _ref$renderTwoColumns === void 0 ? false : _ref$renderTwoColumns,
       dataAttrs = _ref.dataAttrs,
-      onChange = _ref.onChange,
       children = _ref.children;
-
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      isMobile = _React$useState2[0],
-      setIsMobile = _React$useState2[1];
-
-  var itemsCount = React.Children.count(children);
-  var isRenderCarousel = isMobile && itemsCount > MAX_CARDS_COUNT_IN_GRID_ON_MOBILE;
-  var renderGrid = React.useCallback(function () {
-    return /*#__PURE__*/React.createElement(Grid, {
-      guttersBottom: "medium",
-      guttersLeft: "medium",
-      hAlign: gridHAlign
-    }, React.Children.map(children, function (child) {
-      return /*#__PURE__*/React.createElement(GridColumn, {
-        all: "4",
-        mobile: "12"
-      }, child);
-    }));
-  }, [children, gridHAlign]);
-  var renderCarousel = React.useCallback(function () {
-    return /*#__PURE__*/React.createElement(Carousel, {
-      slidesSettings: SlidesSettings,
-      onChange: onChange
-    }, children);
-  }, [children, onChange]);
-  React.useEffect(function () {
-    var resizeHandler = function resizeHandler() {
-      return window.innerWidth <= breakpoints.MOBILE_BIG_END ? setIsMobile(true) : setIsMobile(false);
-    };
-
-    var resizeHandlerThrottled = throttle(resizeHandler, throttleTime.resize);
-    resizeHandler();
-    window.addEventListener('resize', resizeHandlerThrottled);
-    return function () {
-      window.removeEventListener('resize', resizeHandlerThrottled);
-    };
-  }, []);
   return /*#__PURE__*/React.createElement("div", _extends({
-    className: cn(),
-    ref: rootRef
-  }, filterDataAttrs(dataAttrs)), isRenderCarousel ? renderCarousel() : renderGrid());
+    className: cn()
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement(Grid, {
+    guttersBottom: "medium",
+    guttersLeft: "medium"
+  }, React.Children.map(children, function (child, i) {
+    return /*#__PURE__*/React.createElement(GridColumn, _extends({
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.column
+      }
+    }, getColumnConfig(React.Children.count(children), i, renderTwoColumnsInRow)), child);
+  })));
 };
 
 CardsBox.propTypes = {
-  gridHAlign: PropTypes.oneOf(['left', 'right', 'center', 'between', 'around']),
-  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
-    current: PropTypes.elementType
-  }), PropTypes.any])]),
+  renderTwoColumnsInRow: PropTypes.bool,
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element]).isRequired,
-  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
-  onChange: PropTypes.func
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    column: PropTypes.objectOf(PropTypes.string.isRequired)
+  })
 };
 export default CardsBox;

package/dist/es/components/CardsBox/helpers.d.ts

@@ -0,0 +1,10 @@
+declare type TGridSizeValues = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
+declare type GridConfig = {
+    all?: TGridSizeValues;
+    tablet?: TGridSizeValues;
+    mobile?: TGridSizeValues;
+    leftOffsetWide?: TGridSizeValues;
+    leftOffsetDesktop?: TGridSizeValues;
+};
+declare const getColumnConfig: (count: number, index: number, renderTwoColumnsInRow: boolean) => GridConfig;
+export default getColumnConfig;