@nulogy/components 8.17.1 → 8.18.0

package/dist/main.js

@@ -48574,7 +48574,7 @@
       }
 
       if (disabled) {
-        return "inital";
+        return "initial";
       }
 
       return theme.colors.lightGrey;
@@ -48617,13 +48617,11 @@
       };
     });
 
-    // @ts-nocheck
-
     var PreviousButton = function PreviousButton(_ref) {
       var disabled = _ref.disabled,
           onClick = _ref.onClick,
           label = _ref.label,
-          ariaLabel = _ref["aria-label"];
+          ariaLabel = _ref.ariaLabel;
 
       var _useTranslation = useTranslation(),
           t = _useTranslation.t;
@@ -48642,22 +48640,18 @@
       disabled: PropTypes__default["default"].bool,
       onClick: PropTypes__default["default"].func,
       label: PropTypes__default["default"].node,
-      "aria-label": PropTypes__default["default"].string
+      ariaLabel: PropTypes__default["default"].string
     };
     PreviousButton.defaultProps = {
       disabled: false,
-      onClick: null,
-      label: undefined,
-      "aria-label": undefined
+      onClick: null
     };
 
-    // @ts-nocheck
-
     var NextButton = function NextButton(_ref) {
       var disabled = _ref.disabled,
           onClick = _ref.onClick,
           label = _ref.label,
-          ariaLabel = _ref["aria-label"];
+          ariaLabel = _ref.ariaLabel;
 
       var _useTranslation = useTranslation(),
           t = _useTranslation.t;
@@ -48676,91 +48670,112 @@
       disabled: PropTypes__default["default"].bool,
       onClick: PropTypes__default["default"].func,
       label: PropTypes__default["default"].node,
-      "aria-label": PropTypes__default["default"].string
+      ariaLabel: PropTypes__default["default"].string
     };
     NextButton.defaultProps = {
       disabled: false,
-      onClick: null,
-      label: undefined,
-      "aria-label": undefined
+      onClick: null
     };
 
-    var SEPERATOR = "...";
-    var getPageItemstoDisplay = function getPageItemstoDisplay(totalPages, currentPage) {
+    var SEPARATOR = "...";
+    var getPageItemsToDisplay = function getPageItemsToDisplay(totalPages, currentPage) {
+      var MAX_PAGES_TO_SHOW = 6;
       var pages = Array.from({
         length: totalPages
-      }, function (v, k) {
-        return k + 1;
+      }, function (v, i) {
+        return i + 1;
       });
-      var MAX_PAGES_TO_SHOW = 6;
       if (totalPages <= MAX_PAGES_TO_SHOW) return pages;
 
       if (currentPage <= MAX_PAGES_TO_SHOW - 1) {
-        return [].concat(pages.slice(0, 5), [SEPERATOR, totalPages]);
+        return [].concat(pages.slice(0, 5), [SEPARATOR, totalPages]);
       }
 
       if (currentPage > totalPages - 5) {
-        return [1, SEPERATOR].concat(pages.slice(totalPages - 5));
+        return [1, SEPARATOR].concat(pages.slice(totalPages - 5));
       }
 
-      return [1, SEPERATOR].concat(pages.slice(currentPage - 2, currentPage + 2), [SEPERATOR, totalPages]);
+      return [1, SEPARATOR].concat(pages.slice(currentPage - 2, currentPage + 2), [SEPARATOR, totalPages]);
     };
 
-    var Pagination = function Pagination(props) {
-      var currentPage = props.currentPage,
-          totalPages = props.totalPages,
-          onNext = props.onNext,
-          onPrevious = props.onPrevious,
-          onSelectPage = props.onSelectPage,
-          nextAriaLabel = props.nextAriaLabel,
-          nextLabel = props.nextLabel,
-          previousAriaLabel = props.previousAriaLabel,
-          previousLabel = props.previousLabel,
-          ariaLabel = props["aria-label"],
-          restProps = __rest(props, ["currentPage", "totalPages", "onNext", "onPrevious", "onSelectPage", "nextAriaLabel", "nextLabel", "previousAriaLabel", "previousLabel", "aria-label"]);
+    function Pagination(_a) {
+      var currentPage = _a.currentPage,
+          totalPages = _a.totalPages,
+          onNext = _a.onNext,
+          onPrevious = _a.onPrevious,
+          onSelectPage = _a.onSelectPage,
+          nextAriaLabel = _a.nextAriaLabel,
+          nextLabel = _a.nextLabel,
+          previousAriaLabel = _a.previousAriaLabel,
+          previousLabel = _a.previousLabel,
+          scrollToTopAfterPagination = _a.scrollToTopAfterPagination,
+          scrollTargetRef = _a.scrollTargetRef,
+          ariaLabel = _a["aria-label"],
+          restProps = __rest(_a, ["currentPage", "totalPages", "onNext", "onPrevious", "onSelectPage", "nextAriaLabel", "nextLabel", "previousAriaLabel", "previousLabel", "scrollToTopAfterPagination", "scrollTargetRef", "aria-label"]);
 
       var _useTranslation = useTranslation(),
           t = _useTranslation.t;
 
+      var scrollToTop = function scrollToTop() {
+        var _a, _b;
+
+        if (scrollToTopAfterPagination) {
+          var top = (scrollTargetRef === null || scrollTargetRef === void 0 ? void 0 : scrollTargetRef.current) ? window.scrollY + ((_b = (_a = scrollTargetRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.top) : 0;
+          window.scrollTo({
+            top: top,
+            behavior: "smooth"
+          });
+        }
+      };
+
       return /*#__PURE__*/React__default["default"].createElement(Flex, Object.assign({
         as: "nav",
         "aria-label": ariaLabel || t("pagination navigation")
       }, restProps), /*#__PURE__*/React__default["default"].createElement(PreviousButton, {
         disabled: currentPage === 1,
-        onClick: onPrevious,
+        onClick: function onClick() {
+          ne.flushSync(function () {
+            onPrevious();
+          });
+          scrollToTop();
+        },
         ariaLabel: previousAriaLabel,
         label: previousLabel
-      }), getPageItemstoDisplay(totalPages, currentPage).map(function (page, index) {
+      }), getPageItemsToDisplay(totalPages, currentPage).map(function (page, index) {
         var isCurrentPage = currentPage === page;
-        if (page === SEPERATOR) return (
-          /*#__PURE__*/
-          // eslint-disable-next-line react/no-array-index-key
-          React__default["default"].createElement(Text, {
-            key: "sep" + index,
-            py: "x1",
-            mr: "x2",
-            fontSize: "small",
-            lineHeight: "smallTextBase"
-          }, SEPERATOR)
-        );else return /*#__PURE__*/React__default["default"].createElement(PageNumber, {
+        if (page === SEPARATOR) return /*#__PURE__*/React__default["default"].createElement(Text, {
+          key: "sep" + index,
+          py: "x1",
+          mr: "x2",
+          fontSize: "small",
+          lineHeight: "smallTextBase"
+        }, SEPARATOR);else return /*#__PURE__*/React__default["default"].createElement(PageNumber, {
           "aria-current": isCurrentPage,
           currentPage: isCurrentPage,
           disabled: isCurrentPage,
           "aria-label": isCurrentPage ? null : t("go to page", {
-            count: page
+            count: Number(page)
           }),
           key: page,
           onClick: function onClick() {
-            return onSelectPage(page);
+            ne.flushSync(function () {
+              onSelectPage(page);
+            });
+            scrollToTop();
           }
         }, page);
       }), /*#__PURE__*/React__default["default"].createElement(NextButton, {
         disabled: currentPage === totalPages,
-        onClick: onNext,
+        onClick: function onClick() {
+          ne.flushSync(function () {
+            onNext();
+          });
+          scrollToTop();
+        },
         ariaLabel: nextAriaLabel,
         label: nextLabel
       }));
-    };
+    }
 
     Pagination.propTypes = {
       currentPage: PropTypes__default["default"].number.isRequired,

package/dist/main.module.js

@@ -11,7 +11,7 @@ import _typeof$1 from '@babel/runtime/helpers/typeof';
 import { stringify, COMMENT, rulesheet, middleware, RULESET, combine, match as match$k, serialize, copy as copy$1, replace, WEBKIT, MOZ, MS, KEYFRAMES, DECLARATION, compile, dealloc, alloc, hash as hash$2, charat, strlen, indexof, next, token, from, peek, delimit, slice, position as position$1 } from 'stylis';
 import _extends$4 from '@babel/runtime/helpers/extends';
 import 'hoist-non-react-statics';
-import ne, { createPortal, findDOMNode } from 'react-dom';
+import ne, { createPortal, findDOMNode, flushSync } from 'react-dom';
 import '@babel/runtime/helpers/objectSpread2';
 import '@babel/runtime/helpers/inherits';
 import '@babel/runtime/helpers/createSuper';
@@ -48557,7 +48557,7 @@ var getHoverBackground = function getHoverBackground(currentPage, disabled, them
   }
 
   if (disabled) {
-    return "inital";
+    return "initial";
   }
 
   return theme.colors.lightGrey;
@@ -48600,13 +48600,11 @@ var PageNumber = styled(PaginationButton).withConfig({
   };
 });
 
-// @ts-nocheck
-
 var PreviousButton = function PreviousButton(_ref) {
   var disabled = _ref.disabled,
       onClick = _ref.onClick,
       label = _ref.label,
-      ariaLabel = _ref["aria-label"];
+      ariaLabel = _ref.ariaLabel;
 
   var _useTranslation = useTranslation(),
       t = _useTranslation.t;
@@ -48625,22 +48623,18 @@ PreviousButton.propTypes = {
   disabled: PropTypes.bool,
   onClick: PropTypes.func,
   label: PropTypes.node,
-  "aria-label": PropTypes.string
+  ariaLabel: PropTypes.string
 };
 PreviousButton.defaultProps = {
   disabled: false,
-  onClick: null,
-  label: undefined,
-  "aria-label": undefined
+  onClick: null
 };
 
-// @ts-nocheck
-
 var NextButton = function NextButton(_ref) {
   var disabled = _ref.disabled,
       onClick = _ref.onClick,
       label = _ref.label,
-      ariaLabel = _ref["aria-label"];
+      ariaLabel = _ref.ariaLabel;
 
   var _useTranslation = useTranslation(),
       t = _useTranslation.t;
@@ -48659,91 +48653,112 @@ NextButton.propTypes = {
   disabled: PropTypes.bool,
   onClick: PropTypes.func,
   label: PropTypes.node,
-  "aria-label": PropTypes.string
+  ariaLabel: PropTypes.string
 };
 NextButton.defaultProps = {
   disabled: false,
-  onClick: null,
-  label: undefined,
-  "aria-label": undefined
+  onClick: null
 };
 
-var SEPERATOR = "...";
-var getPageItemstoDisplay = function getPageItemstoDisplay(totalPages, currentPage) {
+var SEPARATOR = "...";
+var getPageItemsToDisplay = function getPageItemsToDisplay(totalPages, currentPage) {
+  var MAX_PAGES_TO_SHOW = 6;
   var pages = Array.from({
     length: totalPages
-  }, function (v, k) {
-    return k + 1;
+  }, function (v, i) {
+    return i + 1;
   });
-  var MAX_PAGES_TO_SHOW = 6;
   if (totalPages <= MAX_PAGES_TO_SHOW) return pages;
 
   if (currentPage <= MAX_PAGES_TO_SHOW - 1) {
-    return [].concat(pages.slice(0, 5), [SEPERATOR, totalPages]);
+    return [].concat(pages.slice(0, 5), [SEPARATOR, totalPages]);
   }
 
   if (currentPage > totalPages - 5) {
-    return [1, SEPERATOR].concat(pages.slice(totalPages - 5));
+    return [1, SEPARATOR].concat(pages.slice(totalPages - 5));
   }
 
-  return [1, SEPERATOR].concat(pages.slice(currentPage - 2, currentPage + 2), [SEPERATOR, totalPages]);
+  return [1, SEPARATOR].concat(pages.slice(currentPage - 2, currentPage + 2), [SEPARATOR, totalPages]);
 };
 
-var Pagination = function Pagination(props) {
-  var currentPage = props.currentPage,
-      totalPages = props.totalPages,
-      onNext = props.onNext,
-      onPrevious = props.onPrevious,
-      onSelectPage = props.onSelectPage,
-      nextAriaLabel = props.nextAriaLabel,
-      nextLabel = props.nextLabel,
-      previousAriaLabel = props.previousAriaLabel,
-      previousLabel = props.previousLabel,
-      ariaLabel = props["aria-label"],
-      restProps = __rest(props, ["currentPage", "totalPages", "onNext", "onPrevious", "onSelectPage", "nextAriaLabel", "nextLabel", "previousAriaLabel", "previousLabel", "aria-label"]);
+function Pagination(_a) {
+  var currentPage = _a.currentPage,
+      totalPages = _a.totalPages,
+      onNext = _a.onNext,
+      onPrevious = _a.onPrevious,
+      onSelectPage = _a.onSelectPage,
+      nextAriaLabel = _a.nextAriaLabel,
+      nextLabel = _a.nextLabel,
+      previousAriaLabel = _a.previousAriaLabel,
+      previousLabel = _a.previousLabel,
+      scrollToTopAfterPagination = _a.scrollToTopAfterPagination,
+      scrollTargetRef = _a.scrollTargetRef,
+      ariaLabel = _a["aria-label"],
+      restProps = __rest(_a, ["currentPage", "totalPages", "onNext", "onPrevious", "onSelectPage", "nextAriaLabel", "nextLabel", "previousAriaLabel", "previousLabel", "scrollToTopAfterPagination", "scrollTargetRef", "aria-label"]);
 
   var _useTranslation = useTranslation(),
       t = _useTranslation.t;
 
+  var scrollToTop = function scrollToTop() {
+    var _a, _b;
+
+    if (scrollToTopAfterPagination) {
+      var top = (scrollTargetRef === null || scrollTargetRef === void 0 ? void 0 : scrollTargetRef.current) ? window.scrollY + ((_b = (_a = scrollTargetRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.top) : 0;
+      window.scrollTo({
+        top: top,
+        behavior: "smooth"
+      });
+    }
+  };
+
   return /*#__PURE__*/React__default.createElement(Flex, Object.assign({
     as: "nav",
     "aria-label": ariaLabel || t("pagination navigation")
   }, restProps), /*#__PURE__*/React__default.createElement(PreviousButton, {
     disabled: currentPage === 1,
-    onClick: onPrevious,
+    onClick: function onClick() {
+      flushSync(function () {
+        onPrevious();
+      });
+      scrollToTop();
+    },
     ariaLabel: previousAriaLabel,
     label: previousLabel
-  }), getPageItemstoDisplay(totalPages, currentPage).map(function (page, index) {
+  }), getPageItemsToDisplay(totalPages, currentPage).map(function (page, index) {
     var isCurrentPage = currentPage === page;
-    if (page === SEPERATOR) return (
-      /*#__PURE__*/
-      // eslint-disable-next-line react/no-array-index-key
-      React__default.createElement(Text, {
-        key: "sep" + index,
-        py: "x1",
-        mr: "x2",
-        fontSize: "small",
-        lineHeight: "smallTextBase"
-      }, SEPERATOR)
-    );else return /*#__PURE__*/React__default.createElement(PageNumber, {
+    if (page === SEPARATOR) return /*#__PURE__*/React__default.createElement(Text, {
+      key: "sep" + index,
+      py: "x1",
+      mr: "x2",
+      fontSize: "small",
+      lineHeight: "smallTextBase"
+    }, SEPARATOR);else return /*#__PURE__*/React__default.createElement(PageNumber, {
       "aria-current": isCurrentPage,
       currentPage: isCurrentPage,
       disabled: isCurrentPage,
       "aria-label": isCurrentPage ? null : t("go to page", {
-        count: page
+        count: Number(page)
       }),
       key: page,
       onClick: function onClick() {
-        return onSelectPage(page);
+        flushSync(function () {
+          onSelectPage(page);
+        });
+        scrollToTop();
       }
     }, page);
   }), /*#__PURE__*/React__default.createElement(NextButton, {
     disabled: currentPage === totalPages,
-    onClick: onNext,
+    onClick: function onClick() {
+      flushSync(function () {
+        onNext();
+      });
+      scrollToTop();
+    },
     ariaLabel: nextAriaLabel,
     label: nextLabel
   }));
-};
+}
 
 Pagination.propTypes = {
   currentPage: PropTypes.number.isRequired,

package/dist/src/Pagination/NextButton.d.ts

@@ -1,23 +1,22 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import PropTypes from "prop-types";
+type NextButtonProps = {
+    disabled: boolean;
+    onClick: React.MouseEventHandler<HTMLButtonElement>;
+    label: ReactNode;
+    ariaLabel: string;
+};
 declare const NextButton: {
-    ({ disabled, onClick, label, "aria-label": ariaLabel }: {
-        disabled: any;
-        onClick: any;
-        label: any;
-        "aria-label": any;
-    }): React.JSX.Element;
+    ({ disabled, onClick, label, ariaLabel }: NextButtonProps): React.JSX.Element;
     propTypes: {
         disabled: PropTypes.Requireable<boolean>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
         label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        "aria-label": PropTypes.Requireable<string>;
+        ariaLabel: PropTypes.Requireable<string>;
     };
     defaultProps: {
         disabled: boolean;
         onClick: any;
-        label: any;
-        "aria-label": any;
     };
 };
 export default NextButton;

package/dist/src/Pagination/PageNumber.d.ts

@@ -1,2 +1,5 @@
-declare const PageNumber: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+type PageNumberProps = {
+    currentPage: boolean;
+};
+declare const PageNumber: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, PageNumberProps, never>;
 export default PageNumber;

package/dist/src/Pagination/Pagination.d.ts

@@ -1,4 +1,43 @@
-import React from "react";
-export declare const getPageItemstoDisplay: (totalPages: any, currentPage: any) => any[];
-declare const Pagination: React.FC<any>;
+import React, { ReactNode, RefObject } from "react";
+import PropTypes from "prop-types";
+import { FlexProps } from "../Flex/Flex";
+export declare const getPageItemsToDisplay: (totalPages: number, currentPage: number) => (string | number)[];
+type PaginationProps = FlexProps & {
+    currentPage: number;
+    totalPages: number;
+    onNext?: () => void;
+    onPrevious?: () => void;
+    onSelectPage?: (page: string | number) => void;
+    nextLabel?: ReactNode;
+    nextAriaLabel?: string;
+    previousLabel?: ReactNode;
+    previousAriaLabel?: string;
+    scrollToTopAfterPagination?: boolean;
+    scrollTargetRef?: RefObject<HTMLElement>;
+};
+declare function Pagination({ currentPage, totalPages, onNext, onPrevious, onSelectPage, nextAriaLabel, nextLabel, previousAriaLabel, previousLabel, scrollToTopAfterPagination, scrollTargetRef, "aria-label": ariaLabel, ...restProps }: PaginationProps): React.JSX.Element;
+declare namespace Pagination {
+    var propTypes: {
+        currentPage: PropTypes.Validator<number>;
+        totalPages: PropTypes.Validator<number>;
+        onNext: PropTypes.Requireable<(...args: any[]) => any>;
+        onPrevious: PropTypes.Requireable<(...args: any[]) => any>;
+        onSelectPage: PropTypes.Requireable<(...args: any[]) => any>;
+        nextLabel: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        nextAriaLabel: PropTypes.Requireable<string>;
+        previousLabel: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        previousAriaLabel: PropTypes.Requireable<string>;
+        "aria-label": PropTypes.Requireable<string>;
+    };
+    var defaultProps: {
+        onNext: any;
+        onPrevious: any;
+        onSelectPage: any;
+        nextLabel: any;
+        nextAriaLabel: any;
+        previousLabel: any;
+        previousAriaLabel: any;
+        "aria-label": any;
+    };
+}
 export default Pagination;

package/dist/src/Pagination/Pagination.story.d.ts

@@ -22,3 +22,4 @@ export declare const WithLessThan5Pages: {
         name: string;
     };
 };
+export declare function ScrollAfterPagination(): React.JSX.Element;

package/dist/src/Pagination/PreviousButton.d.ts

@@ -1,18 +1,22 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import PropTypes from "prop-types";
+type PreviousButtonProps = {
+    disabled: boolean;
+    onClick: React.MouseEventHandler<HTMLButtonElement>;
+    label: ReactNode;
+    ariaLabel: string;
+};
 declare const PreviousButton: {
-    ({ disabled, onClick, label, "aria-label": ariaLabel }: any): React.JSX.Element;
+    ({ disabled, onClick, label, ariaLabel }: PreviousButtonProps): React.JSX.Element;
     propTypes: {
         disabled: PropTypes.Requireable<boolean>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
         label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        "aria-label": PropTypes.Requireable<string>;
+        ariaLabel: PropTypes.Requireable<string>;
     };
     defaultProps: {
         disabled: boolean;
         onClick: any;
-        label: any;
-        "aria-label": any;
     };
 };
 export default PreviousButton;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "8.17.1",
+  "version": "8.18.0",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {