carbon-react 117.1.1 → 117.2.0

package/esm/__internal__/checkable-input/checkable-input.component.js

@@ -44,7 +44,7 @@ const CheckableInput = /*#__PURE__*/React.forwardRef(({
   const {
     labelId,
     fieldHelpId,
-    validationIconId,
+    validationId,
     ariaDescribedBy
   } = useInputAccessibility({
     id,
@@ -70,17 +70,16 @@ const CheckableInput = /*#__PURE__*/React.forwardRef(({
     labelId,
     labelInline,
     labelSpacing,
-    name: id,
     reverse,
     warning,
-    validationIconId,
+    validationIconId: validationId,
     // We don't want an asterisk on each radio control, only the legend
     // However, we still want the input element to receive the required prop
     isRequired: isRadio ? undefined : required,
     useValidationIcon: validationOnLabel
   };
   const inputProps = {
-    "aria-describedby": ariaDescribedBy,
+    ariaDescribedBy,
     "aria-labelledby": ariaLabelledBy,
     "aria-invalid": !!error,
     autoFocus,
@@ -95,6 +94,7 @@ const CheckableInput = /*#__PURE__*/React.forwardRef(({
     onFocus,
     required,
     ref,
+    validationIconId: validationId,
     ...props
   };
   return /*#__PURE__*/React.createElement(StyledCheckableInputWrapper, {
@@ -161,6 +161,7 @@ CheckableInput.propTypes = {
   "aria-valuemin": PropTypes.number,
   "aria-valuenow": PropTypes.number,
   "aria-valuetext": PropTypes.string,
+  "ariaDescribedBy": PropTypes.string,
   "ariaLabelledBy": PropTypes.string,
   "autoCapitalize": PropTypes.string,
   "autoComplete": PropTypes.string,
@@ -460,6 +461,7 @@ CheckableInput.propTypes = {
   "type": PropTypes.string.isRequired,
   "typeof": PropTypes.string,
   "unselectable": PropTypes.oneOf(["off", "on"]),
+  "validationIconId": PropTypes.string,
   "validationOnLabel": PropTypes.bool,
   "value": PropTypes.string,
   "vocab": PropTypes.string,

package/esm/__internal__/checkable-input/hidden-checkable-input.component.d.ts

@@ -1,5 +1,7 @@
 import React from "react";
 export interface CommonHiddenCheckableInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "size" | "type"> {
+    /** The id of the element that describe the input. */
+    ariaDescribedBy?: string;
     /** Prop to specify the aria-labelledby attribute of the input */
     ariaLabelledBy?: string;
     /** If true the Component will be focused when page load */
@@ -18,6 +20,8 @@ export interface CommonHiddenCheckableInputProps extends Omit<React.InputHTMLAtt
     onMouseLeave?: (ev: React.MouseEvent<HTMLInputElement>) => void;
     /** OnMouseEnter event handler */
     onMouseEnter?: (ev: React.MouseEvent<HTMLInputElement>) => void;
+    /** Id of the validation icon */
+    validationIconId?: string;
     /** Value of the input */
     value?: string;
 }

package/esm/__internal__/checkable-input/hidden-checkable-input.component.js

@@ -5,6 +5,7 @@ import PropTypes from "prop-types";
 import HiddenCheckableInputStyle from "./hidden-checkable-input.style";
 import { InputContext, InputGroupContext } from "../input-behaviour";
 const HiddenCheckableInput = /*#__PURE__*/React.forwardRef(({
+  ariaDescribedBy,
   ariaLabelledBy,
   name,
   checked,
@@ -13,19 +14,24 @@ const HiddenCheckableInput = /*#__PURE__*/React.forwardRef(({
   onChange,
   autoFocus,
   role,
+  validationIconId,
   ...props
 }, ref) => {
   const {
     onBlur,
     onFocus,
     onMouseEnter,
-    onMouseLeave
+    onMouseLeave,
+    hasFocus,
+    hasMouseOver
   } = useContext(InputContext);
   const {
     onBlur: onBlurGroup,
     onFocus: onFocusGroup,
     onMouseEnter: onMouseEnterGroup,
-    onMouseLeave: onMouseLeaveGroup
+    onMouseLeave: onMouseLeaveGroup,
+    hasFocus: hasGroupFocus,
+    hasMouseOver: hasGroupMouseOver
   } = useContext(InputGroupContext);
 
   const handleFocus = ev => {
@@ -52,7 +58,16 @@ const HiddenCheckableInput = /*#__PURE__*/React.forwardRef(({
     if (onMouseLeaveGroup) onMouseLeaveGroup();
   };
 
+  const hasValidationPart = (hasFocus || hasGroupFocus || hasMouseOver || hasGroupMouseOver) && validationIconId;
+  const descriptionList = ariaDescribedBy ? [ariaDescribedBy] : [];
+
+  if (hasValidationPart) {
+    descriptionList.push(validationIconId);
+  }
+
+  const combinedDescription = descriptionList.length ? descriptionList.filter(Boolean).join(" ") : undefined;
   return /*#__PURE__*/React.createElement(HiddenCheckableInputStyle, _extends({
+    "aria-describedby": combinedDescription,
     "aria-labelledby": ariaLabelledBy,
     autoFocus: autoFocus,
     "aria-checked": checked,
@@ -123,6 +138,7 @@ HiddenCheckableInput.propTypes = {
   "aria-valuemin": PropTypes.number,
   "aria-valuenow": PropTypes.number,
   "aria-valuetext": PropTypes.string,
+  "ariaDescribedBy": PropTypes.string,
   "ariaLabelledBy": PropTypes.string,
   "autoCapitalize": PropTypes.string,
   "autoComplete": PropTypes.string,
@@ -359,6 +375,7 @@ HiddenCheckableInput.propTypes = {
   "type": PropTypes.string.isRequired,
   "typeof": PropTypes.string,
   "unselectable": PropTypes.oneOf(["off", "on"]),
+  "validationIconId": PropTypes.string,
   "value": PropTypes.string,
   "vocab": PropTypes.string,
   "width": PropTypes.oneOfType([PropTypes.number, PropTypes.string])

package/esm/__internal__/input/input.component.d.ts

@@ -1,6 +1,8 @@
 import React from "react";
 export interface CommonInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
     align?: "right" | "left";
+    /** The id of the element that describe the input. */
+    ariaDescribedBy?: string;
     /** Override the variant component */
     as?: React.ElementType;
     /** If true the Component will be focused when rendered */
@@ -29,6 +31,8 @@ export interface CommonInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
     readOnly?: boolean;
     /** Flag to configure component as mandatory */
     required?: boolean;
+    /** Id of the validation icon */
+    validationIconId?: string;
 }
 export interface InputProps extends CommonInputProps {
     /** The visible width of the text control, in average character widths */

package/esm/__internal__/input/input.component.js

@@ -30,6 +30,7 @@ function selectTextOnFocus(input) {
 const Input = /*#__PURE__*/React.forwardRef(({
   align,
   "aria-labelledby": ariaLabelledBy,
+  ariaDescribedBy,
   placeholder,
   disabled,
   readOnly,
@@ -45,6 +46,7 @@ const Input = /*#__PURE__*/React.forwardRef(({
   type = "text",
   id,
   name,
+  validationIconId,
   ...rest
 }, ref) => {
   const context = useContext(InputContext);
@@ -145,7 +147,16 @@ const Input = /*#__PURE__*/React.forwardRef(({
     handleDeferred(ev);
   };
 
+  const hasValidationPart = (context.hasFocus || groupContext.hasFocus || context.hasMouseOver || groupContext.hasMouseOver) && validationIconId;
+  const descriptionList = ariaDescribedBy ? [ariaDescribedBy] : [];
+
+  if (hasValidationPart) {
+    descriptionList.push(validationIconId);
+  }
+
+  const combinedDescription = descriptionList.length ? descriptionList.filter(Boolean).join(" ") : undefined;
   return /*#__PURE__*/React.createElement(StyledInput, _extends({}, rest, {
+    "aria-describedby": combinedDescription,
     "aria-labelledby": ariaLabelledBy,
     align: align,
     placeholder: placeholder,
@@ -216,6 +227,7 @@ Input.propTypes = {
   "aria-valuemin": PropTypes.number,
   "aria-valuenow": PropTypes.number,
   "aria-valuetext": PropTypes.string,
+  "ariaDescribedBy": PropTypes.string,
   "as": PropTypes.elementType,
   "autoCapitalize": PropTypes.string,
   "autoComplete": PropTypes.string,
@@ -508,6 +520,7 @@ Input.propTypes = {
   "type": PropTypes.string,
   "typeof": PropTypes.string,
   "unselectable": PropTypes.oneOf(["off", "on"]),
+  "validationIconId": PropTypes.string,
   "value": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.number, PropTypes.string]),
   "vocab": PropTypes.string,
   "width": PropTypes.oneOfType([PropTypes.number, PropTypes.string])

package/esm/__internal__/input-icon-toggle/input-icon-toggle.component.js

@@ -47,7 +47,7 @@ const InputIconToggle = ({
       onBlur: onBlur,
       isPartOfInput: true,
       tabIndex: iconTabIndex,
-      iconId: validationIconId,
+      tooltipId: validationIconId,
       tooltipPosition: align === "right" ? "left" : "right"
     }));
   }

package/esm/__internal__/label/label.component.js

@@ -85,8 +85,7 @@ const Label = ({
         inline
       });
       return /*#__PURE__*/React.createElement(StyledIconWrapper, null, /*#__PURE__*/React.createElement(ValidationIcon, {
-        iconId: validationIconId,
-        tooltipId: tooltipId,
+        tooltipId: validationIconId,
         error: error,
         warning: warning,
         info: info,

package/esm/__internal__/validation-message/validation-message.component.d.ts

@@ -3,9 +3,11 @@ export interface ValidationMessageProps {
     /** Indicate that error has occurred
     Pass string to display hint with error */
     error?: boolean | string;
+    /** Id of the component, to be used for accessibility purposes */
+    validationId?: string;
     /** Indicate that warning has occurred
     Pass string to display hint with warning */
     warning?: boolean | string;
 }
-declare const ValidationMessage: ({ error, warning }: ValidationMessageProps) => JSX.Element | null;
+declare const ValidationMessage: ({ error, validationId, warning, }: ValidationMessageProps) => JSX.Element | null;
 export default ValidationMessage;

package/esm/__internal__/validation-message/validation-message.component.js

@@ -4,17 +4,20 @@ import StyledValidationMessage from "./validation-message.style";
 
 const ValidationMessage = ({
   error,
+  validationId,
   warning
 }) => {
   const validation = error || warning;
   const isStringValidation = typeof validation === "string";
   return isStringValidation ? /*#__PURE__*/React.createElement(StyledValidationMessage, {
+    id: validationId,
     isWarning: !!(!error && warning)
   }, validation) : null;
 };
 
 ValidationMessage.propTypes = {
   "error": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  "validationId": PropTypes.string,
   "warning": PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
 };
 export default ValidationMessage;

package/esm/__internal__/validations/validation-icon.component.js

@@ -1,8 +1,9 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import React, { useContext, useState } from "react";
+import React, { useContext, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
+import guid from "../utils/helpers/guid";
 import Icon from "../../components/icon";
 import ValidationIconStyle from "./validation-icon.style";
 import { InputContext, InputGroupContext } from "../input-behaviour";
@@ -35,6 +36,7 @@ const ValidationIcon = ({
   tooltipFlipOverrides,
   ...rest
 }) => {
+  const validationTooltipId = useRef(tooltipId || guid());
   const flipBehaviourCheck = Array.isArray(tooltipFlipOverrides) && tooltipFlipOverrides.every(override => ["bottom", "left", "right", "top"].includes(override));
 
   if (tooltipFlipOverrides) {
@@ -76,10 +78,11 @@ const ValidationIcon = ({
     },
     isPartOfInput: isPartOfInput
   }, filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(Icon, {
+    "aria-describedby": validationTooltipId.current,
     key: `${validationType}-icon`,
     type: validationType,
     tabIndex: tabIndex,
-    tooltipId: tooltipId,
+    tooltipId: validationTooltipId.current,
     tooltipMessage: validationMessage,
     tooltipPosition: tooltipPosition,
     tooltipVisible: hasFocus || hasMouseOver || groupHasFocus || groupHasMouseOver || triggeredByIcon,
@@ -87,7 +90,6 @@ const ValidationIcon = ({
     isPartOfInput: isPartOfInput,
     inputSize: size,
     id: iconId,
-    ariaLabel: validationMessage,
     focusable: tabIndex !== -1
   }));
 };

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

@@ -0,0 +1,8 @@
+import React from "react";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface BreadcrumbsProps extends TagProps {
+    /** Child crumbs to display */
+    children: React.ReactNode;
+}
+export declare const Breadcrumbs: React.ForwardRefExoticComponent<BreadcrumbsProps & React.RefAttributes<HTMLElement>>;
+export default Breadcrumbs;

package/esm/components/breadcrumbs/breadcrumbs.component.js

@@ -0,0 +1,28 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from "react";
+import PropTypes from "prop-types";
+import tagComponent from "../../__internal__/utils/helpers/tags";
+import StyledBreadcrumbs from "./breadcrumbs.style";
+import useLocale from "../../hooks/__internal__/useLocale";
+const Breadcrumbs = /*#__PURE__*/React.forwardRef(({
+  children,
+  ...rest
+}, ref) => {
+  const l = useLocale();
+  return /*#__PURE__*/React.createElement(StyledBreadcrumbs, _extends({
+    ref: ref,
+    role: "navigation"
+  }, tagComponent("breadcrumbs", rest), {
+    "aria-label": l.breadcrumbs.ariaLabel()
+  }), /*#__PURE__*/React.createElement("ol", null, children));
+});
+Breadcrumbs.propTypes = {
+  "children": PropTypes.node,
+  "data-component": PropTypes.string,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string
+};
+export { Breadcrumbs };
+Breadcrumbs.displayName = "Breadcrumbs";
+export default Breadcrumbs;

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

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

package/esm/components/breadcrumbs/breadcrumbs.style.js

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+const StyledBreadcrumbs = styled.nav`
+  ol {
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+  }
+`;
+export default StyledBreadcrumbs;

package/esm/components/breadcrumbs/crumb/crumb.component.d.ts

@@ -0,0 +1,11 @@
+import { LinkProps } from "components/link/link.component";
+import React from "react";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface CrumbProps extends Omit<LinkProps, "tooltipMessage" | "tooltipPosition" | "iconType" | "iconAlign" | "isSkipLink" | "isDarkBackground" | "ariaLabel" | "className" | "variant" | "target" | "rel" | "icon" | "disabled">, TagProps {
+    /** This sets the Crumb to current, does not render Link */
+    isCurrent?: boolean;
+    /** The href string for Crumb Link */
+    href: string;
+}
+declare const Crumb: React.ForwardRefExoticComponent<CrumbProps & React.RefAttributes<HTMLLinkElement>>;
+export default Crumb;

package/esm/components/breadcrumbs/crumb/crumb.component.js

@@ -0,0 +1,80 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from "react";
+import PropTypes from "prop-types";
+import tagComponent from "../../../__internal__/utils/helpers/tags";
+import { StyledCrumb, Divider } from "./crumb.style";
+const Crumb = /*#__PURE__*/React.forwardRef(({
+  href,
+  isCurrent,
+  children,
+  ...rest
+}, ref) => /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(StyledCrumb, _extends({
+  ref: ref,
+  isCurrent: isCurrent,
+  "aria-current": isCurrent ? "page" : undefined
+}, tagComponent("crumb", rest), !isCurrent && {
+  href
+}), children), !isCurrent && /*#__PURE__*/React.createElement(Divider, null)));
+Crumb.propTypes = {
+  "aria-activedescendant": PropTypes.string,
+  "aria-atomic": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
+  "aria-autocomplete": PropTypes.oneOf(["both", "inline", "list", "none"]),
+  "aria-busy": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
+  "aria-checked": PropTypes.oneOfType([PropTypes.oneOf(["false", "mixed", "true"]), PropTypes.bool]),
+  "aria-colcount": PropTypes.number,
+  "aria-colindex": PropTypes.number,
+  "aria-colspan": PropTypes.number,
+  "aria-controls": PropTypes.string,
+  "aria-current": PropTypes.oneOfType([PropTypes.oneOf(["date", "false", "location", "page", "step", "time", "true"]), PropTypes.bool]),
+  "aria-describedby": PropTypes.string,
+  "aria-details": PropTypes.string,
+  "aria-disabled": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
+  "aria-dropeffect": PropTypes.oneOf(["copy", "execute", "link", "move", "none", "popup"]),
+  "aria-errormessage": PropTypes.string,
+  "aria-expanded": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
+  "aria-flowto": PropTypes.string,
+  "aria-grabbed": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
+  "aria-haspopup": PropTypes.oneOfType([PropTypes.oneOf(["dialog", "false", "grid", "listbox", "menu", "tree", "true"]), PropTypes.bool]),
+  "aria-hidden": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
+  "aria-invalid": PropTypes.oneOfType([PropTypes.oneOf(["false", "grammar", "spelling", "true"]), PropTypes.bool]),
+  "aria-keyshortcuts": PropTypes.string,
+  "aria-label": PropTypes.string,
+  "aria-labelledby": PropTypes.string,
+  "aria-level": PropTypes.number,
+  "aria-live": PropTypes.oneOf(["assertive", "off", "polite"]),
+  "aria-modal": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
+  "aria-multiline": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
+  "aria-multiselectable": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
+  "aria-orientation": PropTypes.oneOf(["horizontal", "vertical"]),
+  "aria-owns": PropTypes.string,
+  "aria-placeholder": PropTypes.string,
+  "aria-posinset": PropTypes.number,
+  "aria-pressed": PropTypes.oneOfType([PropTypes.oneOf(["false", "mixed", "true"]), PropTypes.bool]),
+  "aria-readonly": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
+  "aria-relevant": PropTypes.oneOf(["additions removals", "additions text", "additions", "all", "removals additions", "removals text", "removals", "text additions", "text removals", "text"]),
+  "aria-required": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
+  "aria-roledescription": PropTypes.string,
+  "aria-rowcount": PropTypes.number,
+  "aria-rowindex": PropTypes.number,
+  "aria-rowspan": PropTypes.number,
+  "aria-selected": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
+  "aria-setsize": PropTypes.number,
+  "aria-sort": PropTypes.oneOf(["ascending", "descending", "none", "other"]),
+  "aria-valuemax": PropTypes.number,
+  "aria-valuemin": PropTypes.number,
+  "aria-valuenow": PropTypes.number,
+  "aria-valuetext": PropTypes.string,
+  "children": PropTypes.node,
+  "data-component": PropTypes.string,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
+  "href": PropTypes.string.isRequired,
+  "isCurrent": PropTypes.bool,
+  "onClick": PropTypes.func,
+  "onKeyDown": PropTypes.func,
+  "onMouseDown": PropTypes.func,
+  "placeholderTabIndex": PropTypes.bool
+};
+Crumb.displayName = "Crumb";
+export default Crumb;

package/esm/components/breadcrumbs/crumb/crumb.style.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { LinkProps } from "../../link";
+interface StyleCrumbProps extends LinkProps {
+    isCurrent?: boolean;
+}
+export declare const StyledCrumb: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<HTMLButtonElement | HTMLLinkElement>>, any, StyleCrumbProps, never>;
+export declare const Divider: import("styled-components").StyledComponent<"span", any, {
+    children: "/";
+    "aria-hidden": "true";
+}, "aria-hidden" | "children">;
+declare const _default: {
+    StyledCrumb: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<HTMLButtonElement | HTMLLinkElement>>, any, StyleCrumbProps, never>;
+    Divider: import("styled-components").StyledComponent<"span", any, {
+        children: "/";
+        "aria-hidden": "true";
+    }, "aria-hidden" | "children">;
+};
+export default _default;

package/esm/components/breadcrumbs/crumb/crumb.style.js

@@ -0,0 +1,33 @@
+import styled, { css } from "styled-components";
+import Link from "../../link";
+export const StyledCrumb = styled(Link)`
+  font: var(--typographyLinkTextM);
+  ${({
+  isCurrent
+}) => isCurrent && css`
+      a {
+        color: var(--colorsUtilityYin090);
+        text-decoration: none;
+        font: var(--typographyBreadcrumbCurrentPageM);
+        cursor: text;
+        :hover {
+          color: var(--colorsUtilityYin090);
+          text-decoration: none;
+          cursor: text;
+        }
+      }
+    `}
+`;
+export const Divider = styled.span.attrs({
+  children: "/",
+  "aria-hidden": "true"
+})`
+  margin: 0px var(--spacing050) 0px var(--spacing100);
+  line-height: 16px;
+  font: var(--typographyBreadcrumbSeparatorM);
+  color: var(--colorsUtilityYin055);
+`;
+export default {
+  StyledCrumb,
+  Divider
+};

package/esm/components/breadcrumbs/crumb/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Crumb } from "./crumb.component";
+export type { CrumbProps } from "./crumb.component";

package/esm/components/breadcrumbs/crumb/index.js

@@ -0,0 +1 @@
+export { default as Crumb } from "./crumb.component";

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

@@ -0,0 +1,4 @@
+export { default as Breadcrumbs } from "./breadcrumbs.component";
+export { Crumb } from "./crumb";
+export type { BreadcrumbsProps } from "./breadcrumbs.component";
+export type { CrumbProps } from "./crumb";

package/esm/components/breadcrumbs/index.js

@@ -0,0 +1,2 @@
+export { default as Breadcrumbs } from "./breadcrumbs.component";
+export { Crumb } from "./crumb";

package/esm/components/checkbox/checkbox.component.js

@@ -165,6 +165,7 @@ Checkbox.propTypes = {
   "aria-valuemin": PropTypes.number,
   "aria-valuenow": PropTypes.number,
   "aria-valuetext": PropTypes.string,
+  "ariaDescribedBy": PropTypes.string,
   "ariaLabelledBy": PropTypes.string,
   "autoCapitalize": PropTypes.string,
   "autoComplete": PropTypes.string,
@@ -625,6 +626,7 @@ Checkbox.propTypes = {
   "translate": PropTypes.oneOf(["no", "yes"]),
   "typeof": PropTypes.string,
   "unselectable": PropTypes.oneOf(["off", "on"]),
+  "validationIconId": PropTypes.string,
   "validationOnLabel": PropTypes.bool,
   "value": PropTypes.string,
   "vocab": PropTypes.string,

package/esm/components/decimal/decimal.component.js

@@ -268,6 +268,7 @@ Decimal.propTypes = {
   "aria-valuemin": PropTypes.number,
   "aria-valuenow": PropTypes.number,
   "aria-valuetext": PropTypes.string,
+  "ariaDescribedBy": PropTypes.string,
   "as": PropTypes.elementType,
   "autoCapitalize": PropTypes.string,
   "autoComplete": PropTypes.string,
@@ -737,6 +738,7 @@ Decimal.propTypes = {
   "translate": PropTypes.oneOf(["no", "yes"]),
   "typeof": PropTypes.string,
   "unselectable": PropTypes.oneOf(["off", "on"]),
+  "validationIconId": PropTypes.string,
   "validationOnLabel": PropTypes.bool,
   "value": PropTypes.string,
   "vocab": PropTypes.string,

package/esm/components/grouped-character/grouped-character.component.js

@@ -183,6 +183,7 @@ GroupedCharacter.propTypes = {
   "aria-valuemin": PropTypes.number,
   "aria-valuenow": PropTypes.number,
   "aria-valuetext": PropTypes.string,
+  "ariaDescribedBy": PropTypes.string,
   "as": PropTypes.elementType,
   "autoCapitalize": PropTypes.string,
   "autoComplete": PropTypes.string,
@@ -656,6 +657,7 @@ GroupedCharacter.propTypes = {
   "translate": PropTypes.oneOf(["no", "yes"]),
   "typeof": PropTypes.string,
   "unselectable": PropTypes.oneOf(["off", "on"]),
+  "validationIconId": PropTypes.string,
   "validationOnLabel": PropTypes.bool,
   "value": PropTypes.string,
   "vocab": PropTypes.string,

package/esm/components/i18n-provider/i18n-provider.component.js

@@ -24,6 +24,9 @@ I18nProvider.propTypes = {
     "batchSelection": PropTypes.shape({
       "selected": PropTypes.func.isRequired
     }),
+    "breadcrumbs": PropTypes.shape({
+      "ariaLabel": PropTypes.func.isRequired
+    }),
     "characterCount": PropTypes.shape({
       "charactersLeft": PropTypes.func.isRequired,
       "hintString": PropTypes.func.isRequired,

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

@@ -108,6 +108,7 @@ Number.propTypes = {
   "aria-valuemin": PropTypes.number,
   "aria-valuenow": PropTypes.number,
   "aria-valuetext": PropTypes.string,
+  "ariaDescribedBy": PropTypes.string,
   "as": PropTypes.elementType,
   "autoCapitalize": PropTypes.string,
   "autoComplete": PropTypes.string,
@@ -579,6 +580,7 @@ Number.propTypes = {
   "translate": PropTypes.oneOf(["no", "yes"]),
   "typeof": PropTypes.string,
   "unselectable": PropTypes.oneOf(["off", "on"]),
+  "validationIconId": PropTypes.string,
   "validationOnLabel": PropTypes.bool,
   "value": PropTypes.string,
   "vocab": PropTypes.string,

package/esm/components/radio-button/radio-button.component.js

@@ -161,6 +161,7 @@ RadioButton.propTypes = {
   "aria-valuemin": PropTypes.number,
   "aria-valuenow": PropTypes.number,
   "aria-valuetext": PropTypes.string,
+  "ariaDescribedBy": PropTypes.string,
   "ariaLabelledBy": PropTypes.string,
   "autoCapitalize": PropTypes.string,
   "autoComplete": PropTypes.string,
@@ -621,6 +622,7 @@ RadioButton.propTypes = {
   "translate": PropTypes.oneOf(["no", "yes"]),
   "typeof": PropTypes.string,
   "unselectable": PropTypes.oneOf(["off", "on"]),
+  "validationIconId": PropTypes.string,
   "validationOnLabel": PropTypes.bool,
   "value": PropTypes.string.isRequired,
   "vocab": PropTypes.string,

package/esm/components/show-edit-pod/show-edit-pod.component.js

@@ -9,7 +9,9 @@ import Events from "../../__internal__/utils/helpers/events";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import LocaleContext from "../../__internal__/i18n-context";
 import StyledPod from "./show-edit-pod.style";
+import Logger from "../../__internal__/utils/logger";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+let deprecateWarnTriggered = false;
 
 const ShowEditPod = ({
   border = false,
@@ -35,6 +37,11 @@ const ShowEditPod = ({
   variant = "transparent",
   ...rest
 }) => {
+  if (!deprecateWarnTriggered) {
+    deprecateWarnTriggered = true;
+    Logger.deprecate("The ShowEditPod component is deprecated and will soon be removed. Please use alternatives such as the Fieldset, Form or Pod components instead.");
+  }
+
   const locale = useContext(LocaleContext);
   const ref = useRef();
   const editModeNodeRef = useRef();