carbon-react 111.22.4 → 112.0.0

package/esm/components/pager/__internal__/pager-navigation-link.component.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+interface PagerNavigationLinkProps {
+    /** Type of Pagination link to be allowed for navigation */
+    type: "next" | "previous" | "first" | "last";
+    /** Current visible page */
+    currentPage: number;
+    /** Count of all the pages  */
+    pageCount: number;
+    /** Pagination page size */
+    pageSize: number;
+    /** onClick Callback function */
+    onClick?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    /** onPagination Callback to process pagination  */
+    onPagination?: (pageSize: number, currentPage: number, origin: string) => void;
+}
+declare const PagerNavigationLink: ({ type, currentPage, pageCount, pageSize, onClick, onPagination, }: PagerNavigationLinkProps) => JSX.Element;
+export default PagerNavigationLink;

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

@@ -1,6 +1,6 @@
 import React, { useRef, useEffect, useCallback } from "react";
 import PropTypes from "prop-types";
-import { StyledPagerLinkStyles } from "../pager.style";
+import { StyledPagerLink } from "../pager.style";
 import useLocale from "../../../hooks/__internal__/useLocale";
 
 const PagerNavigationLink = ({
@@ -12,11 +12,11 @@ const PagerNavigationLink = ({
   onPagination
 }) => {
   const l = useLocale();
-  const linkRef = useRef();
+  const linkRef = useRef(null);
   const navLinkConfig = {
     first: {
       text: l.pager.first(),
-      destination: "1"
+      destination: 1
     },
     last: {
       text: l.pager.last(),
@@ -48,39 +48,30 @@ const PagerNavigationLink = ({
     }
   }, [disabled]);
 
-  const handleOnCLick = e => {
-    onClick(e);
-    onPagination(navLinkConfig[type].destination, pageSize, type);
+  const handleOnCLick = ev => {
+    onClick === null || onClick === void 0 ? void 0 : onClick(ev);
+    onPagination === null || onPagination === void 0 ? void 0 : onPagination(navLinkConfig[type].destination, pageSize, type);
   };
 
   const {
     text
   } = navLinkConfig[type];
-  return /*#__PURE__*/React.createElement(StyledPagerLinkStyles, {
+  return /*#__PURE__*/React.createElement(StyledPagerLink, {
     "data-element": `pager-link-${type}`,
     disabled: disabled(),
-    onClick: handleOnCLick,
+    onClick: // Type assertion due to the fact that StyledPagerLink
+    // will always return a button element
+    handleOnCLick,
     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
+  "currentPage": PropTypes.number.isRequired,
+  "onClick": PropTypes.func,
+  "onPagination": PropTypes.func,
+  "pageCount": PropTypes.number.isRequired,
+  "pageSize": PropTypes.number.isRequired,
+  "type": PropTypes.oneOf(["first", "last", "next", "previous"]).isRequired
 };
 export default PagerNavigationLink;

package/esm/components/pager/__internal__/pager-navigation.component.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+export interface PagerNavigationProps {
+    /** Current visible page */
+    currentPage: number;
+    /** Pagination page size */
+    pageSize: number;
+    pageCount: number;
+    /** Sets the current page being shown */
+    setCurrentPage: (page: number) => void;
+    /** Callback function for next link */
+    onNext?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    /** Callback function for first link */
+    onFirst?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    /** Callback function for previous link */
+    onPrevious?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    /** Callback function for last link */
+    onLast?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    /** onPagination Callback triggered when a change is triggered */
+    onPagination: (pageSize: number, currentPage: number, origin: string) => void;
+    /** Should the `First` and `Last` navigation buttons be shown */
+    showFirstAndLastButtons?: boolean;
+    /** Should the `Next` and `Previous` navigation buttons be shown */
+    showPreviousAndNextButtons?: boolean;
+    /** Should the page count input be shown */
+    showPageCount?: boolean;
+}
+declare const PagerNavigation: ({ pageSize, currentPage, setCurrentPage, onNext, onPrevious, onFirst, onLast, onPagination, pageCount, showFirstAndLastButtons, showPreviousAndNextButtons, showPageCount, }: PagerNavigationProps) => JSX.Element;
+export default PagerNavigation;

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

@@ -36,31 +36,33 @@ const PagerNavigation = ({
   };
 
   const handlePageInputChange = ev => {
+    const pageNumber = +ev.target.value;
+
     if (pageCount === 0) {
       setCurrentPage(0);
       onPagination(0, pageSize, "input");
-      return "0";
+      return 0;
     }
 
-    if (Number(ev.target.value) <= 0 || Number.isNaN(Number(ev.target.value))) {
+    if (pageNumber <= 0 || Number.isNaN(pageNumber)) {
       setCurrentPage(1);
       onPagination(1, pageSize, "input");
-      return "1";
+      return 1;
     }
 
-    if (Number(ev.target.value) > pageCount) {
+    if (pageNumber > 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;
+    setCurrentPage(pageNumber);
+    onPagination(pageNumber, pageSize, "input");
+    return pageNumber;
   };
 
   const handleCurrentPageChange = e => {
-    setCurrentPage(e.target.value);
+    setCurrentPage(+e.target.value);
   };
 
   const renderButtonsBeforeCount = () => /*#__PURE__*/React.createElement(React.Fragment, null, !hasTwoPages && showFirstAndLastButtons && /*#__PURE__*/React.createElement(PagerNavigationLink, _extends({
@@ -92,40 +94,17 @@ const PagerNavigation = ({
 };
 
 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
+  "currentPage": PropTypes.number.isRequired,
+  "onFirst": PropTypes.func,
+  "onLast": PropTypes.func,
+  "onNext": PropTypes.func,
+  "onPagination": PropTypes.func.isRequired,
+  "onPrevious": PropTypes.func,
+  "pageCount": PropTypes.number.isRequired,
+  "pageSize": PropTypes.number.isRequired,
+  "setCurrentPage": PropTypes.func.isRequired,
+  "showFirstAndLastButtons": PropTypes.bool,
+  "showPageCount": PropTypes.bool,
+  "showPreviousAndNextButtons": PropTypes.bool
 };
 export default PagerNavigation;

package/esm/components/pager/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./pager";
-export * from "./pager";
+export { default } from "./pager.component";
+export type { PagerProps } from "./pager.component";

package/esm/components/pager/pager.component.d.ts

@@ -0,0 +1,43 @@
+import React from "react";
+declare type PageSizeOption = {
+    id: string;
+    name: number;
+};
+export interface PagerProps {
+    /** Function called when pager changes (PageSize, Current Page) */
+    onPagination: (pageSize: number, currentPage: number, origin: string) => void;
+    /** Callback function for next link */
+    onNext?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    /** Callback function for first link */
+    onFirst?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    /** Callback function for previous link */
+    onPrevious?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    /** Callback function for last link */
+    onLast?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    /** Current visible page */
+    currentPage?: number | string;
+    /** Total number of records */
+    totalRecords?: number | string;
+    /** Pagination page size */
+    pageSize?: number | string;
+    /** Should the page size selection dropdown be shown */
+    showPageSizeSelection?: boolean;
+    /** Set of page size options */
+    pageSizeSelectionOptions?: PageSizeOption[];
+    /** Should the label before the page size selection dropdown be shown */
+    showPageSizeLabelBefore?: boolean;
+    /** Should the label after the page size selection dropdown be shown */
+    showPageSizeLabelAfter?: boolean;
+    /** Should the total records label be shown */
+    showTotalRecords?: boolean;
+    /** Should the `First` and `Last` navigation button be shown */
+    showFirstAndLastButtons?: boolean;
+    /** Should the `Previous` and `Next` navigation button be shown */
+    showPreviousAndNextButtons?: boolean;
+    /** Should the page count input be shown */
+    showPageCount?: boolean;
+    /** What variant the Pager background should be */
+    variant?: "default" | "alternate";
+}
+export declare const Pager: ({ currentPage, pageSizeSelectionOptions, pageSize, showPageSizeSelection, totalRecords, onPagination, onNext, onFirst, onPrevious, onLast, showPageSizeLabelBefore, showPageSizeLabelAfter, showTotalRecords, showFirstAndLastButtons, showPreviousAndNextButtons, showPageCount, variant, ...rest }: PagerProps) => JSX.Element;
+export default Pager;

package/esm/components/pager/pager.component.js

@@ -2,9 +2,8 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useState, useCallback, useEffect, useRef } from "react";
 import PropTypes from "prop-types";
-import { Select } from "../select";
+import { Select, Option } from "../select";
 import PagerNavigation from "./__internal__/pager-navigation.component";
-import Option from "../select/option/option.component";
 import useLocale from "../../hooks/__internal__/useLocale";
 import createGuid from "../../__internal__/utils/helpers/guid";
 import { StyledPagerContainer, StyledPagerSizeOptions, StyledPagerSummary, StyledPagerSizeOptionsInner, StyledSelectContainer } from "./pager.style";
@@ -43,31 +42,31 @@ const Pager = ({
   ...rest
 }) => {
   const l = useLocale();
-  const [page, setPage] = useState(currentPage);
-  const [currentPageSize, setCurrentPageSize] = useState(pageSize);
-  const [value, setValue] = useState(pageSize);
+  const [page, setPage] = useState(+currentPage);
+  const [currentPageSize, setCurrentPageSize] = useState(+pageSize);
+  const [value, setValue] = useState(+pageSize);
   const guid = useRef(createGuid());
   const pageSizeSelectId = `Pager_size_selector_${guid.current}`;
   const getPageCount = useCallback(() => {
-    if (Number(totalRecords) < 0 || Number.isNaN(Number(totalRecords))) {
+    if (+totalRecords < 0 || Number.isNaN(+totalRecords)) {
       return 1;
     }
 
-    return Math.ceil(totalRecords / currentPageSize);
+    return Math.ceil(+totalRecords / currentPageSize);
   }, [totalRecords, currentPageSize]);
   const [pageCount, setPageCount] = useState(getPageCount());
   useEffect(() => {
-    setCurrentPageSize(Number(pageSize));
-    setValue(pageSize);
+    setCurrentPageSize(+pageSize);
+    setValue(+pageSize);
   }, [pageSize]);
   useEffect(() => {
     const maxPage = getPageCount();
     setPageCount(maxPage);
 
-    if (Number(currentPage) > maxPage) {
+    if (+currentPage > maxPage) {
       setPage(maxPage);
     } else {
-      setPage(Number(currentPage));
+      setPage(+currentPage);
     }
   }, [currentPageSize, pageCount, currentPage, totalRecords, getPageCount]);
   const handleOnFirst = useCallback(e => {
@@ -102,15 +101,15 @@ const Pager = ({
   }, [page, onPrevious]);
   const handleOnPagination = useCallback(e => {
     setValue(e.target.value);
-    setCurrentPageSize(Number(e.target.value));
-    onPagination(1, Number(e.target.value), "page-select");
+    setCurrentPageSize(+e.target.value);
+    onPagination(1, +e.target.value, "page-select");
   }, [onPagination]);
   const handleKeyDown = useCallback(e => Events.isEnterKey(e) && handleOnPagination(e), [handleOnPagination]);
 
   const sizeSelector = () => {
     return /*#__PURE__*/React.createElement(StyledSelectContainer, null, /*#__PURE__*/React.createElement(Select, {
       value: String(value),
-      onChange: ev => setValue(ev.target.value),
+      onChange: ev => setValue(+ev.target.value),
       onBlur: () => setValue(currentPageSize),
       onKeyDown: handleKeyDown,
       "data-element": "page-select",
@@ -151,58 +150,26 @@ const Pager = ({
 };
 
 Pager.propTypes = {
-  /** Function called when pager changes (PageSize, Current Page) */
-  onPagination: PropTypes.func.isRequired,
-
-  /** Callback function for next link */
-  onNext: PropTypes.func,
-
-  /** Callback function for first link */
-  onFirst: PropTypes.func,
-
-  /** Callback function for previous link */
-  onPrevious: PropTypes.func,
-
-  /** Callback function for last link */
-  onLast: PropTypes.func,
-
-  /** Current visible page */
-  currentPage: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
-  /** Total number of records */
-  totalRecords: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
-  /** Pagination page size */
-  pageSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
-  /** Set of page size options */
-  pageSizeSelectionOptions: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    name: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  "currentPage": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  "onFirst": PropTypes.func,
+  "onLast": PropTypes.func,
+  "onNext": PropTypes.func,
+  "onPagination": PropTypes.func.isRequired,
+  "onPrevious": PropTypes.func,
+  "pageSize": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  "pageSizeSelectionOptions": PropTypes.arrayOf(PropTypes.shape({
+    "id": PropTypes.string.isRequired,
+    "name": PropTypes.number.isRequired
   })),
-
-  /** Should the page size selection dropdown be shown */
-  showPageSizeSelection: PropTypes.bool,
-
-  /** Should the label before the page size selection dropdown be shown */
-  showPageSizeLabelBefore: PropTypes.bool,
-
-  /** Should the label after the page size selection dropdown be shown */
-  showPageSizeLabelAfter: PropTypes.bool,
-
-  /** Should the total records label be shown */
-  showTotalRecords: PropTypes.bool,
-
-  /** Should the `First` and `Last` navigation button be shown */
-  showFirstAndLastButtons: PropTypes.bool,
-
-  /** Should the `Previous` and `Next` navigation button be shown */
-  showPreviousAndNextButtons: PropTypes.bool,
-
-  /** Should the page count input be shown */
-  showPageCount: PropTypes.bool,
-
-  /** What variant the Pager background should be */
-  variant: PropTypes.oneOf(["default", "alternate"])
+  "showFirstAndLastButtons": PropTypes.bool,
+  "showPageCount": PropTypes.bool,
+  "showPageSizeLabelAfter": PropTypes.bool,
+  "showPageSizeLabelBefore": PropTypes.bool,
+  "showPageSizeSelection": PropTypes.bool,
+  "showPreviousAndNextButtons": PropTypes.bool,
+  "showTotalRecords": PropTypes.bool,
+  "totalRecords": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  "variant": PropTypes.oneOf(["alternate", "default"])
 };
+export { Pager };
 export default Pager;

package/esm/components/pager/pager.style.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { PagerProps } from ".";
+declare const StyledSelectContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledPagerContainer: import("styled-components").StyledComponent<"div", any, Pick<PagerProps, "variant">, never>;
+declare const StyledPagerSizeOptions: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledPagerSizeOptionsInner: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledPagerNavigation: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledPagerNavInner: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledPagerLink: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../link").LinkProps & import("react").RefAttributes<HTMLButtonElement | HTMLLinkElement>>, any, {}, never>;
+declare const StyledPagerNoSelect: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledPagerSummary: import("styled-components").StyledComponent<"div", any, {}, never>;
+export { StyledPagerContainer, StyledPagerSizeOptions, StyledPagerSizeOptionsInner, StyledPagerNavigation, StyledPagerNavInner, StyledPagerLink, StyledPagerNoSelect, StyledPagerSummary, StyledSelectContainer, };

package/esm/components/pager/pager.style.js

@@ -95,7 +95,7 @@ const StyledPagerNavInner = styled.div`
     margin-bottom: 0;
   }
 `;
-const StyledPagerLinkStyles = styled(Link)`
+const StyledPagerLink = styled(Link)`
   padding: 0 10px;
   margin-left: 7px;
   margin-right: 7px;
@@ -110,4 +110,4 @@ const StyledPagerSummary = styled.div`
   flex: 1 1 30%;
   justify-content: flex-end;
 `;
-export { StyledPagerContainer, StyledPagerSizeOptions, StyledPagerSizeOptionsInner, StyledPagerNavigation, StyledPagerNavInner, StyledPagerLinkStyles, StyledPagerNoSelect, StyledPagerSummary, StyledSelectContainer };
+export { StyledPagerContainer, StyledPagerSizeOptions, StyledPagerSizeOptionsInner, StyledPagerNavigation, StyledPagerNavInner, StyledPagerLink, StyledPagerNoSelect, StyledPagerSummary, StyledSelectContainer };

package/esm/components/select/__internal__/select-text/select-text.style.d.ts

@@ -0,0 +1,2 @@
+export default StyledSelectText;
+declare const StyledSelectText: import("styled-components").StyledComponent<"span", any, {}, never>;

package/esm/components/select/option/index.d.ts

@@ -11,6 +11,11 @@ export interface OptionProps {
   borderColor?: string;
   /** MultiSelect only - fill Pill background with color */
   fill?: boolean;
+  /**
+   * @private
+   * @ignore
+   * OnClick callback */
+  onClick?: (ev: React.MouseEvent<HTMLLIElement>) => void;
 }
 
 declare function Option(

package/esm/locales/locale.d.ts

@@ -48,7 +48,7 @@ interface Locale {
     };
     pager: {
         show: () => string;
-        records: (count: number | string, showNumber: boolean) => string;
+        records: (count: number | string, showNumber?: boolean) => string;
         first: () => string;
         last: () => string;
         next: () => string;

package/lib/components/pager/__internal__/pager-navigation-link.component.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+interface PagerNavigationLinkProps {
+    /** Type of Pagination link to be allowed for navigation */
+    type: "next" | "previous" | "first" | "last";
+    /** Current visible page */
+    currentPage: number;
+    /** Count of all the pages  */
+    pageCount: number;
+    /** Pagination page size */
+    pageSize: number;
+    /** onClick Callback function */
+    onClick?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    /** onPagination Callback to process pagination  */
+    onPagination?: (pageSize: number, currentPage: number, origin: string) => void;
+}
+declare const PagerNavigationLink: ({ type, currentPage, pageCount, pageSize, onClick, onPagination, }: PagerNavigationLinkProps) => JSX.Element;
+export default PagerNavigationLink;

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

@@ -28,11 +28,11 @@ const PagerNavigationLink = ({
   onPagination
 }) => {
   const l = (0, _useLocale.default)();
-  const linkRef = (0, _react.useRef)();
+  const linkRef = (0, _react.useRef)(null);
   const navLinkConfig = {
     first: {
       text: l.pager.first(),
-      destination: "1"
+      destination: 1
     },
     last: {
       text: l.pager.last(),
@@ -64,40 +64,31 @@ const PagerNavigationLink = ({
     }
   }, [disabled]);
 
-  const handleOnCLick = e => {
-    onClick(e);
-    onPagination(navLinkConfig[type].destination, pageSize, type);
+  const handleOnCLick = ev => {
+    onClick === null || onClick === void 0 ? void 0 : onClick(ev);
+    onPagination === null || onPagination === void 0 ? void 0 : onPagination(navLinkConfig[type].destination, pageSize, type);
   };
 
   const {
     text
   } = navLinkConfig[type];
-  return /*#__PURE__*/_react.default.createElement(_pager.StyledPagerLinkStyles, {
+  return /*#__PURE__*/_react.default.createElement(_pager.StyledPagerLink, {
     "data-element": `pager-link-${type}`,
     disabled: disabled(),
-    onClick: handleOnCLick,
+    onClick: // Type assertion due to the fact that StyledPagerLink
+    // will always return a button element
+    handleOnCLick,
     ref: linkRef
   }, text);
 };
 
 PagerNavigationLink.propTypes = {
-  /** Type of Pagination link to be allowed for navigation */
-  type: _propTypes.default.oneOf(["next", "previous", "first", "last"]).isRequired,
-
-  /** Current visible page */
-  currentPage: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-
-  /** Count of all the pages  */
-  pageCount: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-
-  /** Pagination page size */
-  pageSize: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-
-  /** onClick Callback function */
-  onClick: _propTypes.default.func,
-
-  /** onPagination Callback to process pagination  */
-  onPagination: _propTypes.default.func
+  "currentPage": _propTypes.default.number.isRequired,
+  "onClick": _propTypes.default.func,
+  "onPagination": _propTypes.default.func,
+  "pageCount": _propTypes.default.number.isRequired,
+  "pageSize": _propTypes.default.number.isRequired,
+  "type": _propTypes.default.oneOf(["first", "last", "next", "previous"]).isRequired
 };
 var _default = PagerNavigationLink;
 exports.default = _default;

package/lib/components/pager/__internal__/pager-navigation.component.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+export interface PagerNavigationProps {
+    /** Current visible page */
+    currentPage: number;
+    /** Pagination page size */
+    pageSize: number;
+    pageCount: number;
+    /** Sets the current page being shown */
+    setCurrentPage: (page: number) => void;
+    /** Callback function for next link */
+    onNext?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    /** Callback function for first link */
+    onFirst?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    /** Callback function for previous link */
+    onPrevious?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    /** Callback function for last link */
+    onLast?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    /** onPagination Callback triggered when a change is triggered */
+    onPagination: (pageSize: number, currentPage: number, origin: string) => void;
+    /** Should the `First` and `Last` navigation buttons be shown */
+    showFirstAndLastButtons?: boolean;
+    /** Should the `Next` and `Previous` navigation buttons be shown */
+    showPreviousAndNextButtons?: boolean;
+    /** Should the page count input be shown */
+    showPageCount?: boolean;
+}
+declare const PagerNavigation: ({ pageSize, currentPage, setCurrentPage, onNext, onPrevious, onFirst, onLast, onPagination, pageCount, showFirstAndLastButtons, showPreviousAndNextButtons, showPageCount, }: PagerNavigationProps) => JSX.Element;
+export default PagerNavigation;

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

@@ -56,31 +56,33 @@ const PagerNavigation = ({
   };
 
   const handlePageInputChange = ev => {
+    const pageNumber = +ev.target.value;
+
     if (pageCount === 0) {
       setCurrentPage(0);
       onPagination(0, pageSize, "input");
-      return "0";
+      return 0;
     }
 
-    if (Number(ev.target.value) <= 0 || Number.isNaN(Number(ev.target.value))) {
+    if (pageNumber <= 0 || Number.isNaN(pageNumber)) {
       setCurrentPage(1);
       onPagination(1, pageSize, "input");
-      return "1";
+      return 1;
     }
 
-    if (Number(ev.target.value) > pageCount) {
+    if (pageNumber > 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;
+    setCurrentPage(pageNumber);
+    onPagination(pageNumber, pageSize, "input");
+    return pageNumber;
   };
 
   const handleCurrentPageChange = e => {
-    setCurrentPage(e.target.value);
+    setCurrentPage(+e.target.value);
   };
 
   const renderButtonsBeforeCount = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !hasTwoPages && showFirstAndLastButtons && /*#__PURE__*/_react.default.createElement(_pagerNavigationLink.default, _extends({
@@ -112,41 +114,18 @@ const PagerNavigation = ({
 };
 
 PagerNavigation.propTypes = {
-  /** Current visible page */
-  currentPage: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-
-  /** Pagination page size */
-  pageSize: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-
-  /* Count of all of the pages */
-  pageCount: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-
-  /** Sets the current page being shown */
-  setCurrentPage: _propTypes.default.func,
-
-  /** onFirst Callback triggered when first link is triggered */
-  onFirst: _propTypes.default.func,
-
-  /** onPrevious Callback triggered when previous link is triggered */
-  onPrevious: _propTypes.default.func,
-
-  /** onNext Callback triggered when next link is triggered */
-  onNext: _propTypes.default.func,
-
-  /** onLast Callback triggered when last link is triggered */
-  onLast: _propTypes.default.func,
-
-  /** onPagination Callback triggered when a change is triggered */
-  onPagination: _propTypes.default.func,
-
-  /** Should the `First` and `Last` navigation buttons be shown */
-  showFirstAndLastButtons: _propTypes.default.bool,
-
-  /** Should the `Next` and `Previous` navigation buttons be shown */
-  showPreviousAndNextButtons: _propTypes.default.bool,
-
-  /** Should the page count input be shown */
-  showPageCount: _propTypes.default.bool
+  "currentPage": _propTypes.default.number.isRequired,
+  "onFirst": _propTypes.default.func,
+  "onLast": _propTypes.default.func,
+  "onNext": _propTypes.default.func,
+  "onPagination": _propTypes.default.func.isRequired,
+  "onPrevious": _propTypes.default.func,
+  "pageCount": _propTypes.default.number.isRequired,
+  "pageSize": _propTypes.default.number.isRequired,
+  "setCurrentPage": _propTypes.default.func.isRequired,
+  "showFirstAndLastButtons": _propTypes.default.bool,
+  "showPageCount": _propTypes.default.bool,
+  "showPreviousAndNextButtons": _propTypes.default.bool
 };
 var _default = PagerNavigation;
 exports.default = _default;

package/lib/components/pager/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./pager";
-export * from "./pager";
+export { default } from "./pager.component";
+export type { PagerProps } from "./pager.component";

package/lib/components/pager/pager.component.d.ts

@@ -0,0 +1,43 @@
+import React from "react";
+declare type PageSizeOption = {
+    id: string;
+    name: number;
+};
+export interface PagerProps {
+    /** Function called when pager changes (PageSize, Current Page) */
+    onPagination: (pageSize: number, currentPage: number, origin: string) => void;
+    /** Callback function for next link */
+    onNext?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    /** Callback function for first link */
+    onFirst?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    /** Callback function for previous link */
+    onPrevious?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    /** Callback function for last link */
+    onLast?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    /** Current visible page */
+    currentPage?: number | string;
+    /** Total number of records */
+    totalRecords?: number | string;
+    /** Pagination page size */
+    pageSize?: number | string;
+    /** Should the page size selection dropdown be shown */
+    showPageSizeSelection?: boolean;
+    /** Set of page size options */
+    pageSizeSelectionOptions?: PageSizeOption[];
+    /** Should the label before the page size selection dropdown be shown */
+    showPageSizeLabelBefore?: boolean;
+    /** Should the label after the page size selection dropdown be shown */
+    showPageSizeLabelAfter?: boolean;
+    /** Should the total records label be shown */
+    showTotalRecords?: boolean;
+    /** Should the `First` and `Last` navigation button be shown */
+    showFirstAndLastButtons?: boolean;
+    /** Should the `Previous` and `Next` navigation button be shown */
+    showPreviousAndNextButtons?: boolean;
+    /** Should the page count input be shown */
+    showPageCount?: boolean;
+    /** What variant the Pager background should be */
+    variant?: "default" | "alternate";
+}
+export declare const Pager: ({ currentPage, pageSizeSelectionOptions, pageSize, showPageSizeSelection, totalRecords, onPagination, onNext, onFirst, onPrevious, onLast, showPageSizeLabelBefore, showPageSizeLabelAfter, showTotalRecords, showFirstAndLastButtons, showPreviousAndNextButtons, showPageCount, variant, ...rest }: PagerProps) => JSX.Element;
+export default Pager;

package/lib/components/pager/pager.component.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.Pager = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -13,8 +13,6 @@ var _select = require("../select");
 
 var _pagerNavigation = _interopRequireDefault(require("./__internal__/pager-navigation.component"));
 
-var _option = _interopRequireDefault(require("../select/option/option.component"));
-
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
@@ -64,31 +62,31 @@ const Pager = ({
   ...rest
 }) => {
   const l = (0, _useLocale.default)();
-  const [page, setPage] = (0, _react.useState)(currentPage);
-  const [currentPageSize, setCurrentPageSize] = (0, _react.useState)(pageSize);
-  const [value, setValue] = (0, _react.useState)(pageSize);
+  const [page, setPage] = (0, _react.useState)(+currentPage);
+  const [currentPageSize, setCurrentPageSize] = (0, _react.useState)(+pageSize);
+  const [value, setValue] = (0, _react.useState)(+pageSize);
   const guid = (0, _react.useRef)((0, _guid.default)());
   const pageSizeSelectId = `Pager_size_selector_${guid.current}`;
   const getPageCount = (0, _react.useCallback)(() => {
-    if (Number(totalRecords) < 0 || Number.isNaN(Number(totalRecords))) {
+    if (+totalRecords < 0 || Number.isNaN(+totalRecords)) {
       return 1;
     }
 
-    return Math.ceil(totalRecords / currentPageSize);
+    return Math.ceil(+totalRecords / currentPageSize);
   }, [totalRecords, currentPageSize]);
   const [pageCount, setPageCount] = (0, _react.useState)(getPageCount());
   (0, _react.useEffect)(() => {
-    setCurrentPageSize(Number(pageSize));
-    setValue(pageSize);
+    setCurrentPageSize(+pageSize);
+    setValue(+pageSize);
   }, [pageSize]);
   (0, _react.useEffect)(() => {
     const maxPage = getPageCount();
     setPageCount(maxPage);
 
-    if (Number(currentPage) > maxPage) {
+    if (+currentPage > maxPage) {
       setPage(maxPage);
     } else {
-      setPage(Number(currentPage));
+      setPage(+currentPage);
     }
   }, [currentPageSize, pageCount, currentPage, totalRecords, getPageCount]);
   const handleOnFirst = (0, _react.useCallback)(e => {
@@ -123,20 +121,20 @@ const Pager = ({
   }, [page, onPrevious]);
   const handleOnPagination = (0, _react.useCallback)(e => {
     setValue(e.target.value);
-    setCurrentPageSize(Number(e.target.value));
-    onPagination(1, Number(e.target.value), "page-select");
+    setCurrentPageSize(+e.target.value);
+    onPagination(1, +e.target.value, "page-select");
   }, [onPagination]);
   const handleKeyDown = (0, _react.useCallback)(e => _events.default.isEnterKey(e) && handleOnPagination(e), [handleOnPagination]);
 
   const sizeSelector = () => {
     return /*#__PURE__*/_react.default.createElement(_pager.StyledSelectContainer, null, /*#__PURE__*/_react.default.createElement(_select.Select, {
       value: String(value),
-      onChange: ev => setValue(ev.target.value),
+      onChange: ev => setValue(+ev.target.value),
       onBlur: () => setValue(currentPageSize),
       onKeyDown: handleKeyDown,
       "data-element": "page-select",
       id: pageSizeSelectId
-    }, pageSizeSelectionOptions.map(sizeOption => /*#__PURE__*/_react.default.createElement(_option.default, {
+    }, pageSizeSelectionOptions.map(sizeOption => /*#__PURE__*/_react.default.createElement(_select.Option, {
       key: sizeOption.id,
       text: sizeOption.id,
       value: String(sizeOption.name),
@@ -171,60 +169,28 @@ const Pager = ({
   }), /*#__PURE__*/_react.default.createElement(_pager.StyledPagerSummary, null, renderTotalRecords()));
 };
 
+exports.Pager = Pager;
 Pager.propTypes = {
-  /** Function called when pager changes (PageSize, Current Page) */
-  onPagination: _propTypes.default.func.isRequired,
-
-  /** Callback function for next link */
-  onNext: _propTypes.default.func,
-
-  /** Callback function for first link */
-  onFirst: _propTypes.default.func,
-
-  /** Callback function for previous link */
-  onPrevious: _propTypes.default.func,
-
-  /** Callback function for last link */
-  onLast: _propTypes.default.func,
-
-  /** Current visible page */
-  currentPage: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-
-  /** Total number of records */
-  totalRecords: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-
-  /** Pagination page size */
-  pageSize: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-
-  /** Set of page size options */
-  pageSizeSelectionOptions: _propTypes.default.arrayOf(_propTypes.default.shape({
-    id: _propTypes.default.string,
-    name: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
+  "currentPage": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  "onFirst": _propTypes.default.func,
+  "onLast": _propTypes.default.func,
+  "onNext": _propTypes.default.func,
+  "onPagination": _propTypes.default.func.isRequired,
+  "onPrevious": _propTypes.default.func,
+  "pageSize": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  "pageSizeSelectionOptions": _propTypes.default.arrayOf(_propTypes.default.shape({
+    "id": _propTypes.default.string.isRequired,
+    "name": _propTypes.default.number.isRequired
   })),
-
-  /** Should the page size selection dropdown be shown */
-  showPageSizeSelection: _propTypes.default.bool,
-
-  /** Should the label before the page size selection dropdown be shown */
-  showPageSizeLabelBefore: _propTypes.default.bool,
-
-  /** Should the label after the page size selection dropdown be shown */
-  showPageSizeLabelAfter: _propTypes.default.bool,
-
-  /** Should the total records label be shown */
-  showTotalRecords: _propTypes.default.bool,
-
-  /** Should the `First` and `Last` navigation button be shown */
-  showFirstAndLastButtons: _propTypes.default.bool,
-
-  /** Should the `Previous` and `Next` navigation button be shown */
-  showPreviousAndNextButtons: _propTypes.default.bool,
-
-  /** Should the page count input be shown */
-  showPageCount: _propTypes.default.bool,
-
-  /** What variant the Pager background should be */
-  variant: _propTypes.default.oneOf(["default", "alternate"])
+  "showFirstAndLastButtons": _propTypes.default.bool,
+  "showPageCount": _propTypes.default.bool,
+  "showPageSizeLabelAfter": _propTypes.default.bool,
+  "showPageSizeLabelBefore": _propTypes.default.bool,
+  "showPageSizeSelection": _propTypes.default.bool,
+  "showPreviousAndNextButtons": _propTypes.default.bool,
+  "showTotalRecords": _propTypes.default.bool,
+  "totalRecords": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  "variant": _propTypes.default.oneOf(["alternate", "default"])
 };
 var _default = Pager;
 exports.default = _default;

package/lib/components/pager/pager.style.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { PagerProps } from ".";
+declare const StyledSelectContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledPagerContainer: import("styled-components").StyledComponent<"div", any, Pick<PagerProps, "variant">, never>;
+declare const StyledPagerSizeOptions: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledPagerSizeOptionsInner: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledPagerNavigation: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledPagerNavInner: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledPagerLink: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../link").LinkProps & import("react").RefAttributes<HTMLButtonElement | HTMLLinkElement>>, any, {}, never>;
+declare const StyledPagerNoSelect: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledPagerSummary: import("styled-components").StyledComponent<"div", any, {}, never>;
+export { StyledPagerContainer, StyledPagerSizeOptions, StyledPagerSizeOptionsInner, StyledPagerNavigation, StyledPagerNavInner, StyledPagerLink, StyledPagerNoSelect, StyledPagerSummary, StyledSelectContainer, };

package/lib/components/pager/pager.style.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledSelectContainer = exports.StyledPagerSummary = exports.StyledPagerNoSelect = exports.StyledPagerLinkStyles = exports.StyledPagerNavInner = exports.StyledPagerNavigation = exports.StyledPagerSizeOptionsInner = exports.StyledPagerSizeOptions = exports.StyledPagerContainer = void 0;
+exports.StyledSelectContainer = exports.StyledPagerSummary = exports.StyledPagerNoSelect = exports.StyledPagerLink = exports.StyledPagerNavInner = exports.StyledPagerNavigation = exports.StyledPagerSizeOptionsInner = exports.StyledPagerSizeOptions = exports.StyledPagerContainer = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -121,12 +121,12 @@ const StyledPagerNavInner = _styledComponents.default.div`
   }
 `;
 exports.StyledPagerNavInner = StyledPagerNavInner;
-const StyledPagerLinkStyles = (0, _styledComponents.default)(_link.default)`
+const StyledPagerLink = (0, _styledComponents.default)(_link.default)`
   padding: 0 10px;
   margin-left: 7px;
   margin-right: 7px;
 `;
-exports.StyledPagerLinkStyles = StyledPagerLinkStyles;
+exports.StyledPagerLink = StyledPagerLink;
 const StyledPagerNoSelect = _styledComponents.default.div`
   user-select: none;
   white-space: nowrap;

package/lib/components/select/__internal__/select-text/select-text.style.d.ts

@@ -0,0 +1,2 @@
+export default StyledSelectText;
+declare const StyledSelectText: import("styled-components").StyledComponent<"span", any, {}, never>;

package/lib/components/select/option/index.d.ts

@@ -11,6 +11,11 @@ export interface OptionProps {
   borderColor?: string;
   /** MultiSelect only - fill Pill background with color */
   fill?: boolean;
+  /**
+   * @private
+   * @ignore
+   * OnClick callback */
+  onClick?: (ev: React.MouseEvent<HTMLLIElement>) => void;
 }
 
 declare function Option(

package/lib/locales/locale.d.ts

@@ -48,7 +48,7 @@ interface Locale {
     };
     pager: {
         show: () => string;
-        records: (count: number | string, showNumber: boolean) => string;
+        records: (count: number | string, showNumber?: boolean) => string;
         first: () => string;
         last: () => string;
         next: () => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "111.22.4",
+  "version": "112.0.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",

package/esm/components/pager/pager.d.ts

@@ -1,42 +0,0 @@
-import * as React from "react";
-
-export interface PagerPropTypes {
-  /** Function called when pager changes (PageSize, Current Page) */
-  onPagination: (pageSize: number, currentPage: number, origin: string) => void;
-  /** Callback function for next link */
-  onNext?: (ev: React.MouseEvent<HTMLElement>) => void;
-  /** Callback function for first link */
-  onFirst?: (ev: React.MouseEvent<HTMLElement>) => void;
-  /** Callback function for previous link */
-  onPrevious?: (ev: React.MouseEvent<HTMLElement>) => void;
-  /** Callback function for last link */
-  onLast?: (ev: React.MouseEvent<HTMLElement>) => void;
-  /** Current visible page */
-  currentPage?: number | string;
-  /** Total number of records */
-  totalRecords?: number | string;
-  /** Pagination page size */
-  pageSize?: number | string;
-  /** Should the page size selection dropdown be shown */
-  showPageSizeSelection?: boolean;
-  /** Set of page size options */
-  pageSizeSelectionOptions?: Record<string, unknown>[];
-  /** Should the label before the page size selection dropdown be shown */
-  showPageSizeLabelBefore?: boolean;
-  /** Should the label after the page size selection dropdown be shown */
-  showPageSizeLabelAfter?: boolean;
-  /** Should the total records label be shown */
-  showTotalRecords?: boolean;
-  /** Should the `First` and `Last` navigation button be shown */
-  showFirstAndLastButtons?: boolean;
-  /** Should the `Previous` and `Next` navigation button be shown */
-  showPreviousAndNextButtons?: boolean;
-  /** Should the page count input be shown */
-  showPageCount?: boolean;
-  /** What variant the Pager background should be */
-  variant?: "default" | "alternate";
-}
-
-declare function Pager(props: PagerPropTypes): JSX.Element;
-
-export default Pager;

package/lib/components/pager/pager.d.ts

@@ -1,42 +0,0 @@
-import * as React from "react";
-
-export interface PagerPropTypes {
-  /** Function called when pager changes (PageSize, Current Page) */
-  onPagination: (pageSize: number, currentPage: number, origin: string) => void;
-  /** Callback function for next link */
-  onNext?: (ev: React.MouseEvent<HTMLElement>) => void;
-  /** Callback function for first link */
-  onFirst?: (ev: React.MouseEvent<HTMLElement>) => void;
-  /** Callback function for previous link */
-  onPrevious?: (ev: React.MouseEvent<HTMLElement>) => void;
-  /** Callback function for last link */
-  onLast?: (ev: React.MouseEvent<HTMLElement>) => void;
-  /** Current visible page */
-  currentPage?: number | string;
-  /** Total number of records */
-  totalRecords?: number | string;
-  /** Pagination page size */
-  pageSize?: number | string;
-  /** Should the page size selection dropdown be shown */
-  showPageSizeSelection?: boolean;
-  /** Set of page size options */
-  pageSizeSelectionOptions?: Record<string, unknown>[];
-  /** Should the label before the page size selection dropdown be shown */
-  showPageSizeLabelBefore?: boolean;
-  /** Should the label after the page size selection dropdown be shown */
-  showPageSizeLabelAfter?: boolean;
-  /** Should the total records label be shown */
-  showTotalRecords?: boolean;
-  /** Should the `First` and `Last` navigation button be shown */
-  showFirstAndLastButtons?: boolean;
-  /** Should the `Previous` and `Next` navigation button be shown */
-  showPreviousAndNextButtons?: boolean;
-  /** Should the page count input be shown */
-  showPageCount?: boolean;
-  /** What variant the Pager background should be */
-  variant?: "default" | "alternate";
-}
-
-declare function Pager(props: PagerPropTypes): JSX.Element;
-
-export default Pager;