carbon-react 111.12.3 → 111.12.5

package/esm/components/modal/__internal__/modal-manager.js

@@ -1,41 +1,54 @@
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 let ModalManagerInstance = /*#__PURE__*/function () {
   function ModalManagerInstance() {
     _classCallCheck(this, ModalManagerInstance);
+
     _defineProperty(this, "modalList", void 0);
+
     _defineProperty(this, "addModal", (modal, setTriggerRefocusFlag) => {
       if (!modal) {
         return;
       }
+
       const {
         modal: topModal,
         setTriggerRefocusFlag: setTrapFlag
       } = this.getTopModal();
+
       if (topModal && setTrapFlag) {
         setTrapFlag(false);
       }
+
       this.modalList.push({
         modal,
         setTriggerRefocusFlag
       });
       this.callTopModalSetters();
     });
+
     // Due to possibility of multiple carbon versions using it
     // it is necessary to maintain same structure in this global variable
     if (!window.__CARBON_INTERNALS_MODAL_LIST) {
       window.__CARBON_INTERNALS_MODAL_LIST = [];
     }
+
     this.modalList = window.__CARBON_INTERNALS_MODAL_LIST;
   }
+
   _createClass(ModalManagerInstance, [{
     key: "getTopModal",
     value: function getTopModal() {
       if (!this.modalList.length) {
         return {};
       }
+
       return this.modalList[this.modalList.length - 1];
     }
   }, {
@@ -44,9 +57,11 @@ let ModalManagerInstance = /*#__PURE__*/function () {
       const {
         modal: topModal
       } = this.getTopModal();
+
       if (!modal || !topModal) {
         return false;
       }
+
       return modal === topModal;
     }
   }, {
@@ -55,17 +70,22 @@ let ModalManagerInstance = /*#__PURE__*/function () {
       const modalIndex = this.modalList.findIndex(({
         modal: m
       }) => m === modal);
+
       if (modalIndex === -1) {
         return;
       }
+
       this.modalList.splice(modalIndex, 1);
       this.callTopModalSetters();
+
       if (!this.modalList.length) {
         return;
       }
+
       const {
         setTriggerRefocusFlag
       } = this.getTopModal();
+
       if (setTriggerRefocusFlag) {
         setTriggerRefocusFlag(true);
       }
@@ -82,15 +102,19 @@ let ModalManagerInstance = /*#__PURE__*/function () {
     value: function callTopModalSetters() {
       if (window.__CARBON_INTERNALS_MODAL_SETTER_LIST) {
         var _this$getTopModal;
+
         const topModal = ((_this$getTopModal = this.getTopModal()) === null || _this$getTopModal === void 0 ? void 0 : _this$getTopModal.modal) || null;
+
         for (const setTopModal of window.__CARBON_INTERNALS_MODAL_SETTER_LIST) {
           setTopModal(topModal);
         }
       }
     }
   }]);
+
   return ModalManagerInstance;
 }();
+
 const ModalManager = new ModalManagerInstance();
 export { ModalManagerInstance };
 export default ModalManager;

package/esm/components/modal/modal.component.js

@@ -1,4 +1,5 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React, { useEffect, useRef, useCallback, useState } from "react";
 import PropTypes from "prop-types";
 import { TransitionGroup, CSSTransition } from "react-transition-group";
@@ -8,6 +9,7 @@ import Events from "../../__internal__/utils/helpers/events";
 import useModalManager from "../../hooks/__internal__/useModalManager";
 import { StyledModal, StyledModalBackground } from "./modal.style";
 export const ModalContext = /*#__PURE__*/React.createContext({});
+
 const Modal = ({
   children,
   open,
@@ -31,6 +33,7 @@ const Modal = ({
     if (enableBackgroundUI) {
       return;
     }
+
     if (open) {
       blockScroll();
     } else {
@@ -53,6 +56,7 @@ const Modal = ({
   useModalManager(open, closeModal, ref, setTriggerRefocusFlag);
   let background;
   let content;
+
   if (open) {
     background = !enableBackgroundUI ? /*#__PURE__*/React.createElement(StyledModalBackground, {
       ref: backgroundNodeRef,
@@ -62,6 +66,7 @@ const Modal = ({
     }) : null;
     content = children;
   }
+
   return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(StyledModal, _extends({
     "data-state": open ? "open" : "closed",
     transitionName: "modal",
@@ -90,6 +95,7 @@ const Modal = ({
     ref: contentNodeRef
   }, content))))));
 };
+
 Modal.propTypes = {
   "ariaRole": PropTypes.string,
   "children": PropTypes.node,

package/esm/components/multi-action-button/multi-action-button.component.js

@@ -1,4 +1,5 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React, { useCallback, useState, useRef, useMemo } from "react";
 import PropTypes from "prop-types";
 import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
@@ -8,6 +9,7 @@ import Events from "../../__internal__/utils/helpers/events";
 import Popover from "../../__internal__/popover";
 import { filterStyledSystemMarginProps, filterOutStyledSystemSpacingProps } from "../../style/utils";
 import useMenuKeyboardNavigation from "../../hooks/__internal__/useMenuKeyboardNavigation";
+
 const MultiActionButton = ({
   align = "left",
   disabled,
@@ -31,19 +33,22 @@ const MultiActionButton = ({
     if (buttonRef.current === document.activeElement) return;
     setShowAdditionalButtons(false);
   }, []);
+
   const showButtons = () => {
     setShowAdditionalButtons(true);
-
     /* istanbul ignore else */
+
     if (ref.current) {
       setMinWidth(ref.current.getBoundingClientRect().width);
     }
   };
+
   const childrenWithProps = () => {
     return buttonChildren.map((child, index) => {
       if (! /*#__PURE__*/React.isValidElement(child)) {
         return child;
       }
+
       const props = {
         key: index.toString(),
         role: "menuitem",
@@ -51,6 +56,7 @@ const MultiActionButton = ({
         tabIndex: -1,
         onClick: ev => {
           var _buttonRef$current;
+
           if (child.props.onClick) child.props.onClick(ev);
           hideButtons();
           (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
@@ -59,17 +65,21 @@ const MultiActionButton = ({
       return /*#__PURE__*/React.cloneElement(child, props);
     });
   };
+
   const handleKeyDown = useMenuKeyboardNavigation(buttonRef, buttonChildrenRefs, hideButtons);
+
   const handleMainButtonKeyDown = ev => {
     if (Events.isEnterKey(ev) || Events.isSpaceKey(ev) || Events.isDownKey(ev) || Events.isUpKey(ev)) {
       ev.preventDefault();
+
       if (!showAdditionalButtons) {
         showButtons();
-      }
+      } // see if setTimeout could be removed after we update react to v18 thanks to the concurrent mode
+
 
-      // see if setTimeout could be removed after we update react to v18 thanks to the concurrent mode
       setTimeout(() => {
         var _buttonChildrenRefs$, _buttonChildrenRefs$$;
+
         (_buttonChildrenRefs$ = buttonChildrenRefs[0]) === null || _buttonChildrenRefs$ === void 0 ? void 0 : (_buttonChildrenRefs$$ = _buttonChildrenRefs$.current) === null || _buttonChildrenRefs$$ === void 0 ? void 0 : _buttonChildrenRefs$$.focus();
       }, 0);
     } else if (Events.isEscKey(ev)) {
@@ -77,6 +87,7 @@ const MultiActionButton = ({
       setShowAdditionalButtons(false);
     }
   };
+
   const mainButtonProps = {
     disabled,
     displayed: showAdditionalButtons,
@@ -90,6 +101,7 @@ const MultiActionButton = ({
     }),
     ...filterOutStyledSystemSpacingProps(rest)
   };
+
   const renderAdditionalButtons = () => /*#__PURE__*/React.createElement(Popover, {
     placement: "bottom-end",
     reference: ref
@@ -102,6 +114,7 @@ const MultiActionButton = ({
     ref: buttonContainer,
     onKeyDown: handleKeyDown
   }, childrenWithProps()));
+
   const handleClick = useClickAwayListener(hideButtons);
   return /*#__PURE__*/React.createElement(StyledMultiActionButton, _extends({
     "aria-haspopup": "true",
@@ -124,6 +137,7 @@ const MultiActionButton = ({
     iconType: "dropdown"
   }), text), showAdditionalButtons && renderAdditionalButtons());
 };
+
 MultiActionButton.propTypes = {
   "about": PropTypes.string,
   "accessKey": PropTypes.string,
@@ -186,6 +200,9 @@ MultiActionButton.propTypes = {
   "color": PropTypes.string,
   "contentEditable": PropTypes.oneOfType([PropTypes.oneOf(["false", "inherit", "true"]), PropTypes.bool]),
   "contextMenu": PropTypes.string,
+  "css": PropTypes.oneOfType([PropTypes.func, PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__emotion_styles": PropTypes.any.isRequired
+  }), PropTypes.string, PropTypes.bool]),
   "dangerouslySetInnerHTML": PropTypes.shape({
     "__html": PropTypes.string.isRequired
   }),

package/esm/components/navigation-bar/navigation-bar.component.js

@@ -1,7 +1,9 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React from "react";
 import PropTypes from "prop-types";
 import StyledNavigationBar from "./navigation-bar.style";
+
 const NavigationBar = ({
   navigationType = "light",
   isLoading = false,
@@ -22,6 +24,7 @@ const NavigationBar = ({
     orientation: orientation
   }, props), !isLoading && children);
 };
+
 NavigationBar.propTypes = {
   "alignContent": PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "normal", "revert", "space-around", "space-between", "space-evenly", "start", "stretch", "unset"]), PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "normal", "revert", "space-around", "space-between", "space-evenly", "start", "stretch", "unset", null]), PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,

package/esm/components/note/note.component.js

@@ -1,4 +1,5 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React from "react";
 import PropTypes from "prop-types";
 import { Editor } from "draft-js";
@@ -9,9 +10,11 @@ import { ActionPopover } from "../action-popover";
 import { getDecoratedValue } from "../text-editor/__internal__/utils";
 import { EditorContext } from "../text-editor/text-editor.component";
 import LinkPreview from "../link-preview";
+
 function hasExpectedDisplayName(child, displayName) {
   return child.type.displayName === displayName;
 }
+
 const Note = ({
   createdDate,
   inlineControl,
@@ -30,10 +33,12 @@ const Note = ({
   !(!status || status.text) ? process.env.NODE_ENV !== "production" ? invariant(false, "<Note> status.text is required") : invariant(false) : void 0;
   !(!status || status.timeStamp) ? process.env.NODE_ENV !== "production" ? invariant(false, "<Note> status.timeStamp is required") : invariant(false) : void 0;
   !(!inlineControl || /*#__PURE__*/React.isValidElement(inlineControl) && inlineControl.type === ActionPopover) ? process.env.NODE_ENV !== "production" ? invariant(false, "<Note> inlineControl must be an instance of <ActionPopover>") : invariant(false) : void 0;
+
   const renderStatus = () => {
     if (!status) {
       return null;
     }
+
     const {
       text,
       timeStamp
@@ -45,6 +50,7 @@ const Note = ({
       tooltipMessage: timeStamp
     }, text));
   };
+
   return /*#__PURE__*/React.createElement(EditorContext.Provider, {
     value: {
       onLinkAdded,
@@ -57,7 +63,9 @@ const Note = ({
   }), title && /*#__PURE__*/React.createElement(StyledTitle, null, title), inlineControl && /*#__PURE__*/React.createElement(StyledInlineControl, null, inlineControl), /*#__PURE__*/React.createElement(StyledNoteContent, null, /*#__PURE__*/React.createElement(Editor, {
     readOnly: true,
     editorState: getDecoratedValue(noteContent),
-    onChange: /* istanbul ignore next */() => {}
+    onChange:
+    /* istanbul ignore next */
+    () => {}
   })), React.Children.map(previews, preview => /*#__PURE__*/React.isValidElement(preview) && hasExpectedDisplayName(preview, LinkPreview.displayName) ? /*#__PURE__*/React.cloneElement(preview, {
     as: "a",
     onClose: undefined
@@ -69,6 +77,7 @@ const Note = ({
     hasName: !!name
   }, createdDate), renderStatus()))));
 };
+
 Note.propTypes = {
   "createdDate": PropTypes.string.isRequired,
   "inlineControl": PropTypes.node,

package/esm/components/number/number.component.js

@@ -1,6 +1,8 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React, { useRef } from "react";
 import Textbox from "../textbox";
+
 const Number = ({
   onChange,
   onKeyDown,
@@ -9,6 +11,7 @@ const Number = ({
 }) => {
   const selectionStart = useRef();
   const selectionEnd = useRef();
+
   const handleOnChange = event => {
     if (isValidNumber(event.target.value) && onChange) {
       onChange(event);
@@ -17,25 +20,29 @@ const Number = ({
       event.target.setSelectionRange(selectionStart.current, selectionEnd.current);
     }
   };
+
   const handleKeyDown = ev => {
     selectionStart.current = ev.target.selectionStart;
     selectionEnd.current = ev.target.selectionEnd;
+
     if (onKeyDown) {
       onKeyDown(ev);
     }
   };
+
   return /*#__PURE__*/React.createElement(Textbox, _extends({}, rest, {
     value: value,
     onChange: handleOnChange,
     onKeyDown: handleKeyDown
   }));
 };
+
 function isValidNumber(value) {
   const regex = new RegExp("^[-]?[0-9]*$");
   const result = regex.test(value);
   return result;
 }
-Number.propTypes = {
-  ...Textbox.propTypes
+
+Number.propTypes = { ...Textbox.propTypes
 };
 export default Number;

package/esm/components/numeral-date/numeral-date.component.js

@@ -1,4 +1,5 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React, { useContext, useState, useEffect, useRef, useMemo } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
@@ -17,14 +18,19 @@ import { NewValidationContext } from "../carbon-provider/carbon-provider.compone
 import NumeralDateContext from "./numeral-date-context";
 export const ALLOWED_DATE_FORMATS = [["dd", "mm", "yyyy"], ["mm", "dd", "yyyy"], ["dd", "mm"], ["mm", "dd"], ["mm", "yyyy"]];
 const incorrectDateFormatMessage = "Forbidden prop dateFormat supplied to NumeralDate. " + "Only one of these date formats is allowed: " + "['dd', 'mm', 'yyyy'], " + "['mm', 'dd', 'yyyy'], " + "['dd', 'mm'], " + "['mm', 'dd'], " + "['mm', 'yyyy']";
+
 const isDayValid = day => day ? +day > 0 && +day < 32 : true;
+
 const isMonthValid = month => month ? +month > 0 && +month < 13 : true;
+
 const isYearValid = year => year ? +year > 1799 && +year < 2201 : true;
+
 const validations = {
   dd: isDayValid,
   mm: isMonthValid,
   yyyy: isYearValid
 };
+
 const NumeralDate = ({
   dateFormat = ["dd", "mm", "yyyy"],
   defaultValue,
@@ -68,8 +74,7 @@ const NumeralDate = ({
   const isControlled = useRef(value !== undefined);
   const initialValue = isControlled.current ? value : defaultValue;
   const refs = useRef(dateFormat.map(() => /*#__PURE__*/React.createRef()));
-  const [internalMessages, setInternalMessages] = useState({
-    ...Object.fromEntries(dateFormat.map(datePart => [datePart, ""]))
+  const [internalMessages, setInternalMessages] = useState({ ...Object.fromEntries(dateFormat.map(datePart => [datePart, ""]))
   });
   const hasCorrectDateFormat = useMemo(() => {
     const isAllowed = !dateFormat || ALLOWED_DATE_FORMATS.find(allowedDateFormat => JSON.stringify(allowedDateFormat) === JSON.stringify(dateFormat));
@@ -85,9 +90,9 @@ const NumeralDate = ({
     mm: l.numeralDate.validation.month(),
     yyyy: l.numeralDate.validation.year()
   };
-  const [dateValue, setDateValue] = useState({
-    ...(initialValue || Object.fromEntries(dateFormat.map(datePart => [datePart, ""])))
+  const [dateValue, setDateValue] = useState({ ...(initialValue || Object.fromEntries(dateFormat.map(datePart => [datePart, ""])))
   });
+
   const createCustomEventObject = newValue => ({
     target: {
       name,
@@ -95,48 +100,55 @@ const NumeralDate = ({
       value: newValue
     }
   });
+
   const onKeyPress = event => {
     const isValidKey = Events.isNumberKey(event) || Events.isTabKey(event) || event.key === "Delete" || event.key === "Backspace";
+
     if (!isValidKey) {
       event.preventDefault();
     }
   };
+
   const handleChange = (event, datePart) => {
     const {
       value: newValue
     } = event.target;
+
     if (newValue.length <= datePart.length) {
-      const newDateValue = {
-        ...dateValue,
+      const newDateValue = { ...dateValue,
         [datePart]: newValue
       };
       setDateValue(newDateValue);
-
       /* istanbul ignore else */
+
       if (onChange) {
         onChange(createCustomEventObject(newDateValue));
       }
     }
   };
+
   const handleBlur = datePart => {
     const internalValidationEnabled = enableInternalError || enableInternalWarning;
     /* istanbul ignore else */
+
     if (internalValidationEnabled) {
       const newDatePart = dateValue[datePart];
       const errorMessage = validations[datePart](newDatePart) ? "" : validationMessages[datePart];
-      setInternalMessages(prev => ({
-        ...prev,
+      setInternalMessages(prev => ({ ...prev,
         [datePart]: errorMessage
       }));
     }
+
     setTimeout(() => {
       const hasBlurred = !refs.current.find(ref => ref.current === document.activeElement);
       /* istanbul ignore else */
+
       if (onBlur && hasBlurred) {
         onBlur(createCustomEventObject(dateValue));
       }
     }, 5);
   };
+
   const internalMessage = Object.keys(internalMessages).reduce((combinedMessage, datePart) => internalMessages[datePart] ? `${combinedMessage + internalMessages[datePart]}\n` : combinedMessage, "");
   const internalError = enableInternalError ? internalMessage + error : error;
   const internalWarning = enableInternalWarning ? internalMessage + warning : warning;
@@ -213,6 +225,7 @@ const NumeralDate = ({
     }))));
   })))));
 };
+
 NumeralDate.propTypes = {
   "adaptiveLabelBreakpoint": PropTypes.number,
   "data-component": PropTypes.string,

package/esm/components/pager/__internal__/pager-navigation-link.component.js

@@ -2,6 +2,7 @@ import React, { useRef, useEffect, useCallback } from "react";
 import PropTypes from "prop-types";
 import { StyledPagerLinkStyles } from "../pager.style";
 import useLocale from "../../../hooks/__internal__/useLocale";
+
 const PagerNavigationLink = ({
   type,
   currentPage,
@@ -34,9 +35,11 @@ const PagerNavigationLink = ({
     if (currentPage === 1) {
       return type === "previous" || type === "first";
     }
+
     if (currentPage === pageCount) {
       return type === "next" || type === "last";
     }
+
     return false;
   }, [pageCount, currentPage, type]);
   useEffect(() => {
@@ -44,10 +47,12 @@ const PagerNavigationLink = ({
       linkRef.current.blur();
     }
   }, [disabled]);
+
   const handleOnCLick = e => {
     onClick(e);
     onPagination(navLinkConfig[type].destination, pageSize, type);
   };
+
   const {
     text
   } = navLinkConfig[type];
@@ -58,17 +63,23 @@ const PagerNavigationLink = ({
     ref: linkRef
   }, text);
 };
+
 PagerNavigationLink.propTypes = {
   /** Type of Pagination link to be allowed for navigation */
   type: PropTypes.oneOf(["next", "previous", "first", "last"]).isRequired,
+
   /** Current visible page */
   currentPage: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+
   /** Count of all the pages  */
   pageCount: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+
   /** Pagination page size */
   pageSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+
   /** onClick Callback function */
   onClick: PropTypes.func,
+
   /** onPagination Callback to process pagination  */
   onPagination: PropTypes.func
 };

package/esm/components/pager/__internal__/pager-navigation.component.js

@@ -1,4 +1,5 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React, { useRef } from "react";
 import PropTypes from "prop-types";
 import { StyledPagerNavigation, StyledPagerNavInner, StyledPagerNoSelect } from "../pager.style";
@@ -8,6 +9,7 @@ import createGuid from "../../../__internal__/utils/helpers/guid";
 import PagerNavigationLink from "./pager-navigation-link.component";
 import Label from "../../../__internal__/label";
 import useLocale from "../../../hooks/__internal__/useLocale";
+
 const PagerNavigation = ({
   pageSize,
   currentPage,
@@ -33,29 +35,35 @@ const PagerNavigation = ({
     pageCount,
     onPagination
   };
+
   const handlePageInputChange = ev => {
     if (pageCount === 0) {
       setCurrentPage(0);
       onPagination(0, pageSize, "input");
       return "0";
     }
+
     if (Number(ev.target.value) <= 0 || Number.isNaN(Number(ev.target.value))) {
       setCurrentPage(1);
       onPagination(1, pageSize, "input");
       return "1";
     }
+
     if (Number(ev.target.value) > pageCount) {
       setCurrentPage(pageCount);
       onPagination(pageCount, pageSize, "input");
       return pageCount;
     }
+
     setCurrentPage(Number(ev.target.value));
     onPagination(Number(ev.target.value), pageSize, "input");
     return ev.target.value;
   };
+
   const handleCurrentPageChange = e => {
     setCurrentPage(e.target.value);
   };
+
   const renderButtonsBeforeCount = () => /*#__PURE__*/React.createElement(React.Fragment, null, !hasTwoPages && showFirstAndLastButtons && /*#__PURE__*/React.createElement(PagerNavigationLink, _extends({
     type: "first",
     onClick: onFirst
@@ -63,6 +71,7 @@ const PagerNavigation = ({
     type: "previous",
     onClick: onPrevious
   }, pagerNavigationProps)));
+
   const renderButtonsAfterCount = () => /*#__PURE__*/React.createElement(React.Fragment, null, showPreviousAndNextButtons && /*#__PURE__*/React.createElement(PagerNavigationLink, _extends({
     type: "next",
     onClick: onNext
@@ -70,6 +79,7 @@ const PagerNavigation = ({
     type: "last",
     onClick: onLast
   }, pagerNavigationProps)));
+
   return /*#__PURE__*/React.createElement(StyledPagerNavigation, null, !hasOnePage && renderButtonsBeforeCount(), showPageCount && /*#__PURE__*/React.createElement(StyledPagerNavInner, null, /*#__PURE__*/React.createElement(StyledPagerNoSelect, null, l.pager.pageX()), /*#__PURE__*/React.createElement(Label, {
     htmlFor: currentPageId
   }, /*#__PURE__*/React.createElement(NumberInput, {
@@ -81,29 +91,41 @@ const PagerNavigation = ({
     onKeyUp: ev => Events.isEnterKey(ev) ? handlePageInputChange(ev) : false
   })), /*#__PURE__*/React.createElement(StyledPagerNoSelect, null, l.pager.ofY(pageCount))), !hasOnePage && renderButtonsAfterCount());
 };
+
 PagerNavigation.propTypes = {
   /** Current visible page */
   currentPage: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+
   /** Pagination page size */
   pageSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
   /* Count of all of the pages */
   pageCount: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
   /** Sets the current page being shown */
   setCurrentPage: PropTypes.func,
+
   /** onFirst Callback triggered when first link is triggered */
   onFirst: PropTypes.func,
+
   /** onPrevious Callback triggered when previous link is triggered */
   onPrevious: PropTypes.func,
+
   /** onNext Callback triggered when next link is triggered */
   onNext: PropTypes.func,
+
   /** onLast Callback triggered when last link is triggered */
   onLast: PropTypes.func,
+
   /** onPagination Callback triggered when a change is triggered */
   onPagination: PropTypes.func,
+
   /** Should the `First` and `Last` navigation buttons be shown */
   showFirstAndLastButtons: PropTypes.bool,
+
   /** Should the `Next` and `Previous` navigation buttons be shown */
   showPreviousAndNextButtons: PropTypes.bool,
+
   /** Should the page count input be shown */
   showPageCount: PropTypes.bool
 };