@rio-cloud/rio-uikit 0.16.3 → 0.16.4-beta.10

package/lib/es/components/responsiveColumnStripe/ResponsiveColumnStripe.js

@@ -1,266 +1,167 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _findIndex = _interopRequireDefault(require("lodash/fp/findIndex"));
-var _chunk = _interopRequireDefault(require("lodash/fp/chunk"));
-var _framerMotion = require("framer-motion");
-var _useAfterMount = _interopRequireDefault(require("../../hooks/useAfterMount"));
-var _useElementSize3 = _interopRequireDefault(require("../../hooks/useElementSize"));
-var _usePrevious = _interopRequireDefault(require("../../hooks/usePrevious"));
-var _excluded = ["minColumnWith", "minColumns", "maxColumns", "className", "buttonClassName", "columnsWrapperClassName", "onNextClick", "onPreviousClick", "stretchLastItems", "asType", "activePage", "disableAnimation", "children"];
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var DEFAULT_MIN_COLUMN_WITH = 300;
-var DEFAULT_MIN_COLUMNS = 1;
-var DEFAULT_MAX_COLUMNS = 5;
-var DEFAULT_COLUMN_WRAPPER_TYPE = 'div';
-var DEFAULT_ACTIVE_PAGE = 0;
-var MIN_WITH_THRESHOLD = 10;
-var ANIMATION_DURATION = 0.2;
-var ANIMATION_NEXT = 'page';
-var ANIMATION_BACK = 'pageBack';
-var COLUMN_ITEM_CLASSNAME = 'ColumnItem';
-var variants = {
-  pageEnter: function pageEnter(pageDirection) {
-    return {
-      x: pageDirection === ANIMATION_NEXT ? '60%' : '-60%',
-      opacity: 0
-    };
-  },
-  pageCenter: function pageCenter() {
-    return {
-      x: 0,
-      opacity: 1
-    };
-  }
-};
-var getFirstColumnItem = function getFirstColumnItem(node) {
-  if ((0, _toConsumableArray2["default"])(node.classList).includes(COLUMN_ITEM_CLASSNAME)) {
-    return node;
-  }
-  return getFirstColumnItem(node.children[0]);
-};
-var ResponsiveColumnStripe = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var _props$minColumnWith = props.minColumnWith,
-    minColumnWith = _props$minColumnWith === void 0 ? DEFAULT_MIN_COLUMN_WITH : _props$minColumnWith,
-    _props$minColumns = props.minColumns,
-    minColumns = _props$minColumns === void 0 ? DEFAULT_MIN_COLUMNS : _props$minColumns,
-    _props$maxColumns = props.maxColumns,
-    maxColumns = _props$maxColumns === void 0 ? DEFAULT_MAX_COLUMNS : _props$maxColumns,
-    _props$className = props.className,
-    className = _props$className === void 0 ? '' : _props$className,
-    _props$buttonClassNam = props.buttonClassName,
-    buttonClassName = _props$buttonClassNam === void 0 ? '' : _props$buttonClassNam,
-    _props$columnsWrapper = props.columnsWrapperClassName,
-    columnsWrapperClassName = _props$columnsWrapper === void 0 ? '' : _props$columnsWrapper,
-    _props$onNextClick = props.onNextClick,
-    onNextClick = _props$onNextClick === void 0 ? function () {} : _props$onNextClick,
-    _props$onPreviousClic = props.onPreviousClick,
-    onPreviousClick = _props$onPreviousClic === void 0 ? function () {} : _props$onPreviousClic,
-    _props$stretchLastIte = props.stretchLastItems,
-    stretchLastItems = _props$stretchLastIte === void 0 ? true : _props$stretchLastIte,
-    _props$asType = props.asType,
-    asType = _props$asType === void 0 ? DEFAULT_COLUMN_WRAPPER_TYPE : _props$asType,
-    _props$activePage = props.activePage,
-    activePage = _props$activePage === void 0 ? DEFAULT_ACTIVE_PAGE : _props$activePage,
-    _props$disableAnimati = props.disableAnimation,
-    disableAnimation = _props$disableAnimati === void 0 ? false : _props$disableAnimati,
-    children = props.children,
-    remainingProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var ComponentType = asType;
-  var _useState = (0, _react.useState)(activePage),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    currentPage = _useState2[0],
-    setCurrentPage = _useState2[1];
-  var _useState3 = (0, _react.useState)(maxColumns),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    columnsPerPage = _useState4[0],
-    setColumnsPerPage = _useState4[1];
-  var _useState5 = (0, _react.useState)(false),
-    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    enableInitialAnimation = _useState6[0],
-    setEnableInitialAnimation = _useState6[1];
-  var _useState7 = (0, _react.useState)(false),
-    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-    isResizePage = _useState8[0],
-    setIsResizePage = _useState8[1];
-
-  // The base for reacting on changing width of the wrapping element.
-  // It uses a ResizeObserver under the hood.
-  var columnWrapperRef = (0, _react.useRef)();
-  var _useElementSize = (0, _useElementSize3["default"])(columnWrapperRef),
-    _useElementSize2 = (0, _slicedToArray2["default"])(_useElementSize, 1),
-    columnWrapperWidth = _useElementSize2[0];
-  var previousPage = (0, _usePrevious["default"])(currentPage);
-  var animationDirection = currentPage > previousPage ? ANIMATION_NEXT : ANIMATION_BACK;
-  (0, _useAfterMount["default"])(function () {
-    setEnableInitialAnimation(true);
-  });
-
-  // Update active page from outside to be used as controlled component
-  var _useState9 = (0, _react.useState)(activePage),
-    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-    previousActivePage = _useState10[0],
-    setPreviousActivePage = _useState10[1];
-  if (Number.isFinite(activePage) && activePage !== previousActivePage) {
-    setCurrentPage(activePage);
-    setPreviousActivePage(activePage);
-  }
-  var updatePageOnColumnsSizeChange = function updatePageOnColumnsSizeChange(firstItem, columnsPerPage, children) {
-    // Split children in page chunks
-    var itemChunks = (0, _chunk["default"])(columnsPerPage)(children);
-
-    // find the currently rendered first item inside the chunks.
-    // The found chunk index is the new page to render.
-    // example of chunks => [['a', 'b', 'c'], ['d']]
-    var targetPage = (0, _findIndex["default"])(function (chunk) {
-      return chunk.some(function (chunkItem) {
-        var _firstItem$attributes;
-        return chunkItem.key === ((_firstItem$attributes = firstItem.attributes['data-key']) === null || _firstItem$attributes === void 0 ? void 0 : _firstItem$attributes.value);
-      });
-    })(itemChunks);
-    if (targetPage !== currentPage) {
-      setCurrentPage(targetPage);
-    }
-  };
-
-  // When the container size changes, adapt the amount of columns to be rendered according
-  // to the given min width of a single item. The new amount of columns also has to respect
-  // the lower and upper limit. When updating the amount, the current page hse to be updated as well.
-  (0, _react.useEffect)(function () {
-    if (!columnWrapperRef.current) {
-      return;
-    }
-    var firstItem = getFirstColumnItem(columnWrapperRef.current.children[0]);
-    if (!firstItem) {
-      return;
-    }
-
-    // Get the width of the first column to calculate how many columns fit in one page
-    // according to the given minWidth per column
-    var columnWidth = firstItem.getBoundingClientRect().width;
-
-    // Limit columns per page for given min and max values
-    var allowForLessColumns = columnsPerPage - 1 >= minColumns;
-    var allowForMoreColumns = columnsPerPage + 1 <= maxColumns;
-
-    // The threshold is required to avoid jumping between bigger and smaller after the columns per page
-    // has changed and it continues to resize
-    var goSmaller = allowForLessColumns && columnWidth + MIN_WITH_THRESHOLD <= minColumnWith;
-    var goBigger = allowForMoreColumns && (columnsPerPage + 1) * minColumnWith <= columnWrapperWidth;
-
-    // During resizing, we don't want any animation
-    setIsResizePage(true);
-    if (goBigger) {
-      var newValue = columnsPerPage + 1;
-      setColumnsPerPage(newValue);
-      updatePageOnColumnsSizeChange(firstItem, newValue, children);
-      return;
-    }
-    if (goSmaller) {
-      var _newValue = columnsPerPage - 1;
-      setColumnsPerPage(_newValue);
-      updatePageOnColumnsSizeChange(firstItem, _newValue, children);
-      return;
-    }
-  }, [columnWrapperWidth, columnWrapperRef.current, children, columnsPerPage]);
-  var handlePrevClick = function handlePrevClick() {
-    setIsResizePage(false);
-    var pageNumber = currentPage - 1;
-    setCurrentPage(pageNumber);
-    onPreviousClick(pageNumber, columnsPerPage);
-  };
-  var handleNextClick = function handleNextClick() {
-    setIsResizePage(false);
-    var pageNumber = currentPage + 1;
-    setCurrentPage(pageNumber);
-    onNextClick(pageNumber, columnsPerPage);
-  };
-  if (!children) {
-    return null;
-  }
-
-  // Split the children/columns in chunks according to the current columns per page size
-  // and get the current page chunk for rendering
-  var columnsToDisplay = (0, _chunk["default"])(columnsPerPage)(children)[currentPage];
-  var showPageButtons = minColumns < children.length;
-  var disablePreviousPage = currentPage === 0;
-  var disableNextPage = currentPage === Math.ceil(children.length / columnsPerPage) - 1;
-  var wrapperClassName = (0, _classnames["default"])('ResponsiveColumnStripe', 'display-flex align-items-center', 'overflow-hidden', className);
-  var baseButtonClassName = (0, _classnames["default"])('align-items-center', 'align-self-stretch', 'display-flex', 'hover-scale-105', 'hover-text-color-darkest', 'padding-10', 'cursor-pointer', 'text-color-darker', 'text-size-12');
-  var disabledButtonClassName = 'pointer-events-none opacity-30';
-  var previousButtonClassName = (0, _classnames["default"])('PreviousButton', baseButtonClassName, disablePreviousPage && disabledButtonClassName);
-  var nextButtonClassName = (0, _classnames["default"])('NextButton', baseButtonClassName, disableNextPage && disabledButtonClassName);
-  var mergedColumnsWrapperClassName = (0, _classnames["default"])('ColumnWrapper', 'flex-1-1', 'display-flex', columnsWrapperClassName);
-  var columnClassName = disableNextPage && !stretchLastItems ? 'flex-0-1' : 'flex-1-1';
-
-  // Use the given custom component type "div" or any other. Clone the children to inject certain
-  // properties that are required to stretch the items and deal with their size.
-  var columns = /*#__PURE__*/_react["default"].createElement(ComponentType, {
-    className: mergedColumnsWrapperClassName
-  }, _react["default"].Children.map(columnsToDisplay, function (column) {
-    var _column$props;
-    return /*#__PURE__*/_react["default"].cloneElement(column, {
-      className: "".concat(COLUMN_ITEM_CLASSNAME, " ").concat(columnClassName, " ").concat(((_column$props = column.props) === null || _column$props === void 0 ? void 0 : _column$props.className) || ''),
-      // style: { ...column.props?.style, minWidth: `${minColumnWith}px` },
-      'data-key': column.key
-    });
-  }));
-  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, remainingProps, {
-    ref: ref,
-    className: wrapperClassName
-  }), showPageButtons && /*#__PURE__*/_react["default"].createElement("div", {
-    className: previousButtonClassName,
-    onClick: handlePrevClick
-  }, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "rioglyph rioglyph-chevron-left"
-  })), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "ColumnsArea flex-1-1 overflow-hidden",
-    ref: columnWrapperRef
-  }, disableAnimation || isResizePage ? columns : null, !disableAnimation && !isResizePage && /*#__PURE__*/_react["default"].createElement(_framerMotion.AnimatePresence, {
-    exitBeforeEnter: true,
-    custom: animationDirection
-  }, /*#__PURE__*/_react["default"].createElement(_framerMotion.motion.div, {
-    key: currentPage,
-    variants: variants,
-    initial: enableInitialAnimation ? 'pageEnter' : false,
-    animate: "pageCenter",
-    custom: animationDirection,
-    transition: {
-      duration: ANIMATION_DURATION
-    }
-  }, columns))), showPageButtons && /*#__PURE__*/_react["default"].createElement("div", {
-    className: nextButtonClassName,
-    onClick: handleNextClick
-  }, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "rioglyph rioglyph-chevron-right"
-  })));
-});
-var _default = ResponsiveColumnStripe;
-exports["default"] = _default;
-ResponsiveColumnStripe.propTypes = {
-  minColumnWith: _propTypes["default"].number,
-  minColumns: _propTypes["default"].number,
-  maxColumns: _propTypes["default"].number,
-  className: _propTypes["default"].string,
-  buttonClassName: _propTypes["default"].string,
-  columnsWrapperClassName: _propTypes["default"].string,
-  onNextClick: _propTypes["default"].func,
-  onPreviousClick: _propTypes["default"].func,
-  stretchLastItems: _propTypes["default"].bool,
-  asType: _propTypes["default"].string,
-  activePage: _propTypes["default"].number,
-  disableAnimation: _propTypes["default"].bool
-};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importStar(require("react"));
+const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const findIndex_1 = tslib_1.__importDefault(require("lodash/fp/findIndex"));
+const chunk_1 = tslib_1.__importDefault(require("lodash/fp/chunk"));
+const framer_motion_1 = require("framer-motion");
+const useAfterMount_1 = tslib_1.__importDefault(require("../../hooks/useAfterMount"));
+const useElementSize_1 = tslib_1.__importDefault(require("../../hooks/useElementSize"));
+const usePrevious_1 = tslib_1.__importDefault(require("../../hooks/usePrevious"));
+const DEFAULT_MIN_COLUMN_WITH = 300;
+const DEFAULT_MIN_COLUMNS = 1;
+const DEFAULT_MAX_COLUMNS = 5;
+const DEFAULT_COLUMN_WRAPPER_TYPE = 'div';
+const DEFAULT_ACTIVE_PAGE = 0;
+const MIN_WITH_THRESHOLD = 10;
+const ANIMATION_DURATION = 0.2;
+const ANIMATION_NEXT = 'page';
+const ANIMATION_BACK = 'pageBack';
+const COLUMN_ITEM_CLASSNAME = 'ColumnItem';
+const variants = {
+    pageEnter: pageDirection => {
+        return {
+            x: pageDirection === ANIMATION_NEXT ? '60%' : '-60%',
+            opacity: 0,
+        };
+    },
+    pageCenter: () => {
+        return {
+            x: 0,
+            opacity: 1,
+        };
+    },
+};
+const getFirstColumnItem = node => {
+    if ([...node.classList].includes(COLUMN_ITEM_CLASSNAME)) {
+        return node;
+    }
+    return getFirstColumnItem(node.children[0]);
+};
+const ResponsiveColumnStripe = (0, react_1.forwardRef)((props, ref) => {
+    const { minColumnWith = DEFAULT_MIN_COLUMN_WITH, minColumns = DEFAULT_MIN_COLUMNS, maxColumns = DEFAULT_MAX_COLUMNS, className = '', buttonClassName = '', columnsWrapperClassName = '', onNextClick = () => { }, onPreviousClick = () => { }, stretchLastItems = true, asType = DEFAULT_COLUMN_WRAPPER_TYPE, activePage = DEFAULT_ACTIVE_PAGE, disableAnimation = false, children } = props, remainingProps = tslib_1.__rest(props, ["minColumnWith", "minColumns", "maxColumns", "className", "buttonClassName", "columnsWrapperClassName", "onNextClick", "onPreviousClick", "stretchLastItems", "asType", "activePage", "disableAnimation", "children"]);
+    const ComponentType = asType;
+    const [currentPage, setCurrentPage] = (0, react_1.useState)(activePage);
+    const [columnsPerPage, setColumnsPerPage] = (0, react_1.useState)(maxColumns);
+    const [enableInitialAnimation, setEnableInitialAnimation] = (0, react_1.useState)(false);
+    const [isResizePage, setIsResizePage] = (0, react_1.useState)(false);
+    // The base for reacting on changing width of the wrapping element.
+    // It uses a ResizeObserver under the hood.
+    const columnWrapperRef = (0, react_1.useRef)();
+    const [columnWrapperWidth] = (0, useElementSize_1.default)(columnWrapperRef);
+    const previousPage = (0, usePrevious_1.default)(currentPage);
+    const animationDirection = currentPage > previousPage ? ANIMATION_NEXT : ANIMATION_BACK;
+    (0, useAfterMount_1.default)(() => {
+        setEnableInitialAnimation(true);
+    });
+    // Update active page from outside to be used as controlled component
+    const [previousActivePage, setPreviousActivePage] = (0, react_1.useState)(activePage);
+    if (Number.isFinite(activePage) && activePage !== previousActivePage) {
+        setCurrentPage(activePage);
+        setPreviousActivePage(activePage);
+    }
+    const updatePageOnColumnsSizeChange = (firstItem, columnsPerPage, children) => {
+        // Split children in page chunks
+        const itemChunks = (0, chunk_1.default)(columnsPerPage)(children);
+        // find the currently rendered first item inside the chunks.
+        // The found chunk index is the new page to render.
+        // example of chunks => [['a', 'b', 'c'], ['d']]
+        const targetPage = (0, findIndex_1.default)(chunk => chunk.some(chunkItem => { var _a; return chunkItem.key === ((_a = firstItem.attributes['data-key']) === null || _a === void 0 ? void 0 : _a.value); }))(itemChunks);
+        if (targetPage !== currentPage) {
+            setCurrentPage(targetPage);
+        }
+    };
+    // When the container size changes, adapt the amount of columns to be rendered according
+    // to the given min width of a single item. The new amount of columns also has to respect
+    // the lower and upper limit. When updating the amount, the current page hse to be updated as well.
+    (0, react_1.useEffect)(() => {
+        if (!columnWrapperRef.current) {
+            return;
+        }
+        const firstItem = getFirstColumnItem(columnWrapperRef.current.children[0]);
+        if (!firstItem) {
+            return;
+        }
+        // Get the width of the first column to calculate how many columns fit in one page
+        // according to the given minWidth per column
+        const columnWidth = firstItem.getBoundingClientRect().width;
+        // Limit columns per page for given min and max values
+        const allowForLessColumns = columnsPerPage - 1 >= minColumns;
+        const allowForMoreColumns = columnsPerPage + 1 <= maxColumns;
+        // The threshold is required to avoid jumping between bigger and smaller after the columns per page
+        // has changed and it continues to resize
+        const goSmaller = allowForLessColumns && columnWidth + MIN_WITH_THRESHOLD <= minColumnWith;
+        const goBigger = allowForMoreColumns && (columnsPerPage + 1) * minColumnWith <= columnWrapperWidth;
+        // During resizing, we don't want any animation
+        setIsResizePage(true);
+        if (goBigger) {
+            const newValue = columnsPerPage + 1;
+            setColumnsPerPage(newValue);
+            updatePageOnColumnsSizeChange(firstItem, newValue, children);
+            return;
+        }
+        if (goSmaller) {
+            const newValue = columnsPerPage - 1;
+            setColumnsPerPage(newValue);
+            updatePageOnColumnsSizeChange(firstItem, newValue, children);
+            return;
+        }
+    }, [columnWrapperWidth, columnWrapperRef.current, children, columnsPerPage]);
+    const handlePrevClick = () => {
+        setIsResizePage(false);
+        const pageNumber = currentPage - 1;
+        setCurrentPage(pageNumber);
+        onPreviousClick(pageNumber, columnsPerPage);
+    };
+    const handleNextClick = () => {
+        setIsResizePage(false);
+        const pageNumber = currentPage + 1;
+        setCurrentPage(pageNumber);
+        onNextClick(pageNumber, columnsPerPage);
+    };
+    if (!children) {
+        return null;
+    }
+    // Split the children/columns in chunks according to the current columns per page size
+    // and get the current page chunk for rendering
+    const columnsToDisplay = (0, chunk_1.default)(columnsPerPage)(children)[currentPage];
+    const showPageButtons = minColumns < children.length;
+    const disablePreviousPage = currentPage === 0;
+    const disableNextPage = currentPage === Math.ceil(children.length / columnsPerPage) - 1;
+    const wrapperClassName = (0, classnames_1.default)('ResponsiveColumnStripe', 'display-flex align-items-center', 'overflow-hidden', className);
+    const baseButtonClassName = (0, classnames_1.default)('align-items-center', 'align-self-stretch', 'display-flex', 'hover-scale-105', 'hover-text-color-darkest', 'padding-10', 'cursor-pointer', 'text-color-darker', 'text-size-12');
+    const disabledButtonClassName = 'pointer-events-none opacity-30';
+    const previousButtonClassName = (0, classnames_1.default)('PreviousButton', baseButtonClassName, disablePreviousPage && disabledButtonClassName);
+    const nextButtonClassName = (0, classnames_1.default)('NextButton', baseButtonClassName, disableNextPage && disabledButtonClassName);
+    const mergedColumnsWrapperClassName = (0, classnames_1.default)('ColumnWrapper', 'flex-1-1', 'display-flex', columnsWrapperClassName);
+    const columnClassName = disableNextPage && !stretchLastItems ? 'flex-0-1' : 'flex-1-1';
+    // Use the given custom component type "div" or any other. Clone the children to inject certain
+    // properties that are required to stretch the items and deal with their size.
+    const columns = ((0, jsx_runtime_1.jsx)(ComponentType, Object.assign({ className: mergedColumnsWrapperClassName }, { children: react_1.default.Children.map(columnsToDisplay, column => {
+            var _a;
+            return react_1.default.cloneElement(column, {
+                className: `${COLUMN_ITEM_CLASSNAME} ${columnClassName} ${((_a = column.props) === null || _a === void 0 ? void 0 : _a.className) || ''}`,
+                // style: { ...column.props?.style, minWidth: `${minColumnWith}px` },
+                'data-key': column.key,
+            });
+        }) })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { ref: ref, className: wrapperClassName }, { children: [showPageButtons && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: previousButtonClassName, onClick: handlePrevClick }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-chevron-left' }) }))), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'ColumnsArea flex-1-1 overflow-hidden', ref: columnWrapperRef }, { children: [disableAnimation || isResizePage ? columns : null, !disableAnimation && !isResizePage && ((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, Object.assign({ exitBeforeEnter: true, custom: animationDirection }, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({ variants: variants, initial: enableInitialAnimation ? 'pageEnter' : false, animate: 'pageCenter', custom: animationDirection, transition: { duration: ANIMATION_DURATION } }, { children: columns }), currentPage) })))] })), showPageButtons && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: nextButtonClassName, onClick: handleNextClick }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-chevron-right' }) })))] })));
+});
+exports.default = ResponsiveColumnStripe;
+ResponsiveColumnStripe.propTypes = {
+    minColumnWith: prop_types_1.default.number,
+    minColumns: prop_types_1.default.number,
+    maxColumns: prop_types_1.default.number,
+    className: prop_types_1.default.string,
+    buttonClassName: prop_types_1.default.string,
+    columnsWrapperClassName: prop_types_1.default.string,
+    onNextClick: prop_types_1.default.func,
+    onPreviousClick: prop_types_1.default.func,
+    stretchLastItems: prop_types_1.default.bool,
+    asType: prop_types_1.default.string,
+    activePage: prop_types_1.default.number,
+    disableAnimation: prop_types_1.default.bool,
+};

package/lib/es/components/rules/RuleConnector.d.ts

@@ -0,0 +1,39 @@
+export default RuleConnector;
+declare function RuleConnector(props: any): import("react/jsx-runtime").JSX.Element;
+declare namespace RuleConnector {
+    const START: string;
+    const CENTER: string;
+    const END: string;
+    namespace defaultProps {
+        const placement: string;
+        const icon: string;
+        const hidden: boolean;
+        const background: string;
+        const pageBackground: string;
+        const contentClassName: string;
+        const hasBorder: boolean;
+        const borderColor: string;
+        const className: string;
+    }
+    namespace propTypes {
+        const placement_1: PropTypes.Requireable<string>;
+        export { placement_1 as placement };
+        const icon_1: PropTypes.Requireable<string>;
+        export { icon_1 as icon };
+        const hidden_1: PropTypes.Requireable<boolean>;
+        export { hidden_1 as hidden };
+        const background_1: PropTypes.Requireable<string>;
+        export { background_1 as background };
+        const pageBackground_1: PropTypes.Requireable<string>;
+        export { pageBackground_1 as pageBackground };
+        const contentClassName_1: PropTypes.Requireable<string>;
+        export { contentClassName_1 as contentClassName };
+        const hasBorder_1: PropTypes.Requireable<boolean>;
+        export { hasBorder_1 as hasBorder };
+        const borderColor_1: PropTypes.Requireable<string>;
+        export { borderColor_1 as borderColor };
+        const className_1: PropTypes.Requireable<string>;
+        export { className_1 as className };
+    }
+}
+import PropTypes from "prop-types";