carbon-react 104.34.1 → 104.35.0

package/esm/components/numeral-date/numeral-date.component.d.ts

@@ -0,0 +1,111 @@
+export default NumeralDate;
+declare function NumeralDate({ dateFormat, defaultValue, disabled, error, warning, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, info, id, name, onBlur, onChange, value, validationOnLabel, label, labelInline, labelWidth, labelAlign, labelHelp, labelSpacing, fieldHelp, adaptiveLabelBreakpoint, required, readOnly, size, enableInternalError, enableInternalWarning, tooltipPosition, helpAriaLabel, ...rest }: {
+    [x: string]: any;
+    dateFormat?: string[] | undefined;
+    defaultValue: any;
+    disabled: any;
+    error?: string | undefined;
+    warning?: string | undefined;
+    "data-component": any;
+    "data-element": any;
+    "data-role": any;
+    info: any;
+    id: any;
+    name: any;
+    onBlur: any;
+    onChange: any;
+    value: any;
+    validationOnLabel?: boolean | undefined;
+    label: any;
+    labelInline: any;
+    labelWidth: any;
+    labelAlign: any;
+    labelHelp: any;
+    labelSpacing: any;
+    fieldHelp: any;
+    adaptiveLabelBreakpoint: any;
+    required: any;
+    readOnly: any;
+    size: any;
+    enableInternalError: any;
+    enableInternalWarning: any;
+    tooltipPosition: any;
+    helpAriaLabel: any;
+}): JSX.Element;
+declare namespace NumeralDate {
+    const propTypes: {
+        /** Identifier used for testing purposes, applied to the root element of the component. */
+        "data-component": PropTypes.Requireable<string>;
+        /** Identifier used for testing purposes, applied to the root element of the component. */
+        "data-element": PropTypes.Requireable<string>;
+        /** Identifier used for testing purposes, applied to the root element of the component. */
+        "data-role": PropTypes.Requireable<string>;
+        /** If true, the component will be disabled */
+        disabled: PropTypes.Requireable<boolean>;
+        /** If true, the component will be read-only */
+        readOnly: PropTypes.Requireable<boolean>;
+        /** Array of strings to define custom input layout.
+        Allowed formats:
+        ['dd', 'mm', 'yyyy'],
+        ['mm', 'dd', 'yyyy'],
+        ['dd', 'mm'],
+        ['mm', 'dd'],
+        ['mm', 'yyyy'] */
+        dateFormat: (props: any, propName: any, componentName: any) => Error | null;
+        /** Default value for use in uncontrolled mode  */
+        defaultValue: PropTypes.Requireable<object>;
+        /**  Value for use in controlled mode  */
+        value: PropTypes.Requireable<object>;
+        /** Indicate that error has occurred
+        Pass string to display icon, tooltip and red border
+        Pass true boolean to only display red border */
+        error: PropTypes.Requireable<string | boolean>;
+        /** Indicate that warning has occurred
+        Pass string to display icon, tooltip and orange border
+        Pass true boolean to only display orange border */
+        warning: PropTypes.Requireable<string | boolean>;
+        /** Indicate additional information
+        Pass string to display icon, tooltip and blue border
+        Pass true boolean to only display blue border */
+        info: PropTypes.Requireable<string | boolean>;
+        /** Blur event handler  */
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        /** Change event handler */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /** `id` for events */
+        id: PropTypes.Requireable<string>;
+        /** `name` for events */
+        name: PropTypes.Requireable<string>;
+        /** When true, validation icon will be placed on label instead of being placed on the input */
+        validationOnLabel: PropTypes.Requireable<boolean>;
+        /** When true, enables the internal errors to be displayed */
+        enableInternalError: PropTypes.Requireable<boolean>;
+        /** When true, enables the internal warnings to be displayed */
+        enableInternalWarning: PropTypes.Requireable<boolean>;
+        /** Label */
+        label: PropTypes.Requireable<string>;
+        /** Text applied to label help tooltip */
+        labelHelp: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /** When true, label is placed in line with an input */
+        labelInline: PropTypes.Requireable<boolean>;
+        /** Label alignment. Works only when labelInline is true */
+        labelAlign: PropTypes.Requireable<string>;
+        /** Width of a label in percentage. Works only when labelInline is true */
+        labelWidth: PropTypes.Requireable<number>;
+        /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
+        labelSpacing: PropTypes.Requireable<number>;
+        /** Help content to be displayed under an input */
+        fieldHelp: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
+        adaptiveLabelBreakpoint: PropTypes.Requireable<number>;
+        /** Flag to configure component as mandatory */
+        required: PropTypes.Requireable<boolean>;
+        /** Size of an input */
+        size: PropTypes.Requireable<string>;
+        /** Overrides the default tooltip position */
+        tooltipPosition: PropTypes.Requireable<string>;
+        /** Aria label for rendered help component */
+        helpAriaLabel: PropTypes.Requireable<string>;
+    };
+}
+import PropTypes from "prop-types";

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

@@ -0,0 +1,325 @@
+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, { useState, useEffect, useRef } from "react";
+import PropTypes from "prop-types";
+import styledSystemPropTypes from "@styled-system/prop-types";
+import invariant from "invariant";
+import { filterStyledSystemMarginProps } from "../../style/utils";
+import Events from "../../__internal__/utils/helpers/events";
+import { StyledNumeralDate, StyledDateField } from "./numeral-date.style";
+import Textbox from "../textbox";
+import guid from "../../__internal__/utils/helpers/guid";
+import useLocale from "../../hooks/__internal__/useLocale";
+import FormField from "../../__internal__/form-field";
+import { InputGroupBehaviour } from "../../__internal__/input-behaviour";
+import { TooltipProvider } from "../../__internal__/tooltip-provider";
+const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+const ALLOWED_DATE_FORMATS = [["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,
+  disabled,
+  error = "",
+  warning = "",
+  "data-component": dataComponent,
+  "data-element": dataElement,
+  "data-role": dataRole,
+  info,
+  id,
+  name,
+  onBlur,
+  onChange,
+  value,
+  validationOnLabel = false,
+  label,
+  labelInline,
+  labelWidth,
+  labelAlign,
+  labelHelp,
+  labelSpacing,
+  fieldHelp,
+  adaptiveLabelBreakpoint,
+  required,
+  readOnly,
+  size,
+  enableInternalError,
+  enableInternalWarning,
+  tooltipPosition,
+  helpAriaLabel,
+  ...rest
+}) => {
+  const l = useLocale();
+  const {
+    current: uniqueId
+  } = useRef(id || guid());
+  const isControlled = useRef(value !== undefined);
+  const initialValue = isControlled.current ? value : defaultValue;
+  const refs = useRef(dateFormat.map(() => /*#__PURE__*/React.createRef()));
+  const [internalMessages, setInternalMessages] = useState({});
+  useEffect(() => {
+    const modeSwitchedMessage = "Input elements should not switch from uncontrolled to controlled (or vice versa). " + "Decide between using a controlled or uncontrolled input element for the lifetime of the component";
+    invariant(isControlled.current === (value !== undefined), modeSwitchedMessage);
+  }, [value]);
+  const validationMessages = {
+    dd: l.numeralDate.validation.day(),
+    mm: l.numeralDate.validation.month(),
+    yyyy: l.numeralDate.validation.year()
+  };
+  const [dateValue, setDateValue] = useState({ ...(initialValue || dateFormat.reduce((dateObject, key) => {
+      dateObject[key] = "";
+      return dateObject;
+    }, {}))
+  });
+
+  const createCustomEventObject = newValue => ({
+    target: {
+      name,
+      id: uniqueId,
+      value: newValue
+    }
+  });
+
+  const onKeyPress = ev => {
+    const isValidKey = Events.isNumberKey(ev) || Events.isDeletingKey(ev) || Events.isTabKey(ev);
+
+    if (!isValidKey) {
+      ev.preventDefault();
+    }
+  };
+
+  const handleChange = (e, datePart) => {
+    const {
+      value: newValue
+    } = e.target;
+
+    if (newValue.length <= datePart.length) {
+      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 (validations[datePart] && internalValidationEnabled) {
+      const errorMessage = validations[datePart](dateValue[datePart]) ? "" : validationMessages[datePart];
+      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((string, key) => internalMessages[key] ? `${string + internalMessages[key]}\n` : string, "");
+  const internalError = enableInternalError ? internalMessage + error : error;
+  const internalWarning = enableInternalWarning ? internalMessage + warning : warning;
+  return /*#__PURE__*/React.createElement(TooltipProvider, {
+    helpAriaLabel: helpAriaLabel
+  }, /*#__PURE__*/React.createElement(InputGroupBehaviour, null, /*#__PURE__*/React.createElement(FormField, _extends({
+    "data-component": dataComponent,
+    "data-element": dataElement,
+    "data-role": dataRole,
+    disabled: disabled,
+    useValidationIcon: validationOnLabel,
+    id: uniqueId,
+    error: internalError,
+    warning: internalWarning,
+    info: info,
+    label: label,
+    labelInline: labelInline,
+    labelWidth: labelWidth,
+    labelAlign: labelAlign,
+    labelHelp: labelHelp,
+    labelSpacing: labelSpacing,
+    fieldHelp: fieldHelp,
+    adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
+    isRequired: required
+  }, filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(StyledNumeralDate, {
+    name: name,
+    onKeyPress: onKeyPress,
+    "data-component": "numeral-date"
+  }, dateFormat.map((datePart, index) => {
+    const isEnd = index === dateFormat.length - 1;
+    const isMiddle = index === 1;
+    const validation = error || warning || info;
+    const isStringValidation = typeof validation === "string";
+    const hasValidationIcon = isStringValidation && validation.length;
+    return /*#__PURE__*/React.createElement(StyledDateField, {
+      key: datePart,
+      isYearInput: datePart.length === 4,
+      isMiddle: isMiddle,
+      isEnd: isEnd,
+      hasValidationIcon: hasValidationIcon
+    }, /*#__PURE__*/React.createElement(Textbox, _extends({}, index === 0 && {
+      id: uniqueId
+    }, {
+      disabled: disabled,
+      readOnly: readOnly,
+      placeholder: datePart,
+      value: dateValue[datePart],
+      onChange: e => handleChange(e, datePart),
+      inputRef: ref => {
+        refs.current[index] = ref;
+      },
+      onBlur: () => handleBlur(datePart),
+      error: !!internalError,
+      warning: !!internalWarning,
+      info: !!info
+    }, required && {
+      required
+    }, isEnd && !validationOnLabel && {
+      error: internalError,
+      warning: internalWarning,
+      info
+    }, {
+      size: size,
+      tooltipPosition: tooltipPosition
+    })));
+  })))));
+};
+
+NumeralDate.propTypes = {
+  /** Filtered styled system margin props */
+  ...marginPropTypes,
+
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-component": PropTypes.string,
+
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-element": PropTypes.string,
+
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-role": PropTypes.string,
+
+  /** If true, the component will be disabled */
+  disabled: PropTypes.bool,
+
+  /** If true, the component will be read-only */
+  readOnly: PropTypes.bool,
+
+  /** Array of strings to define custom input layout.
+  Allowed formats:
+  ['dd', 'mm', 'yyyy'],
+  ['mm', 'dd', 'yyyy'],
+  ['dd', 'mm'],
+  ['mm', 'dd'],
+  ['mm', 'yyyy'] */
+  dateFormat: (props, propName, componentName) => {
+    const dateFormat = props[propName];
+    const isAllowed = !dateFormat || ALLOWED_DATE_FORMATS.find(allowedDateFormat => JSON.stringify(allowedDateFormat) === JSON.stringify(dateFormat));
+
+    if (!isAllowed) {
+      return new Error(`Forbidden prop \`${propName}\` supplied to \`${componentName}\`. ` + "Only one of these date formats is allowed: " + "['dd', 'mm', 'yyyy'], " + "['mm', 'dd', 'yyyy'], " + "['dd', 'mm'], " + "['mm', 'dd'], " + "['mm', 'yyyy']");
+    }
+
+    return null;
+  },
+
+  /** Default value for use in uncontrolled mode  */
+  defaultValue: PropTypes.object,
+
+  /**  Value for use in controlled mode  */
+  value: PropTypes.object,
+
+  /** Indicate that error has occurred
+  Pass string to display icon, tooltip and red border
+  Pass true boolean to only display red border */
+  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+
+  /** Indicate that warning has occurred
+  Pass string to display icon, tooltip and orange border
+  Pass true boolean to only display orange border */
+  warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+
+  /** Indicate additional information
+  Pass string to display icon, tooltip and blue border
+  Pass true boolean to only display blue border */
+  info: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+
+  /** Blur event handler  */
+  onBlur: PropTypes.func,
+
+  /** Change event handler */
+  onChange: PropTypes.func,
+
+  /** `id` for events */
+  id: PropTypes.string,
+
+  /** `name` for events */
+  name: PropTypes.string,
+
+  /** When true, validation icon will be placed on label instead of being placed on the input */
+  validationOnLabel: PropTypes.bool,
+
+  /** When true, enables the internal errors to be displayed */
+  enableInternalError: PropTypes.bool,
+
+  /** When true, enables the internal warnings to be displayed */
+  enableInternalWarning: PropTypes.bool,
+
+  /** Label */
+  label: PropTypes.string,
+
+  /** Text applied to label help tooltip */
+  labelHelp: PropTypes.node,
+
+  /** When true, label is placed in line with an input */
+  labelInline: PropTypes.bool,
+
+  /** Label alignment. Works only when labelInline is true */
+  labelAlign: PropTypes.oneOf(["left", "right"]),
+
+  /** Width of a label in percentage. Works only when labelInline is true */
+  labelWidth: PropTypes.number,
+
+  /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
+  labelSpacing: PropTypes.oneOf([1, 2]),
+
+  /** Help content to be displayed under an input */
+  fieldHelp: PropTypes.node,
+
+  /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
+  adaptiveLabelBreakpoint: PropTypes.number,
+
+  /** Flag to configure component as mandatory */
+  required: PropTypes.bool,
+
+  /** Size of an input */
+  size: PropTypes.oneOf(["small", "medium", "large"]),
+
+  /** Overrides the default tooltip position */
+  tooltipPosition: PropTypes.oneOf(["top", "bottom", "left", "right"]),
+
+  /** Aria label for rendered help component */
+  helpAriaLabel: PropTypes.string
+};
+export default NumeralDate;

package/esm/components/numeral-date/numeral-date.d.ts

@@ -0,0 +1,97 @@
+import * as React from "react";
+import { MarginProps } from "styled-system";
+import { ValidationPropTypes } from "../../__internal__/validations";
+
+interface DayMonthDate {
+  dd: string;
+  mm: string;
+}
+
+interface MonthYearDate {
+  mm: string;
+  yyyy: string;
+}
+
+interface FullDate extends DayMonthDate {
+  yyyy: string;
+}
+
+interface NumeralDateEvent {
+  target: {
+    name: string;
+    id: string;
+    value: DayMonthDate | MonthYearDate | FullDate;
+  };
+}
+
+export interface NumeralDateProps extends ValidationPropTypes, MarginProps {
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-component"?: string;
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-element"?: string;
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-role"?: string;
+  /** If true, the component will be disabled */
+  disabled?: boolean;
+  /** If true, the component will be read-only */
+  readOnly?: boolean;
+  /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
+  adaptiveLabelBreakpoint?: number;
+  /* Array of strings to define custom input layout.
+  Allowed formats:
+  ['dd', 'mm', 'yyyy'],
+  ['mm', 'dd', 'yyyy'],
+  ['dd', 'mm'],
+  ['mm', 'dd'],
+  ['mm', 'yyyy'] */
+  dateFormat?:
+    | ["dd", "mm", "yyyy"]
+    | ["mm", "dd", "yyyy"]
+    | ["dd", "mm"]
+    | ["mm", "dd"]
+    | ["mm", "yyyy"];
+  /** Default value for use in uncontrolled mode  */
+  defaultValue?: DayMonthDate | MonthYearDate | FullDate;
+  /**  Value for use in controlled mode  */
+  value?: DayMonthDate | MonthYearDate | FullDate;
+  /** When true, enables the internal errors to be displayed */
+  enableInternalError?: boolean;
+  /** When true, enables the internal warnings to be displayed */
+  enableInternalWarning?: boolean;
+  /** Help content to be displayed under an input */
+  fieldHelp?: React.ReactNode;
+  /** `id` for events */
+  id?: string;
+  /** `name` for events */
+  name?: string;
+  /** Label */
+  label?: string;
+  /** Label alignment. Works only when labelInline is true */
+  labelAlign?: "left" | "right";
+  /** Text applied to label help tooltip */
+  labelHelp?: React.ReactNode;
+  /** When true, label is placed in line with an input */
+  labelInline?: boolean;
+  /** Label width */
+  labelWidth?: number;
+  /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
+  labelSpacing?: 1 | 2;
+  /** Blur event handler */
+  onBlur?: (ev: NumeralDateEvent) => void;
+  /** Change event handler */
+  onChange?: (ev: NumeralDateEvent) => void;
+  /** Flag to configure component as mandatory */
+  required?: boolean;
+  /** Size of an input */
+  size?: "small" | "medium" | "large";
+  /** When true, validation icons will be placed on labels instead of being placed on the inputs */
+  validationOnLabel?: boolean;
+  /** Overrides the default tooltip position */
+  tooltipPosition?: "top" | "bottom" | "left" | "right";
+  /** Aria label for rendered help component */
+  helpAriaLabel?: string;
+}
+
+declare function NumeralDate(props: NumeralDateProps): JSX.Element;
+
+export default NumeralDate;

package/esm/components/numeral-date/numeral-date.style.d.ts

@@ -0,0 +1,2 @@
+export const StyledNumeralDate: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledDateField: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,47 @@
+import styled, { css } from "styled-components";
+import StyledValidationIcon from "../../__internal__/validations/validation-icon.style";
+import StyledIconSpan from "../../__internal__/input-icon-toggle/input-icon-toggle.style";
+import StyledInputPresentantion from "../../__internal__/input/input-presentation.style";
+import StyledFormField from "../../__internal__/form-field/form-field.style";
+export const StyledNumeralDate = styled.div`
+  display: inline-flex;
+  border: 1px solid transparent;
+  height: 40px;
+  font-size: 14px;
+  font-weight: 400;
+  padding-bottom: 2px;
+  padding-top: 1px;
+
+  ${StyledFormField} {
+    margin-top: 0px;
+  }
+`;
+export const StyledDateField = styled.div`
+  ${({
+  isYearInput,
+  isEnd,
+  hasValidationIcon,
+  isMiddle
+}) => {
+  const yearInputOrError = isYearInput || isEnd && hasValidationIcon;
+  return css`
+      ${StyledInputPresentantion} {
+        position: relative;
+        width: ${yearInputOrError ? "78px;" : "58px;"};
+        text-align: center;
+
+        ${(isMiddle || isEnd) && css`
+            margin-left: -1px;
+          `}
+
+        ${StyledIconSpan} {
+          width: 32px;
+          z-index: 999;
+        }
+
+        ${StyledValidationIcon} {
+          z-index: 9000;
+        }
+      `;
+}}
+`;

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

@@ -0,0 +1,20 @@
+export default PagerNavigationLink;
+declare function PagerNavigationLink({ type, currentPage, pageCount, pageSize, onClick, onPagination, }: {
+    type: any;
+    currentPage: any;
+    pageCount: any;
+    pageSize: any;
+    onClick: any;
+    onPagination: any;
+}): JSX.Element;
+declare namespace PagerNavigationLink {
+    namespace propTypes {
+        const type: PropTypes.Validator<string>;
+        const currentPage: PropTypes.Validator<string | number>;
+        const pageCount: PropTypes.Validator<string | number>;
+        const pageSize: PropTypes.Validator<string | number>;
+        const onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        const onPagination: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+}
+import PropTypes from "prop-types";

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

@@ -0,0 +1,86 @@
+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,
+  pageCount,
+  pageSize,
+  onClick,
+  onPagination
+}) => {
+  const l = useLocale();
+  const linkRef = useRef();
+  const navLinkConfig = {
+    first: {
+      text: l.pager.first(),
+      destination: "1"
+    },
+    last: {
+      text: l.pager.last(),
+      destination: pageCount
+    },
+    next: {
+      text: l.pager.next(),
+      destination: currentPage + 1
+    },
+    previous: {
+      text: l.pager.previous(),
+      destination: currentPage - 1
+    }
+  };
+  const disabled = useCallback(() => {
+    if (currentPage === 1) {
+      return type === "previous" || type === "first";
+    }
+
+    if (currentPage === pageCount) {
+      return type === "next" || type === "last";
+    }
+
+    return false;
+  }, [pageCount, currentPage, type]);
+  useEffect(() => {
+    if (disabled() && linkRef.current) {
+      linkRef.current.blur();
+    }
+  }, [disabled]);
+
+  const handleOnCLick = e => {
+    onClick(e);
+    onPagination(navLinkConfig[type].destination, pageSize, type);
+  };
+
+  const {
+    text
+  } = navLinkConfig[type];
+  return /*#__PURE__*/React.createElement(StyledPagerLinkStyles, {
+    "data-element": `pager-link-${type}`,
+    disabled: disabled(),
+    onClick: 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
+};
+export default PagerNavigationLink;