carbon-react 109.5.0 → 109.5.1

package/esm/__internal__/form-field/form-field.component.d.ts

@@ -0,0 +1,59 @@
+import React from "react";
+import { ValidationProps } from "__internal__/validations";
+import { MarginProps } from "styled-system";
+import { TagProps } from "../utils/helpers/tags/tags";
+import { IconType } from "../../components/icon";
+interface CommonFormFieldProps extends MarginProps, ValidationProps {
+    /** If true, the component will be disabled */
+    disabled?: boolean;
+    /** Help content to be displayed under an input */
+    fieldHelp?: React.ReactNode;
+    /** The unique id of the Help component tooltip, used for accessibility */
+    tooltipId?: string;
+    /** The unique id of the FieldHelp component */
+    fieldHelpId?: string;
+    /** Label content */
+    label?: React.ReactNode;
+    /** Text alignment of the label */
+    labelAlign?: "left" | "right";
+    /** A message that the Help component will display */
+    labelHelp?: React.ReactNode;
+    /** Help Icon type */
+    labelHelpIcon?: IconType;
+    /** The unique id of the label element */
+    labelId?: string;
+    /** When true label is inline */
+    labelInline?: boolean;
+    /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
+    labelSpacing?: 1 | 2;
+    /** Label width */
+    labelWidth?: number;
+    /** If true the label switches position with the input */
+    reverse?: boolean;
+    /** Id of the validation icon */
+    validationIconId?: string;
+}
+export interface FormFieldProps extends CommonFormFieldProps, TagProps {
+    /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
+    adaptiveLabelBreakpoint?: number;
+    /** Content to be rendered inside the FormField */
+    children?: React.ReactNode;
+    /**
+     * If true, the FieldHelp will be displayed inline
+     * To be used with labelInline prop set to true
+     */
+    fieldHelpInline?: boolean;
+    /** Id of the element a label should be bound to */
+    id: string;
+    /** [Legacy] Flag to configure component as optional in Form */
+    isOptional?: boolean;
+    /** Flag to configure component as mandatory */
+    isRequired?: boolean;
+    /** Whether to show the validation icon */
+    useValidationIcon?: boolean;
+}
+declare const FormField: {
+    ({ children, disabled, fieldHelp: fieldHelpContent, fieldHelpInline, error, warning, info, tooltipId, fieldHelpId, label, labelId, labelAlign, labelHelp, labelHelpIcon, labelInline, labelSpacing, labelWidth, id, reverse, isOptional, useValidationIcon, adaptiveLabelBreakpoint, isRequired, validationIconId, ...rest }: FormFieldProps): JSX.Element;
+    displayName: string;
+};
+export default FormField;

package/esm/__internal__/form-field/form-field.component.js

@@ -1,8 +1,8 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import React, { useContext, useEffect } from "react";
+import React, { useContext, useEffect, useMemo } from "react";
 import PropTypes from "prop-types";
-import styledSystemPropTypes from "@styled-system/prop-types";
+import invariant from "invariant";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import FormFieldStyle, { FieldLineStyle } from "./form-field.style";
 import Label from "../label";
@@ -10,7 +10,6 @@ import FieldHelp from "../field-help";
 import tagComponent from "../utils/helpers/tags/tags";
 import { TabContext } from "../../components/tabs/tab";
 import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
-const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 
 const FormField = ({
   children,
@@ -22,7 +21,6 @@ const FormField = ({
   info,
   tooltipId,
   fieldHelpId,
-  helpTabIndex,
   label,
   labelId,
   labelAlign,
@@ -40,7 +38,16 @@ const FormField = ({
   validationIconId,
   ...rest
 }) => {
-  const context = useContext(TabContext);
+  const invalidValidationProp = useMemo(() => {
+    const validationProps = {
+      error: !!error,
+      warning: !!warning,
+      info: !!info
+    };
+    if (!disabled) return undefined;
+    return Object.keys(validationProps).find(propName => validationProps[propName]);
+  }, [error, warning, info, disabled]);
+  !(invalidValidationProp === undefined) ? process.env.NODE_ENV !== "production" ? invariant(false, `Prop \`${invalidValidationProp}\` cannot be used in conjunction with \`disabled\`. ` + "Use `readOnly` if you require users to see validations with a non-interactive field") : invariant(false) : void 0;
   const largeScreen = useIsAboveBreakpoint(adaptiveLabelBreakpoint);
   let inlineLabel = labelInline;
 
@@ -48,13 +55,16 @@ const FormField = ({
     inlineLabel = largeScreen;
   }
 
+  const {
+    setError,
+    setWarning,
+    setInfo
+  } = useContext(TabContext);
   useEffect(() => {
-    if (context && context.setError && context.setWarning && context.setInfo) {
-      context.setError(id, !!error);
-      context.setWarning(id, !!warning);
-      context.setInfo(id, !!info);
-    }
-  }, [id, context, error, warning, info]);
+    if (setError) setError(id, !!error);
+    if (setWarning) setWarning(id, !!warning);
+    if (setInfo) setInfo(id, !!info);
+  }, [id, setError, setWarning, setInfo, error, warning, info]);
   const marginProps = filterStyledSystemMarginProps(rest);
   const fieldHelp = fieldHelpContent ? /*#__PURE__*/React.createElement(FieldHelp, {
     labelInline: inlineLabel,
@@ -72,7 +82,6 @@ const FormField = ({
     info: !rest.validationRedesignOptIn && info,
     help: labelHelp,
     tooltipId: tooltipId,
-    helpTabIndex: helpTabIndex,
     htmlFor: id,
     helpIcon: labelHelpIcon,
     inline: inlineLabel,
@@ -86,52 +95,188 @@ const FormField = ({
   }, label), fieldHelpInline && fieldHelp, !reverse && children), !fieldHelpInline && fieldHelp);
 };
 
-const errorPropType = (props, propName, componentName, ...rest) => {
-  if (props[propName] && props.disabled) {
-    return new Error(`Prop \`${propName}\` cannot be used in conjunction with \`disabled\`. ` + "Use `readOnly` if you require users to see validations with a non-interactive field");
-  }
-
-  return PropTypes.oneOfType([PropTypes.bool, PropTypes.string])(props, propName, componentName, ...rest);
-};
-
 FormField.propTypes = {
-  /** Styled system margin props */
-  ...marginPropTypes,
-  children: PropTypes.node,
-  disabled: PropTypes.bool,
-  "data-component": PropTypes.string,
-  "data-role": PropTypes.string,
+  "adaptiveLabelBreakpoint": PropTypes.number,
+  "children": PropTypes.node,
+  "data-component": PropTypes.string.isRequired,
   "data-element": PropTypes.string,
-  fieldHelp: PropTypes.node,
-  fieldHelpInline: PropTypes.bool,
-  error: errorPropType,
-  warning: errorPropType,
-  info: errorPropType,
-  tooltipId: PropTypes.string,
-  fieldHelpId: PropTypes.string,
-  helpTabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  id: PropTypes.string.isRequired,
-  isOptional: PropTypes.bool,
-  label: PropTypes.node,
-  labelId: PropTypes.string,
-  labelAlign: PropTypes.oneOf(["left", "right"]),
-  labelHelp: PropTypes.node,
-  labelHelpIcon: PropTypes.string,
-  labelInline: PropTypes.bool,
-
-  /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
-  labelSpacing: PropTypes.oneOf([1, 2]),
-  labelWidth: PropTypes.number,
-  reverse: PropTypes.bool,
-  useValidationIcon: PropTypes.bool,
-
-  /** 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 */
-  isRequired: PropTypes.bool,
-
-  /** Id of the validation icon */
-  validationIconId: PropTypes.string
+  "data-role": PropTypes.string,
+  "disabled": PropTypes.bool,
+  "error": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  "fieldHelp": PropTypes.node,
+  "fieldHelpId": PropTypes.string,
+  "fieldHelpInline": PropTypes.bool,
+  "id": PropTypes.string.isRequired,
+  "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  "isOptional": PropTypes.bool,
+  "isRequired": PropTypes.bool,
+  "label": PropTypes.node,
+  "labelAlign": PropTypes.oneOf(["left", "right"]),
+  "labelHelp": PropTypes.node,
+  "labelHelpIcon": PropTypes.oneOf(["add", "admin", "alert", "analysis", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_up", "arrow", "attach", "bank", "basket_with_squares", "basket", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_today", "calendar", "call", "camera", "card_view", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "gift", "go", "graph", "grid", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "pause_circle", "pause", "pdf", "people_switch", "people", "person_info", "person_tick", "person", "phone", "piggy_bank", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question_hollow", "question_mark", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "talk", "three_boxes", "tick_circle", "tick", "true_tick", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"]),
+  "labelId": PropTypes.string,
+  "labelInline": PropTypes.bool,
+  "labelSpacing": PropTypes.oneOf([1, 2]),
+  "labelWidth": PropTypes.number,
+  "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "margin": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "ml": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mx": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "my": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "reverse": PropTypes.bool,
+  "tooltipId": PropTypes.string,
+  "useValidationIcon": PropTypes.bool,
+  "validationIconId": PropTypes.string,
+  "warning": PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
 };
+FormField.displayName = "FormField";
 export default FormField;

package/esm/__internal__/form-field/form-field.style.d.ts

@@ -0,0 +1,7 @@
+declare const FormFieldStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export interface FieldLineStyleProps {
+    inline?: boolean;
+}
+declare const FieldLineStyle: import("styled-components").StyledComponent<"div", any, FieldLineStyleProps, never>;
+export { FieldLineStyle };
+export default FormFieldStyle;

package/esm/__internal__/form-field/form-field.style.js

@@ -1,6 +1,6 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { space } from "styled-system";
-import BaseTheme from "../../style/themes/base";
+import { baseTheme } from "../../style/themes";
 const FormFieldStyle = styled.div`
   & + & {
     margin-top: 16px;
@@ -11,20 +11,14 @@ const FormFieldStyle = styled.div`
   }
 `;
 FormFieldStyle.defaultProps = {
-  theme: BaseTheme
+  theme: baseTheme
 };
 const FieldLineStyle = styled.div`
   ${({
   inline
-}) => {
-  if (inline) {
-    return `
-        display: flex;
-      `;
-  }
-
-  return "display: block;";
-}}
+}) => css`
+    display: ${inline ? "flex" : "block"};
+  `}
 `;
 export { FieldLineStyle };
 export default FormFieldStyle;

package/esm/__internal__/form-field/index.d.ts

@@ -1,5 +1,2 @@
-export {
-  default,
-  CommonFormFieldPropTypes,
-  FormFieldPropTypes,
-} from "./form-field";
+export { default } from "./form-field.component";
+export type { FormFieldProps } from "./form-field.component";

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

@@ -9,8 +9,6 @@ export interface LabelProps extends ValidationProps, StyledLabelProps, StyledLab
     help?: React.ReactNode;
     /** Icon type */
     helpIcon?: IconType;
-    /** Overrides the default tabindex of the Help component */
-    helpTabIndex?: number | string;
     /** A string that represents the ID of another form element */
     htmlFor?: string;
     /** The unique id of the label element */
@@ -22,6 +20,6 @@ export interface LabelProps extends ValidationProps, StyledLabelProps, StyledLab
     /** Id of the validation icon */
     validationIconId?: string;
 }
-export declare const Label: ({ align, children, disabled, error, help, helpIcon, helpTabIndex, htmlFor, info, inline, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, }: LabelProps) => JSX.Element;
-declare const _default: React.MemoExoticComponent<({ align, children, disabled, error, help, helpIcon, helpTabIndex, htmlFor, info, inline, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, }: LabelProps) => JSX.Element>;
+export declare const Label: ({ align, children, disabled, error, help, helpIcon, htmlFor, info, inline, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, }: LabelProps) => JSX.Element;
+declare const _default: React.MemoExoticComponent<({ align, children, disabled, error, help, helpIcon, htmlFor, info, inline, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, }: LabelProps) => JSX.Element>;
 export default _default;

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

@@ -32,7 +32,6 @@ const Label = ({
   error,
   help,
   helpIcon,
-  helpTabIndex,
   htmlFor,
   info,
   inline,
@@ -98,7 +97,6 @@ const Label = ({
 
     return help && /*#__PURE__*/React.createElement(StyledIconWrapper, wrapperProps, /*#__PURE__*/React.createElement(Help, {
       tooltipId: tooltipId,
-      tabIndex: Number(helpTabIndex),
       type: helpIcon,
       isFocused: isFocused
     }, help));
@@ -129,7 +127,6 @@ Label.propTypes = {
   "error": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   "help": PropTypes.node,
   "helpIcon": PropTypes.oneOf(["add", "admin", "alert", "analysis", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_up", "arrow", "attach", "bank", "basket_with_squares", "basket", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_today", "calendar", "call", "camera", "card_view", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "gift", "go", "graph", "grid", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "pause_circle", "pause", "pdf", "people_switch", "people", "person_info", "person_tick", "person", "phone", "piggy_bank", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question_hollow", "question_mark", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "talk", "three_boxes", "tick_circle", "tick", "true_tick", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"]),
-  "helpTabIndex": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   "htmlFor": PropTypes.string,
   "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   "inline": PropTypes.bool,

package/esm/components/button-toggle-group/button-toggle-group.component.js

@@ -19,7 +19,7 @@ const ButtonToggleGroup = ({
   error,
   warning,
   info,
-  validationOnLabel,
+  validationOnLabel = false,
   label,
   labelHelp,
   labelSpacing,
@@ -32,7 +32,7 @@ const ButtonToggleGroup = ({
   onChange,
   onBlur,
   value,
-  "data-component": dataComponent,
+  "data-component": dataComponent = "button-toggle-group",
   "data-element": dataElement,
   "data-role": dataRole,
   helpAriaLabel,
@@ -85,10 +85,13 @@ ButtonToggleGroup.propTypes = { ...marginPropTypes,
   /** Identifier used for testing purposes, applied to the root element of the component. */
   "data-role": PropTypes.string,
 
+  /** Unique id for the root element of the component */
+  id: PropTypes.string.isRequired,
+
   /** Specifies the name prop to be applied to each button in the group */
   name: PropTypes.string.isRequired,
 
-  /** Children to be rendered (ButtonToggle). */
+  /** Togglable buttons to be rendered. Only accepts children of type ButtonToggle */
   children: (props, propName, componentName) => {
     let error;
     const prop = props[propName];
@@ -149,21 +152,17 @@ ButtonToggleGroup.propTypes = { ...marginPropTypes,
   /** The alignment for the text in the label. */
   labelAlign: PropTypes.string,
 
-  /** callback to handle change event */
-  onChange: PropTypes.func,
-
   /** Callback fired when each RadioButton is blurred */
   onBlur: PropTypes.func,
 
+  /** callback to handle change event */
+  onChange: PropTypes.func,
+
   /** The value of the Button Toggle Group */
   value: PropTypes.string,
 
   /** Aria label for rendered help component */
   helpAriaLabel: PropTypes.string
 };
-ButtonToggleGroup.defaultProps = {
-  validationOnLabel: false,
-  "data-component": "button-toggle-group"
-};
 ButtonToggleGroup.displayName = "ButtonToggleGroup";
 export default ButtonToggleGroup;

package/esm/components/button-toggle-group/button-toggle-group.d.ts

@@ -17,9 +17,11 @@ export interface ButtonToggleGroupProps extends ValidationProps, MarginProps {
   "data-element"?: string;
   /** Identifier used for testing purposes, applied to the root element of the component. */
   "data-role"?: string;
+  /** Unique id for the root element of the component */
+  id: string;
   /** Specifies the name prop to be applied to each button in the group */
   name: string;
-  /** Children to be rendered (ButtonToggle). */
+  /** Togglable buttons to be rendered. Only accepts children of type ButtonToggle */
   children?: ButtonToggle | ButtonToggle[];
   /** When true, validation icon will be placed on label instead of being placed on the input */
   validationOnLabel?: boolean;

package/esm/components/switch/switch.component.js

@@ -184,9 +184,6 @@ Switch.propTypes = {
   /** When true, validation icon will be placed on label instead of being placed by the input */
   validationOnLabel: PropTypes.bool,
 
-  /** Override tab index on the validation and help icon */
-  helpTabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
   /** Triggers loading animation */
   loading: PropTypes.bool,
 

package/esm/components/switch/switch.d.ts

@@ -15,8 +15,6 @@ export interface SwitchProps extends CommonCheckableInputProps, MarginProps {
   adaptiveLabelBreakpoint?: number;
   /** Set the default value of the Switch if component is meant to be used as uncontrolled */
   defaultChecked?: boolean;
-  /** Overrides the default tabindex of the Help component */
-  helpTabIndex?: number | string;
   /** Text alignment of the label */
   labelAlign?: LabelAlign;
   /** When true label is inline */

package/esm/components/tabs/tab/tab.d.ts

@@ -2,9 +2,9 @@ import * as React from "react";
 import { PaddingProps } from "styled-system";
 
 export interface TabContextProps {
-  setError: (childId: string, hasError: boolean) => void;
-  setWarning: (childId: string, hasWarning: boolean) => void;
-  setInfo: (childId: string, hasInfo: boolean) => void;
+  setError?: (childId: string, hasError: boolean) => void;
+  setWarning?: (childId: string, hasWarning: boolean) => void;
+  setInfo?: (childId: string, hasInfo: boolean) => void;
 }
 
 export interface TabProps extends PaddingProps {

package/lib/__internal__/form-field/form-field.component.d.ts

@@ -0,0 +1,59 @@
+import React from "react";
+import { ValidationProps } from "__internal__/validations";
+import { MarginProps } from "styled-system";
+import { TagProps } from "../utils/helpers/tags/tags";
+import { IconType } from "../../components/icon";
+interface CommonFormFieldProps extends MarginProps, ValidationProps {
+    /** If true, the component will be disabled */
+    disabled?: boolean;
+    /** Help content to be displayed under an input */
+    fieldHelp?: React.ReactNode;
+    /** The unique id of the Help component tooltip, used for accessibility */
+    tooltipId?: string;
+    /** The unique id of the FieldHelp component */
+    fieldHelpId?: string;
+    /** Label content */
+    label?: React.ReactNode;
+    /** Text alignment of the label */
+    labelAlign?: "left" | "right";
+    /** A message that the Help component will display */
+    labelHelp?: React.ReactNode;
+    /** Help Icon type */
+    labelHelpIcon?: IconType;
+    /** The unique id of the label element */
+    labelId?: string;
+    /** When true label is inline */
+    labelInline?: boolean;
+    /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
+    labelSpacing?: 1 | 2;
+    /** Label width */
+    labelWidth?: number;
+    /** If true the label switches position with the input */
+    reverse?: boolean;
+    /** Id of the validation icon */
+    validationIconId?: string;
+}
+export interface FormFieldProps extends CommonFormFieldProps, TagProps {
+    /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
+    adaptiveLabelBreakpoint?: number;
+    /** Content to be rendered inside the FormField */
+    children?: React.ReactNode;
+    /**
+     * If true, the FieldHelp will be displayed inline
+     * To be used with labelInline prop set to true
+     */
+    fieldHelpInline?: boolean;
+    /** Id of the element a label should be bound to */
+    id: string;
+    /** [Legacy] Flag to configure component as optional in Form */
+    isOptional?: boolean;
+    /** Flag to configure component as mandatory */
+    isRequired?: boolean;
+    /** Whether to show the validation icon */
+    useValidationIcon?: boolean;
+}
+declare const FormField: {
+    ({ children, disabled, fieldHelp: fieldHelpContent, fieldHelpInline, error, warning, info, tooltipId, fieldHelpId, label, labelId, labelAlign, labelHelp, labelHelpIcon, labelInline, labelSpacing, labelWidth, id, reverse, isOptional, useValidationIcon, adaptiveLabelBreakpoint, isRequired, validationIconId, ...rest }: FormFieldProps): JSX.Element;
+    displayName: string;
+};
+export default FormField;