carbon-react 128.0.0 → 128.2.0

package/esm/components/draggable/{internal → __internal__}/drop-target.component.js

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from "react";
 import PropTypes from "prop-types";
 import { useDrop } from "react-dnd";
-import { StyledDraggableContainer } from "../draggable-item.style";
+import { StyledDraggableContainer } from "../draggable-item/draggable-item.style";
 const DropTarget = ({
   children,
   getOrder,

package/esm/components/draggable/draggable-container.component.js

@@ -5,8 +5,8 @@ import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import invariant from "invariant";
 import { filterStyledSystemMarginProps } from "../../style/utils";
-import DraggableItem from "./draggable-item.component";
-import DropTarget from "./internal/drop-target.component";
+import DraggableItem from "./draggable-item/draggable-item.component";
+import DropTarget from "./__internal__/drop-target.component";
 const DraggableContainer = ({
   children,
   getOrder,

package/esm/components/draggable/{draggable-item.component.js → draggable-item/draggable-item.component.js}

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from "react";
 import PropTypes from "prop-types";
 import { useDrop, useDrag } from "react-dnd";
-import { filterStyledSystemPaddingProps } from "../../style/utils";
+import { filterStyledSystemPaddingProps } from "../../../style/utils";
 import { StyledDraggableItem, StyledIcon } from "./draggable-item.style";
 const DraggableItem = ({
   id,

package/{lib/components/draggable → esm/components/draggable/draggable-item}/draggable-item.style.d.ts

@@ -5,5 +5,5 @@ interface StyledDraggableItemProps extends PaddingProps {
     isDragging?: boolean;
 }
 declare const StyledDraggableItem: import("styled-components").StyledComponent<"div", any, StyledDraggableItemProps, never>;
-declare const StyledIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+declare const StyledIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
 export { StyledDraggableContainer, StyledDraggableItem, StyledIcon };

package/esm/components/draggable/{draggable-item.style.js → draggable-item/draggable-item.style.js}

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import { padding, margin } from "styled-system";
-import { baseTheme } from "../../style/themes";
-import Icon from "../icon";
+import { baseTheme } from "../../../style/themes";
+import Icon from "../../icon";
 const StyledDraggableContainer = styled.div`
   ${margin}
 `;

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

@@ -1,4 +1,4 @@
 export { default as DraggableContainer } from "./draggable-container.component";
 export type { DraggableContainerProps } from "./draggable-container.component";
-export { default as DraggableItem } from "./draggable-item.component";
-export type { DraggableItemProps } from "./draggable-item.component";
+export { default as DraggableItem } from "./draggable-item/draggable-item.component";
+export type { DraggableItemProps } from "./draggable-item/draggable-item.component";

package/esm/components/draggable/index.js

@@ -1,2 +1,2 @@
 export { default as DraggableContainer } from "./draggable-container.component";
-export { default as DraggableItem } from "./draggable-item.component";
+export { default as DraggableItem } from "./draggable-item/draggable-item.component";

package/esm/components/duelling-picklist/picklist-placeholder/picklist-placeholder.component.js

@@ -3,7 +3,9 @@ import PropTypes from "prop-types";
 import { StyledPicklistPlaceholder } from "../duelling-picklist.style";
 export const PicklistPlaceholder = ({
   text
-}) => /*#__PURE__*/React.createElement(StyledPicklistPlaceholder, {
-  "data-element": "picklist-placeholder"
-}, text);
+}) => {
+  return /*#__PURE__*/React.createElement(StyledPicklistPlaceholder, {
+    "data-element": "picklist-placeholder"
+  }, text);
+};
 export default PicklistPlaceholder;

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

@@ -1,14 +1,19 @@
 import React from "react";
 import { MarginProps } from "styled-system";
-import { StyledFieldsetProps } from "./fieldset.style";
-export interface FieldsetProps extends StyledFieldsetProps, MarginProps {
+export interface FieldsetProps extends MarginProps {
+    /** When true, legend is placed in line with the children */
+    inline?: boolean;
     /** Child elements */
     children?: React.ReactNode;
     /** The text for the fieldsets legend element. */
     legend?: string;
+    /** Flag to configure fields as mandatory. */
+    required?: boolean;
+    /** Flag to configure fields as optional. */
+    isOptional?: boolean;
 }
 export declare const Fieldset: {
-    ({ children, inline, legend, ...rest }: FieldsetProps): React.JSX.Element;
+    ({ children, inline, legend, required, isOptional, ...rest }: FieldsetProps): React.JSX.Element;
     displayName: string;
 };
 export default Fieldset;

package/esm/components/fieldset/fieldset.component.js

@@ -1,5 +1,5 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { FieldsetStyle, LegendContainerStyle, FieldsetContentStyle } from "./fieldset.style";
@@ -10,11 +10,16 @@ export const Fieldset = ({
   children,
   inline = false,
   legend,
+  required,
+  isOptional,
   ...rest
 }) => {
+  const [ref, setRef] = useState(null);
   const getLegend = () => {
     if (!legend) return null;
     return /*#__PURE__*/React.createElement(LegendContainerStyle, {
+      isRequired: required,
+      isOptional: isOptional,
       inline: inline,
       "data-component": "legend-style"
     }, /*#__PURE__*/React.createElement("legend", {
@@ -22,11 +27,20 @@ export const Fieldset = ({
     }, legend));
   };
   const marginProps = useFormSpacing(rest);
+  useEffect(() => {
+    if (ref && required) {
+      Array.from(ref.querySelectorAll("input") || /* istanbul ignore next */[]).forEach(el => {
+        el.setAttribute("required", "");
+      });
+    }
+  }, [ref, required]);
   return /*#__PURE__*/React.createElement(NewValidationContext.Provider, {
     value: {
       validationRedesignOptIn: false
     }
-  }, /*#__PURE__*/React.createElement(FieldsetStyle, _extends({}, tagComponent("fieldset", rest), rest, marginProps), /*#__PURE__*/React.createElement(FieldsetContentStyle, {
+  }, /*#__PURE__*/React.createElement(FieldsetStyle, _extends({
+    ref: setRef
+  }, tagComponent("fieldset", rest), rest, marginProps), /*#__PURE__*/React.createElement(FieldsetContentStyle, {
     "data-component": "fieldset-style",
     inline: inline
   }, getLegend(), /*#__PURE__*/React.createElement(FormSpacingProvider, {

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

@@ -1,6 +1,10 @@
 export interface StyledFieldsetProps {
     /** When true, legend is placed in line with the children */
     inline?: boolean;
+    /** Flag to configure fields as mandatory. */
+    isRequired?: boolean;
+    /** Flag to configure fields as optional. */
+    isOptional?: boolean;
 }
 declare const FieldsetStyle: import("styled-components").StyledComponent<"fieldset", any, {}, never>;
 declare const LegendContainerStyle: import("styled-components").StyledComponent<"div", any, StyledFieldsetProps, never>;

package/esm/components/fieldset/fieldset.style.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { margin } from "styled-system";
 import FormFieldStyle from "../../__internal__/form-field/form-field.style";
 import ValidationIconStyle from "../../__internal__/validations/validation-icon.style";
@@ -37,9 +37,36 @@ const LegendContainerStyle = styled.div`
 
   legend {
     font-size: 20px;
-    font-weight: 600;
+    font-weight: var(--fontWeights700);
+    color: var(--colorsUtilityYin090);
     line-height: 24px;
     margin-right: 4px;
+
+    ${({
+  isRequired
+}) => isRequired && css`
+        ::after {
+          content: "*";
+          line-height: 24px;
+          color: var(--colorsSemanticNegative500);
+          font-weight: var(--fontWeights700);
+          margin-left: var(--spacing100);
+          position: relative;
+          top: 1px;
+          left: -4px;
+        }
+      `}
+
+    ${({
+  isOptional
+}) => isOptional && css`
+        ::after {
+          content: "(optional)";
+          color: var(--colorsUtilityYin055);
+          font-weight: var(--fontWeights400);
+          margin-left: var(--spacing050);
+        }
+      `}
   }
 
   ${ValidationIconStyle} ${StyledIcon}:focus {

package/esm/components/file-input/file-input.component.d.ts

@@ -31,6 +31,10 @@ export interface FileInputProps extends Pick<ValidationProps, "error">, Pick<Inp
     onChange: (files: FileList) => void;
     /** used to control how to display the progress of uploaded file(s) within the component */
     uploadStatus?: FileUploadStatusProps | FileUploadStatusProps[];
+    /** Flag to configure component as mandatory. */
+    required?: boolean;
+    /** Flag to configure component as optional. */
+    isOptional?: boolean;
 }
 export declare const FileInput: React.ForwardRefExoticComponent<FileInputProps & React.RefAttributes<HTMLInputElement>>;
 export default FileInput;

package/esm/components/file-input/file-input.component.js

@@ -32,6 +32,7 @@ const FileInput = /*#__PURE__*/React.forwardRef(({
   name,
   onChange,
   required,
+  isOptional,
   uploadStatus = [],
   ...rest
 }, ref) => {
@@ -149,6 +150,7 @@ const FileInput = /*#__PURE__*/React.forwardRef(({
     labelId: labelId,
     id: uniqueId,
     isRequired: required,
+    isOptional: isOptional,
     "data-component": "file-input",
     "data-role": dataRole,
     "data-element": dataElement,
@@ -170,6 +172,7 @@ if (process.env.NODE_ENV !== "production") {
     "error": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     "id": PropTypes.string,
     "inputHint": PropTypes.node,
+    "isOptional": PropTypes.bool,
     "isVertical": PropTypes.bool,
     "label": PropTypes.string,
     "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({

package/esm/components/flat-table/flat-table-header/flat-table-header.component.d.ts

@@ -23,9 +23,6 @@ export interface FlatTableHeaderProps extends PaddingProps {
 }
 export declare const FlatTableHeader: {
     ({ align, children, colspan, rowspan, width, py, px, id, ...rest }: FlatTableHeaderProps): React.JSX.Element;
-    defaultProps: {
-        align: string;
-    };
     displayName: string;
 };
 export default FlatTableHeader;

package/esm/components/flat-table/flat-table-header/flat-table-header.component.js

@@ -6,7 +6,7 @@ import { FlatTableThemeContext } from "../flat-table.component";
 import guid from "../../../__internal__/utils/helpers/guid";
 import useTableCell from "../__internal__/use-table-cell";
 export const FlatTableHeader = ({
-  align,
+  align = "left",
   children,
   colspan,
   rowspan,
@@ -47,8 +47,5 @@ export const FlatTableHeader = ({
     id: internalId.current
   }), /*#__PURE__*/React.createElement("div", null, children));
 };
-FlatTableHeader.defaultProps = {
-  align: "left"
-};
 FlatTableHeader.displayName = "FlatTableHeader";
 export default FlatTableHeader;

package/esm/components/flat-table/sort/sort.component.d.ts

@@ -7,5 +7,5 @@ export interface SortProps {
     /** Sets the content of `FlatTableSortHeader` */
     children?: React.ReactNode;
 }
-declare const Sort: ({ children, onClick, sortType }: SortProps) => React.JSX.Element;
+export declare const Sort: ({ children, onClick, sortType }: SortProps) => React.JSX.Element;
 export default Sort;

package/esm/components/flat-table/sort/sort.component.js

@@ -4,7 +4,7 @@ import Event from "../../../__internal__/utils/helpers/events";
 import { StyledSort, StyledSpaceHolder, StyledSortIcon } from "./sort.style";
 import guid from "../../../__internal__/utils/helpers/guid";
 import { FlatTableThemeContext } from "../flat-table.component";
-const Sort = ({
+export const Sort = ({
   children,
   onClick,
   sortType

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

@@ -1,2 +1,3 @@
 export { default } from "./form.component";
 export type { FormProps } from "./form.component";
+export { default as RequiredFieldsIndicator } from "./required-fields-indicator";

package/esm/components/form/index.js

@@ -1 +1,2 @@
-export { default } from "./form.component";
+export { default } from "./form.component";
+export { default as RequiredFieldsIndicator } from "./required-fields-indicator";

package/esm/components/form/required-fields-indicator/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./required-fields-indicator.component";

package/esm/components/form/required-fields-indicator/index.js

@@ -0,0 +1 @@
+export { default } from "./required-fields-indicator.component";

package/esm/components/form/required-fields-indicator/required-fields-indicator.component.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+export interface RequiredIndicatorProps extends MarginProps {
+    children: React.ReactNode;
+}
+declare const _default: ({ children, ...rest }: RequiredIndicatorProps) => React.JSX.Element;
+export default _default;

package/esm/components/form/required-fields-indicator/required-fields-indicator.component.js

@@ -0,0 +1,20 @@
+import React from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+import Box from "../../box";
+import StyledTypography from "../../typography/typography.style";
+const StyledIndicatorContainer = styled(Box)`
+  ${StyledTypography} {
+    color: var(--colorsUtilityYin090);
+  }
+  ::after {
+    content: "*";
+    color: var(--colorsSemanticNegative500);
+    font-weight: 700;
+    margin-left: var(--spacing050);
+  }
+`;
+export default (({
+  children,
+  ...rest
+}) => /*#__PURE__*/React.createElement(StyledIndicatorContainer, rest, children));

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MarginProps } from "styled-system";
 export interface HrProps extends MarginProps {
     /** Breakpoint for adaptive left and right margins (below the breakpoint they go to 0).

package/esm/components/inline-inputs/inline-inputs.component.d.ts

@@ -21,9 +21,11 @@ export interface InlineInputsProps extends MarginProps, StyledContentContainerPr
     labelId?: string;
     /** Flag to configure component as mandatory. */
     required?: boolean;
+    /** Flag to configure component as optional. */
+    isOptional?: boolean;
 }
 declare const InlineInputs: {
-    ({ adaptiveLabelBreakpoint, label, labelAlign, labelId, htmlFor, children, className, gutter, inputWidth, labelInline, labelWidth, required, ...rest }: InlineInputsProps): React.JSX.Element;
+    ({ adaptiveLabelBreakpoint, label, labelAlign, labelId, htmlFor, children, className, gutter, inputWidth, labelInline, labelWidth, required, isOptional, ...rest }: InlineInputsProps): React.JSX.Element;
     displayName: string;
 };
 export default InlineInputs;

package/esm/components/inline-inputs/inline-inputs.component.js

@@ -1,5 +1,5 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 React, { useRef, useEffect } from "react";
 import PropTypes from "prop-types";
 import Label from "../../__internal__/label";
 import StyledInlineInputs, { StyledContentContainer, StyledInlineInput } from "./inline-inputs.style";
@@ -27,9 +27,11 @@ const InlineInputs = ({
   labelInline = true,
   labelWidth,
   required,
+  isOptional,
   ...rest
 }) => {
   const largeScreen = useIsAboveBreakpoint(adaptiveLabelBreakpoint);
+  const ref = useRef(null);
   let inlineLabel = labelInline;
   if (adaptiveLabelBreakpoint) {
     inlineLabel = largeScreen;
@@ -41,16 +43,24 @@ const InlineInputs = ({
       labelId: labelId,
       inline: inlineLabel,
       htmlFor: htmlFor,
-      isRequired: required
+      isRequired: required,
+      optional: isOptional
     }, label);
   }
   const marginProps = useFormSpacing(rest);
+  useEffect(() => {
+    if (required) {
+      const elements = Array.from(ref.current?.querySelectorAll("input") || /* istanbul ignore next */[]);
+      elements.forEach(el => el.setAttribute("required", ""));
+    }
+  }, [required]);
   return /*#__PURE__*/React.createElement(StyledInlineInputs, _extends({
     gutter: gutter,
     "data-component": "inline-inputs",
     className: className,
     labelWidth: labelWidth,
-    labelInline: inlineLabel
+    labelInline: inlineLabel,
+    ref: ref
   }, marginProps), renderLabel(), /*#__PURE__*/React.createElement(StyledContentContainer, {
     gutter: gutter,
     "data-element": "inline-inputs-container",

package/esm/components/link/link.component.js

@@ -3,7 +3,6 @@ import React, { useContext, useMemo, useState } from "react";
 import PropTypes from "prop-types";
 import Icon from "../icon";
 import MenuContext from "../menu/menu.context";
-import Event from "../../__internal__/utils/helpers/events";
 import { StyledLink, StyledContent } from "./link.style";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import useLocale from "../../hooks/__internal__/useLocale";
@@ -34,20 +33,6 @@ const Link = /*#__PURE__*/React.forwardRef(({
   const {
     inMenu
   } = useContext(MenuContext);
-  const handleOnKeyDown = ev => {
-    if (onKeyDown) {
-      onKeyDown(ev);
-    }
-
-    // return early if there is no onClick or there is a href prop
-    // or the event is not an enter key
-    if (href || !Event.isEnterKey(ev) && !Event.isSpaceKey(ev)) {
-      return;
-    }
-    if (onClick) {
-      onClick(ev);
-    }
-  };
   const renderLinkIcon = (currentAlignment = "left") => {
     const hasProperAlignment = icon && iconAlign === currentAlignment;
     return hasProperAlignment ? /*#__PURE__*/React.createElement(Icon, {
@@ -66,7 +51,7 @@ const Link = /*#__PURE__*/React.forwardRef(({
     }, {});
   }, [rest]);
   const componentProps = {
-    onKeyDown: handleOnKeyDown,
+    onKeyDown,
     onMouseDown,
     onClick,
     disabled,

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

@@ -2,8 +2,8 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 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, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 let ModalManagerInstance = /*#__PURE__*/function () {
   function ModalManagerInstance() {
     _classCallCheck(this, ModalManagerInstance);

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

@@ -3,6 +3,7 @@ import React, { useRef } from "react";
 import PropTypes from "prop-types";
 import Textbox from "../textbox";
 import Logger from "../../__internal__/utils/logger";
+import { ALIGN_DEFAULT, LABEL_VALIDATION_DEFAULT, LABEL_WIDTH_DEFAULT, SIZE_DEFAULT } from "../textbox/textbox.component";
 let deprecateInputRefWarnTriggered = false;
 let deprecateUncontrolledWarnTriggered = false;
 function isValidNumber(value) {
@@ -15,6 +16,10 @@ const Number = /*#__PURE__*/React.forwardRef(({
   onKeyDown,
   value,
   inputRef,
+  align = ALIGN_DEFAULT,
+  labelWidth = LABEL_WIDTH_DEFAULT,
+  size = SIZE_DEFAULT,
+  validationOnLabel = LABEL_VALIDATION_DEFAULT,
   ...rest
 }, ref) => {
   const selectionStart = useRef(null);
@@ -47,7 +52,11 @@ const Number = /*#__PURE__*/React.forwardRef(({
     onChange: handleOnChange,
     onKeyDown: handleKeyDown,
     ref: ref,
-    inputRef: inputRef
+    inputRef: inputRef,
+    align: align,
+    labelWidth: labelWidth,
+    size: size,
+    validationOnLabel: validationOnLabel
   }));
 });
 if (process.env.NODE_ENV !== "production") {

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

@@ -87,7 +87,9 @@ export interface NumeralDateProps<DateType extends NumeralDateObject = FullDate>
      * A React ref to pass to the input corresponding to the year
      */
     yearRef?: React.ForwardedRef<HTMLInputElement>;
+    /** Flag to configure component as optional. */
+    isOptional?: boolean;
 }
 export declare type ValidDateFormat = typeof ALLOWED_DATE_FORMATS[number];
-export declare const NumeralDate: <DateType extends NumeralDateObject = FullDate>({ 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, dayRef, monthRef, yearRef, ...rest }: NumeralDateProps<DateType>) => React.JSX.Element;
+export declare const NumeralDate: <DateType extends NumeralDateObject = FullDate>({ 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, isOptional, readOnly, size, enableInternalError, enableInternalWarning, tooltipPosition, helpAriaLabel, dayRef, monthRef, yearRef, ...rest }: NumeralDateProps<DateType>) => React.JSX.Element;
 export default NumeralDate;

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

@@ -103,6 +103,7 @@ export const NumeralDate = ({
   fieldHelp,
   adaptiveLabelBreakpoint,
   required,
+  isOptional,
   readOnly,
   size,
   enableInternalError,
@@ -215,6 +216,7 @@ export const NumeralDate = ({
     fieldHelp: fieldHelp,
     adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
     isRequired: required,
+    isOptional: isOptional,
     validationRedesignOptIn: validationRedesignOptIn
   }, filterStyledSystemMarginProps(rest)), validationRedesignOptIn && labelHelp && /*#__PURE__*/React.createElement(StyledHintText, null, labelHelp), /*#__PURE__*/React.createElement(Box, {
     position: "relative"
@@ -285,8 +287,6 @@ export const NumeralDate = ({
       error: !!internalError,
       warning: !!internalWarning,
       info: !!info
-    }, required && {
-      required
     }, isEnd && !validationRedesignOptIn && !validationOnLabel && {
       error: internalError,
       warning: internalWarning,
@@ -294,7 +294,8 @@ export const NumeralDate = ({
     }, {
       size: size,
       tooltipPosition: tooltipPosition,
-      "aria-labelledby": labelId
+      "aria-labelledby": labelId,
+      required: required
     })))));
   }))))));
 };

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

@@ -16,7 +16,7 @@ export interface PagerNavigationProps {
     /** 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;
+    onPagination: (currentPage: number, pageSize: number, origin: string) => void;
     /** Should the `First` and `Last` navigation buttons be shown */
     showFirstAndLastButtons?: boolean;
     /** Should the `Next` and `Previous` navigation buttons be shown */

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

@@ -4,8 +4,8 @@ declare type PageSizeOption = {
     name: number;
 };
 export interface PagerProps {
-    /** Function called when pager changes (PageSize, Current Page) */
-    onPagination: (pageSize: number, currentPage: number, origin: string) => void;
+    /** Function called when pager changes (Current page, Page size, Origin component) */
+    onPagination: (currentPage: number, pageSize: number, origin: string) => void;
     /** Callback function for next link */
     onNext?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
     /** Callback function for first link */

package/esm/components/popover-container/popover-container.component.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { PaddingProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
 export interface RenderOpenProps {
     tabIndex: number;
     isOpen?: boolean;
@@ -18,8 +19,9 @@ export interface RenderCloseProps {
     onClick: (ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>) => void;
     ref: React.RefObject<HTMLButtonElement>;
     "aria-label": string;
+    closeButtonDataProps?: Pick<TagProps, "data-role" | "data-element">;
 }
-export declare const renderClose: ({ "data-element": dataElement, tabIndex, onClick, ref, "aria-label": ariaLabel, }: RenderCloseProps) => React.JSX.Element;
+export declare const renderClose: ({ "data-element": dataElement, tabIndex, onClick, ref, "aria-label": ariaLabel, closeButtonDataProps, }: RenderCloseProps) => React.JSX.Element;
 export interface PopoverContainerProps extends PaddingProps {
     /** A function that will render the open component
      *
@@ -53,10 +55,12 @@ export interface PopoverContainerProps extends PaddingProps {
     openButtonAriaLabel?: string;
     /** Close button aria label */
     closeButtonAriaLabel?: string;
+    /** Data tag prop bag for close Button */
+    closeButtonDataProps?: Pick<TagProps, "data-role" | "data-element">;
     /** Container aria label */
     containerAriaLabel?: string;
     /** Disables the animation for the component */
     disableAnimation?: boolean;
 }
-export declare const PopoverContainer: ({ children, title, position, open, onOpen, onClose, renderOpenComponent, renderCloseComponent, shouldCoverButton, ariaDescribedBy, openButtonAriaLabel, closeButtonAriaLabel, containerAriaLabel, disableAnimation, ...rest }: PopoverContainerProps) => React.JSX.Element;
+export declare const PopoverContainer: ({ children, title, position, open, onOpen, onClose, renderOpenComponent, renderCloseComponent, shouldCoverButton, ariaDescribedBy, openButtonAriaLabel, closeButtonAriaLabel, containerAriaLabel, closeButtonDataProps, disableAnimation, ...rest }: PopoverContainerProps) => React.JSX.Element;
 export default PopoverContainer;

package/esm/components/popover-container/popover-container.component.js

@@ -14,6 +14,7 @@ import Events from "../../__internal__/utils/helpers/events";
 import FocusTrap from "../../__internal__/focus-trap";
 import { ModalContext } from "../modal";
 import useFocusPortalContent from "../../hooks/__internal__/useFocusPortalContent";
+import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 export const renderOpen = ({
   tabIndex,
   onClick,
@@ -42,14 +43,17 @@ export const renderClose = ({
   tabIndex,
   onClick,
   ref,
-  "aria-label": ariaLabel
-}) => /*#__PURE__*/React.createElement(PopoverContainerCloseIcon, {
-  "data-element": dataElement,
+  "aria-label": ariaLabel,
+  closeButtonDataProps
+}) => /*#__PURE__*/React.createElement(PopoverContainerCloseIcon, _extends({
   tabIndex: tabIndex,
   onClick: onClick,
   ref: ref,
   "aria-label": ariaLabel
-}, /*#__PURE__*/React.createElement(Icon, {
+}, tagComponent("close", {
+  "data-element": dataElement,
+  ...closeButtonDataProps
+})), /*#__PURE__*/React.createElement(Icon, {
   type: "close"
 }));
 const popoverMiddleware = [offset(({
@@ -73,6 +77,7 @@ export const PopoverContainer = ({
   openButtonAriaLabel,
   closeButtonAriaLabel = "close",
   containerAriaLabel,
+  closeButtonDataProps,
   disableAnimation = false,
   ...rest
 }) => {
@@ -139,7 +144,8 @@ export const PopoverContainer = ({
     tabIndex: 0,
     onClick: handleCloseButtonClick,
     ref: closeButtonRef,
-    "aria-label": closeButtonAriaLabel
+    "aria-label": closeButtonAriaLabel,
+    closeButtonDataProps
   };
   const handleClickAway = e => {
     if (!isControlled) setIsOpenInternal(false);