@onepercentio/one-ui 0.19.1 → 0.19.3

package/dist/components/OrderableList/index.js

@@ -1,9 +1,13 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var OrderableList_1 = require("./OrderableList");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(OrderableList_1).default; } });
-//# sourceMappingURL=index.js.map
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _OrderableList.default;
+  }
+});
+var _OrderableList = _interopRequireDefault(require("./OrderableList"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/components/PaginationIndicator/PaginationIndicator.js

@@ -1,207 +1,241 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PaginationIndicatorView = exports.PaginationIndicatorMode = void 0;
-const react_1 = __importStar(require("react"));
+exports.PaginationIndicatorMode = void 0;
+exports.PaginationIndicatorView = PaginationIndicatorView;
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+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; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _toArray(arr) { return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 const MAX_BALLS = 7;
 const eachBallWidthEm = 1.2;
 const CENTER_GUIDE_BALL = 1;
-var PaginationIndicatorMode;
-(function (PaginationIndicatorMode) {
-    /** This will make the guide ball be kept on center  */
-    PaginationIndicatorMode[PaginationIndicatorMode["CENTERED"] = 0] = "CENTERED";
-    /** This will make the guide ball move, while the indicator balls keep in place */
-    PaginationIndicatorMode[PaginationIndicatorMode["START"] = 1] = "START";
-})(PaginationIndicatorMode = exports.PaginationIndicatorMode || (exports.PaginationIndicatorMode = {}));
+let PaginationIndicatorMode = /*#__PURE__*/function (PaginationIndicatorMode) {
+  PaginationIndicatorMode[PaginationIndicatorMode["CENTERED"] = 0] = "CENTERED";
+  PaginationIndicatorMode[PaginationIndicatorMode["START"] = 1] = "START";
+  return PaginationIndicatorMode;
+}({});
 /**
  * A cool component to indicate how many pages are
  **/
-function PaginationIndicatorView({ size, page: currentPage, pages: decimalPages, className, onClickPage, mode = PaginationIndicatorMode.CENTERED, }) {
-    const page = (0, react_1.useMemo)(() => {
-        const floor = Math.floor(decimalPages);
-        const modulus = decimalPages % floor;
-        if (currentPage > floor) {
-            const currentFloorModulus = currentPage % floor;
-            const equivalent = (currentFloorModulus * 100) / modulus;
-            return floor + equivalent / 100;
-        }
-        else {
-            return currentPage;
-        }
-    }, [currentPage, decimalPages]);
-    const rand = (0, react_1.useMemo)(() => Math.random().toString(), []);
-    const pageIndex = page - 1;
-    const pages = (0, react_1.useMemo)(() => Math.ceil(decimalPages), [decimalPages]);
-    const numBalls = (0, react_1.useMemo)(() => {
-        const numBalls = pages >= MAX_BALLS ? MAX_BALLS : Math.ceil(pages);
-        return numBalls;
-    }, [pages]);
-    const indexForTheBallsCenter = (0, react_1.useMemo)(() => (numBalls - 1) / 2, [numBalls]);
-    const balls = (0, react_1.useMemo)(() => {
-        const indexForLastPages = pages + 1 - indexForTheBallsCenter;
-        /**
-         * Is the page index (position of the center)
-         * after the first pages and
-         * before the last pages */
-        const isCenterPage = numBalls >= MAX_BALLS &&
-            pageIndex > indexForTheBallsCenter &&
-            pageIndex < indexForLastPages - 1;
-        let modulus = pageIndex %
-            (1 + (indexForTheBallsCenter - Math.floor(indexForTheBallsCenter)));
-        const resetPageIndex = isCenterPage
-            ? indexForTheBallsCenter + modulus
-            : pages < MAX_BALLS
-                ? pageIndex
-                : pageIndex >= indexForLastPages - 1
-                    ? numBalls - (pages - pageIndex)
-                    : pageIndex;
-        const left = eachBallWidthEm * resetPageIndex;
-        const { pushBallsToRightBy, pushBallsToLeftBy, pushGuideToRightBy } = mode === PaginationIndicatorMode.CENTERED
-            ? {
-                pushBallsToRightBy: Math.min(pages, MAX_BALLS) * eachBallWidthEm,
-                pushBallsToLeftBy: left,
-                pushGuideToRightBy: 0,
-            }
-            : {
-                pushBallsToRightBy: (eachBallWidthEm - 0.5) / 2,
-                pushBallsToLeftBy: 0,
-                pushGuideToRightBy: left,
-            };
-        let pushToLeft = 0;
-        return new Array(CENTER_GUIDE_BALL + numBalls)
-            .fill(undefined)
-            .map((_, i) => {
-            const isLastBall = i === numBalls - 1;
-            const isFirstBall = i === 0;
-            if (i === numBalls) {
-                const diameter = 0.45 * 2;
-                const padding = (eachBallWidthEm - diameter) / 2;
-                return (react_1.default.createElement("rect", { fill: "#fff", width: `${diameter}em`, height: `${diameter}em`, x: `${pushBallsToRightBy - padding + pushGuideToRightBy - pushToLeft}em`, y: `${padding}em`, rx: `${diameter / 2}em` }));
-            }
-            const ballSize = numBalls < MAX_BALLS
-                ? 0.5
-                : page <= indexForTheBallsCenter + 1 && isLastBall
-                    ? 0
-                    : pageIndex >= indexForLastPages - 1 && isFirstBall
-                        ? 0
-                        : isCenterPage
-                            ? isFirstBall
-                                ? 0.5 - modulus * 0.5
-                                : isLastBall
-                                    ? modulus * 0.5
-                                    : 0.5
-                            : 0.5;
-            if (i === 0 && mode === PaginationIndicatorMode.START)
-                pushToLeft = (0.5 - ballSize) * 2.4;
-            return (react_1.default.createElement("rect", { key: `guide-${i}`, width: `${ballSize * 1.2}em`, height: `${ballSize * 1.2}em`, x: `${pushBallsToRightBy +
-                    i * eachBallWidthEm -
-                    pushBallsToLeftBy -
-                    pushToLeft}em`, y: `${(eachBallWidthEm - ballSize * 1.2) / 2}em`, rx: `${(ballSize * 1.2) / 2}em`, onClick: () => {
-                    if (onClickPage) {
-                        const pageClicked = (!isCenterPage
-                            ? pageIndex >= indexForLastPages - 1
-                                ? Math.floor(page) - resetPageIndex - 1
-                                : 0
-                            : Math.floor(page) - (indexForTheBallsCenter + 1)) +
-                            1 +
-                            i;
-                        onClickPage(Math.round(pageClicked));
-                    }
-                } }));
+exports.PaginationIndicatorMode = PaginationIndicatorMode;
+function PaginationIndicatorView(_ref) {
+  let size = _ref.size,
+    currentPage = _ref.page,
+    decimalPages = _ref.pages,
+    className = _ref.className,
+    onClickPage = _ref.onClickPage,
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? PaginationIndicatorMode.CENTERED : _ref$mode;
+  const page = (0, _react.useMemo)(function () {
+    const floor = Math.floor(decimalPages);
+    const modulus = decimalPages % floor;
+    if (currentPage > floor) {
+      const currentFloorModulus = currentPage % floor;
+      const equivalent = currentFloorModulus * 100 / modulus;
+      return floor + equivalent / 100;
+    } else {
+      return currentPage;
+    }
+  }, [currentPage, decimalPages]);
+  const rand = (0, _react.useMemo)(function () {
+    return Math.random().toString();
+  }, []);
+  const pageIndex = page - 1;
+  const pages = (0, _react.useMemo)(function () {
+    return Math.ceil(decimalPages);
+  }, [decimalPages]);
+  const numBalls = (0, _react.useMemo)(function () {
+    const numBalls = pages >= MAX_BALLS ? MAX_BALLS : Math.ceil(pages);
+    return numBalls;
+  }, [pages]);
+  const indexForTheBallsCenter = (0, _react.useMemo)(function () {
+    return (numBalls - 1) / 2;
+  }, [numBalls]);
+  const balls = (0, _react.useMemo)(function () {
+    const indexForLastPages = pages + 1 - indexForTheBallsCenter;
+    /**
+     * Is the page index (position of the center)
+     * after the first pages and
+     * before the last pages */
+    const isCenterPage = numBalls >= MAX_BALLS && pageIndex > indexForTheBallsCenter && pageIndex < indexForLastPages - 1;
+    let modulus = pageIndex % (1 + (indexForTheBallsCenter - Math.floor(indexForTheBallsCenter)));
+    const resetPageIndex = isCenterPage ? indexForTheBallsCenter + modulus : pages < MAX_BALLS ? pageIndex : pageIndex >= indexForLastPages - 1 ? numBalls - (pages - pageIndex) : pageIndex;
+    const left = eachBallWidthEm * resetPageIndex;
+    const _ref2 = mode === PaginationIndicatorMode.CENTERED ? {
+        pushBallsToRightBy: Math.min(pages, MAX_BALLS) * eachBallWidthEm,
+        pushBallsToLeftBy: left,
+        pushGuideToRightBy: 0
+      } : {
+        pushBallsToRightBy: (eachBallWidthEm - 0.5) / 2,
+        pushBallsToLeftBy: 0,
+        pushGuideToRightBy: left
+      },
+      pushBallsToRightBy = _ref2.pushBallsToRightBy,
+      pushBallsToLeftBy = _ref2.pushBallsToLeftBy,
+      pushGuideToRightBy = _ref2.pushGuideToRightBy;
+    let pushToLeft = 0;
+    return new Array(CENTER_GUIDE_BALL + numBalls).fill(undefined).map(function (_, i) {
+      const isLastBall = i === numBalls - 1;
+      const isFirstBall = i === 0;
+      if (i === numBalls) {
+        const diameter = 0.45 * 2;
+        const padding = (eachBallWidthEm - diameter) / 2;
+        return /*#__PURE__*/_react.default.createElement("rect", {
+          fill: "#fff",
+          width: "".concat(diameter, "em"),
+          height: "".concat(diameter, "em"),
+          x: "".concat(pushBallsToRightBy - padding + pushGuideToRightBy - pushToLeft, "em"),
+          y: "".concat(padding, "em"),
+          rx: "".concat(diameter / 2, "em")
         });
-    }, [indexForTheBallsCenter, pageIndex, pages]);
-    const [guideBall, ...pageBalls] = balls.reverse();
-    let width = eachBallWidthEm * Math.min(pages, MAX_BALLS) * 2;
-    if (mode === PaginationIndicatorMode.START)
-        width /= 2;
-    return (react_1.default.createElement("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", className: className, style: {
-            width: `${width}em`,
-            minWidth: `${width}em`,
-            height: "1.2em",
-            fontSize: `${size}px`,
-        } },
-        react_1.default.createElement("filter", { id: `goo-${rand}` },
-            react_1.default.createElement("feGaussianBlur", { in: "SourceGraphic", result: "blur", stdDeviation: "5" }),
-            react_1.default.createElement("feColorMatrix", { in: "blur", mode: "matrix", values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7", result: "goo" }),
-            react_1.default.createElement("feBlend", { in2: "goo", in: "SourceGraphic", result: "mix" })),
-        react_1.default.createElement("mask", { id: `mask-${rand}` },
-            react_1.default.createElement("g", { filter: `url(#${`goo-${rand}`})`, fill: "#fff" },
-                [pageBalls],
-                guideBall)),
-        react_1.default.createElement("rect", { x: "0", y: "0", mask: `url(#${`mask-${rand}`})`, width: "100%", height: "100%", style: { fill: "var(--digital-blue)" } }),
-        onClickPage && (react_1.default.createElement("g", { opacity: 0, style: { cursor: "pointer" } }, pageBalls))));
+      }
+      const ballSize = numBalls < MAX_BALLS ? 0.5 : page <= indexForTheBallsCenter + 1 && isLastBall ? 0 : pageIndex >= indexForLastPages - 1 && isFirstBall ? 0 : isCenterPage ? isFirstBall ? 0.5 - modulus * 0.5 : isLastBall ? modulus * 0.5 : 0.5 : 0.5;
+      if (i === 0 && mode === PaginationIndicatorMode.START) pushToLeft = (0.5 - ballSize) * 2.4;
+      return /*#__PURE__*/_react.default.createElement("rect", {
+        key: "guide-".concat(i),
+        width: "".concat(ballSize * 1.2, "em"),
+        height: "".concat(ballSize * 1.2, "em"),
+        x: "".concat(pushBallsToRightBy + i * eachBallWidthEm - pushBallsToLeftBy - pushToLeft, "em"),
+        y: "".concat((eachBallWidthEm - ballSize * 1.2) / 2, "em"),
+        rx: "".concat(ballSize * 1.2 / 2, "em"),
+        onClick: function onClick() {
+          if (onClickPage) {
+            const pageClicked = (!isCenterPage ? pageIndex >= indexForLastPages - 1 ? Math.floor(page) - resetPageIndex - 1 : 0 : Math.floor(page) - (indexForTheBallsCenter + 1)) + 1 + i;
+            onClickPage(Math.round(pageClicked));
+          }
+        }
+      });
+    });
+  }, [indexForTheBallsCenter, pageIndex, pages]);
+  const _balls$reverse = balls.reverse(),
+    _balls$reverse2 = _toArray(_balls$reverse),
+    guideBall = _balls$reverse2[0],
+    pageBalls = _balls$reverse2.slice(1);
+  let width = eachBallWidthEm * Math.min(pages, MAX_BALLS) * 2;
+  if (mode === PaginationIndicatorMode.START) width /= 2;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: className,
+    style: {
+      width: "".concat(width, "em"),
+      minWidth: "".concat(width, "em"),
+      height: "1.2em",
+      fontSize: "".concat(size, "px")
+    }
+  }, /*#__PURE__*/_react.default.createElement("filter", {
+    id: "goo-".concat(rand)
+  }, /*#__PURE__*/_react.default.createElement("feGaussianBlur", {
+    in: "SourceGraphic",
+    result: "blur",
+    stdDeviation: "5"
+  }), /*#__PURE__*/_react.default.createElement("feColorMatrix", {
+    in: "blur",
+    mode: "matrix",
+    values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7",
+    result: "goo"
+  }), /*#__PURE__*/_react.default.createElement("feBlend", {
+    in2: "goo",
+    in: "SourceGraphic",
+    result: "mix"
+  })), /*#__PURE__*/_react.default.createElement("mask", {
+    id: "mask-".concat(rand)
+  }, /*#__PURE__*/_react.default.createElement("g", {
+    filter: "url(#".concat("goo-".concat(rand), ")"),
+    fill: "#fff"
+  }, [pageBalls], guideBall)), /*#__PURE__*/_react.default.createElement("rect", {
+    x: "0",
+    y: "0",
+    mask: "url(#".concat("mask-".concat(rand), ")"),
+    width: "100%",
+    height: "100%",
+    style: {
+      fill: "var(--digital-blue)"
+    }
+  }), onClickPage && /*#__PURE__*/_react.default.createElement("g", {
+    opacity: 0,
+    style: {
+      cursor: "pointer"
+    }
+  }, pageBalls));
 }
-exports.PaginationIndicatorView = PaginationIndicatorView;
-function _PaginationIndicator({ scrollableRef, estimatedWidth, size, className = "", onClickPage, }, ref) {
-    const [currentPage, setCurrentPage] = (0, react_1.useState)(1);
-    const [defs, setDefs] = (0, react_1.useState)();
-    const refreshPages = (0, react_1.useCallback)(() => {
-        if (!scrollableRef.current)
-            return;
-        const maxWidth = estimatedWidth === undefined
-            ? scrollableRef.current.scrollWidth
-            : estimatedWidth;
-        const pages = maxWidth / scrollableRef.current.clientWidth;
-        if (pages > 1)
-            setDefs({
-                pages,
-            });
-    }, [estimatedWidth]);
-    (0, react_1.useEffect)(() => refreshPages(), [refreshPages]);
-    const updatePageIndicators = (0, react_1.useCallback)((target, pages) => {
-        if (!scrollableRef.current)
-            return;
-        const eachPageWidth = scrollableRef.current.clientWidth;
-        const page = 1 + target.scrollLeft / eachPageWidth;
-        const lastPageProgress = Math.floor(pages) + 1;
-        const maximumProgress = pages + 1;
-        const diffToMax = maximumProgress - lastPageProgress;
-        const currentProgressOnDiff = page - lastPageProgress;
-        if (page > lastPageProgress)
-            setCurrentPage(lastPageProgress + currentProgressOnDiff / diffToMax);
-        else
-            setCurrentPage(page);
-    }, []);
-    (0, react_1.useImperativeHandle)(ref, () => ({
-        refreshPages,
-    }), []);
-    (0, react_1.useEffect)(() => {
-        if (!defs)
-            return;
-        const el = scrollableRef.current;
-        const onScroll = (e) => updatePageIndicators(e.currentTarget, defs.pages);
-        updatePageIndicators(el, defs.pages);
-        el.addEventListener("scroll", onScroll, {
-            passive: true
-        });
-        return () => {
-            el.removeEventListener("scroll", onScroll);
-        };
-    }, [defs]);
-    const pages = (0, react_1.useMemo)(() => (defs ? defs.pages : undefined), [defs]);
-    return !pages ? null : (react_1.default.createElement(PaginationIndicatorView, { pages: pages, page: currentPage, size: size, className: className, onClickPage: onClickPage }));
+function _PaginationIndicator(_ref3, ref) {
+  let scrollableRef = _ref3.scrollableRef,
+    estimatedWidth = _ref3.estimatedWidth,
+    size = _ref3.size,
+    _ref3$className = _ref3.className,
+    className = _ref3$className === void 0 ? "" : _ref3$className,
+    onClickPage = _ref3.onClickPage;
+  const _useState = (0, _react.useState)(1),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentPage = _useState2[0],
+    setCurrentPage = _useState2[1];
+  const _useState3 = (0, _react.useState)(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    defs = _useState4[0],
+    setDefs = _useState4[1];
+  const refreshPages = (0, _react.useCallback)(function () {
+    if (!scrollableRef.current) return;
+    const maxWidth = estimatedWidth === undefined ? scrollableRef.current.scrollWidth : estimatedWidth;
+    const pages = maxWidth / scrollableRef.current.clientWidth;
+    if (pages > 1) setDefs({
+      pages: pages
+    });
+  }, [estimatedWidth]);
+  (0, _react.useEffect)(function () {
+    return refreshPages();
+  }, [refreshPages]);
+  const updatePageIndicators = (0, _react.useCallback)(function (target, pages) {
+    if (!scrollableRef.current) return;
+    const eachPageWidth = scrollableRef.current.clientWidth;
+    const page = 1 + target.scrollLeft / eachPageWidth;
+    const lastPageProgress = Math.floor(pages) + 1;
+    const maximumProgress = pages + 1;
+    const diffToMax = maximumProgress - lastPageProgress;
+    const currentProgressOnDiff = page - lastPageProgress;
+    if (page > lastPageProgress) setCurrentPage(lastPageProgress + currentProgressOnDiff / diffToMax);else setCurrentPage(page);
+  }, []);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      refreshPages: refreshPages
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (!defs) return;
+    const el = scrollableRef.current;
+    const onScroll = function onScroll(e) {
+      return updatePageIndicators(e.currentTarget, defs.pages);
+    };
+    updatePageIndicators(el, defs.pages);
+    el.addEventListener("scroll", onScroll, {
+      passive: true
+    });
+    return function () {
+      el.removeEventListener("scroll", onScroll);
+    };
+  }, [defs]);
+  const pages = (0, _react.useMemo)(function () {
+    return defs ? defs.pages : undefined;
+  }, [defs]);
+  return !pages ? null : /*#__PURE__*/_react.default.createElement(PaginationIndicatorView, {
+    pages: pages,
+    page: currentPage,
+    size: size,
+    className: className,
+    onClickPage: onClickPage
+  });
 }
-exports.default = (0, react_1.forwardRef)(_PaginationIndicator);
-//# sourceMappingURL=PaginationIndicator.js.map
+var _default = /*#__PURE__*/(0, _react.forwardRef)(_PaginationIndicator);
+exports.default = _default;

package/dist/components/PaginationIndicator/index.js

@@ -1,9 +1,13 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var PaginationIndicator_1 = require("./PaginationIndicator");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(PaginationIndicator_1).default; } });
-//# sourceMappingURL=index.js.map
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _PaginationIndicator.default;
+  }
+});
+var _PaginationIndicator = _interopRequireDefault(require("./PaginationIndicator"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }