carbon-react 119.7.1 → 119.8.0

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

@@ -4,6 +4,8 @@ import { ValidationProps } from "../validations";
 export interface CommonCheckableInputProps extends ValidationProps, CommonHiddenCheckableInputProps {
     /** If true, the component will be disabled */
     disabled?: boolean;
+    /** @private @ignore */
+    loading?: boolean;
     /** Help content to be displayed under an input */
     fieldHelp?: React.ReactNode;
     /**

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

@@ -14,6 +14,7 @@ const CheckableInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     checked,
     children,
     disabled,
+    loading,
     error,
     fieldHelp,
     fieldHelpInline,
@@ -57,6 +58,7 @@ const CheckableInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const isRadio = type === "radio";
   const formFieldProps = {
     disabled,
+    loading,
     error,
     fieldHelp,
     fieldHelpInline,
@@ -217,6 +219,7 @@ CheckableInput.propTypes = {
   "labelWidth": PropTypes.number,
   "lang": PropTypes.string,
   "list": PropTypes.string,
+  "loading": PropTypes.bool,
   "max": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   "maxLength": PropTypes.number,
   "min": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

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

@@ -7,6 +7,8 @@ import { IconType } from "../../components/icon";
 interface CommonFormFieldProps extends MarginProps, ValidationProps {
     /** If true, the component will be disabled */
     disabled?: boolean;
+    /** @private @ignore */
+    loading?: boolean;
     /** Help content to be displayed under an input */
     fieldHelp?: React.ReactNode;
     /** The unique id of the Help component tooltip, used for accessibility */
@@ -59,7 +61,7 @@ export interface FormFieldProps extends CommonFormFieldProps, TagProps {
     useValidationIcon?: boolean;
 }
 declare const FormField: {
-    ({ children, "data-component": dataComponent, disabled, fieldHelp: fieldHelpContent, fieldHelpInline, error, warning, info, tooltipId, fieldHelpId, label, labelId, labelAlign, labelHelp, labelHelpIcon, labelInline, labelSpacing, labelWidth, labelAs, id, reverse, isOptional, useValidationIcon, adaptiveLabelBreakpoint, isRequired, validationIconId, validationRedesignOptIn, ...rest }: FormFieldProps): React.JSX.Element;
+    ({ children, "data-component": dataComponent, disabled, loading, fieldHelp: fieldHelpContent, fieldHelpInline, error, warning, info, tooltipId, fieldHelpId, label, labelId, labelAlign, labelHelp, labelHelpIcon, labelInline, labelSpacing, labelWidth, labelAs, id, reverse, isOptional, useValidationIcon, adaptiveLabelBreakpoint, isRequired, validationIconId, validationRedesignOptIn, ...rest }: FormFieldProps): React.JSX.Element;
     displayName: string;
 };
 export default FormField;

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

@@ -14,6 +14,7 @@ const FormField = _ref => {
     children,
     "data-component": dataComponent,
     disabled,
+    loading,
     fieldHelp: fieldHelpContent,
     fieldHelpInline,
     error,
@@ -46,7 +47,7 @@ const FormField = _ref => {
       warning: !!warning,
       info: !!info
     };
-    if (!disabled) return undefined;
+    if (!(disabled && !loading)) 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;

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

@@ -235,6 +235,7 @@ Checkbox.propTypes = {
   "labelWidth": PropTypes.number,
   "lang": PropTypes.string,
   "list": PropTypes.string,
+  "loading": PropTypes.bool,
   "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@toStringTag": PropTypes.string.isRequired,
     "description": PropTypes.string,

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

@@ -240,6 +240,7 @@ RadioButton.propTypes = {
   "labelWidth": PropTypes.number,
   "lang": PropTypes.string,
   "list": PropTypes.string,
+  "loading": PropTypes.bool,
   "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@toStringTag": PropTypes.string.isRequired,
     "description": PropTypes.string,

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

@@ -1,5 +1,11 @@
 import React from "react";
-export interface OptionProps extends Omit<React.InputHTMLAttributes<HTMLLIElement>, "value" | "onSelect" | "onClick"> {
+import { TagProps } from "__internal__/utils/helpers/tags";
+export interface OptionProps extends Omit<React.InputHTMLAttributes<HTMLLIElement>, "value" | "onSelect" | "onClick">, TagProps {
+    /**
+     * Unique identifier for the component.
+     * Will use a randomly generated GUID if none is provided.
+     */
+    id?: string;
     /** The option's visible text, displayed within <Textbox> of <Select>, and used for filtering */
     text: string;
     /** Optional: alternative rendered content, displayed within <SelectList> of <Select> (eg: an icon, an image, etc) */

package/esm/components/select/option/option.component.js

@@ -116,6 +116,9 @@ Option.propTypes = {
   "dangerouslySetInnerHTML": PropTypes.shape({
     "__html": PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired
   }),
+  "data-component": PropTypes.string,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
   "datatype": PropTypes.string,
   "defaultChecked": PropTypes.bool,
   "defaultValue": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.number, PropTypes.string]),

package/esm/components/select/option-group-header/option-group-header.component.d.ts

@@ -1,7 +1,13 @@
 import React from "react";
 import { CSSProperties } from "styled-components";
+import { TagProps } from "__internal__/utils/helpers/tags";
 import { IconProps } from "../../icon";
-export interface OptionGroupHeaderProps {
+export interface OptionGroupHeaderProps extends TagProps {
+    /**
+     * Unique identifier for the component.
+     * Will use a randomly generated GUID if none is provided.
+     */
+    id?: string;
     /** Heading text */
     label: string;
     /** Any valid Carbon icon name */

package/esm/components/select/option-group-header/option-group-header.component.js

@@ -19,7 +19,11 @@ const OptionGroupHeader = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   }), /*#__PURE__*/React.createElement("h4", null, label));
 });
 OptionGroupHeader.propTypes = {
+  "data-component": PropTypes.string,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
   "icon": PropTypes.oneOf(["accessibility_web", "add", "admin", "alert_on", "alert", "analysis", "app_facebook", "app_instagram", "app_tiktok", "app_twitter", "app_youtube", "apps", "arrow_bottom_right_circle", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_top_left_circle", "arrow_up", "arrow", "arrows_left_right", "attach", "bank_with_card", "bank", "basket_with_squares", "basket", "bed", "bill_paid", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "box_arrow_left", "box_arrow_right", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_pay_date", "calendar_today", "calendar", "call", "camera", "car_lock", "car_money", "car_repair", "card_view", "card_wallet", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "cash", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "check_all", "check_none", "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_off", "connect", "construction", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "drill", "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", "form_refresh", "gift", "go", "graduation_hat", "graph", "grid", "hand_cash_coins", "hand_cash_note", "heart_pulse", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "intranet", "italic", "job_seeked", "key", "laptop", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "like", "link_cloud", "link_on", "link", "list_view", "location", "locked", "logout", "lookup", "maintenance", "marker", "message", "messages", "microphone", "minus_large", "minus", "mobile", "money_bag", "new", "none", "old_warning", "palm_tree", "pause_circle", "pause", "pdf", "people_switch", "people", "percentage_boxed", "person_info", "person_tick", "person", "petrol_pump", "phone", "piggy_bank", "plane", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "protect", "question_hollow", "question_mark", "question", "recruiting", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "send", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "success", "support_online", "sync", "tag", "talk", "target_man", "target", "theatre_masks", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "volunteering", "warning", "website", "welfare"]),
+  "id": PropTypes.string,
   "label": PropTypes.string.isRequired,
   "style": PropTypes.object
 };

package/esm/components/select/option-row/option-row.component.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { CSSProperties } from "styled-components";
-export interface OptionRowProps {
+import { TagProps } from "__internal__/utils/helpers/tags";
+export interface OptionRowProps extends TagProps {
     /** The option's visible text, displayed within <Textbox> of <Select> */
     text: string;
     /** Row content, should consist of multiple td elements */
@@ -8,17 +9,16 @@ export interface OptionRowProps {
     /** The option's invisible internal value */
     value: string | Record<string, unknown>;
     /**
-     * @private
-     * @ignore
-     * Component id (prop added by the SelectList component)
+     * Unique identifier for the component.
+     * Will use a randomly generated GUID if none is provided.
      */
-    id: string;
+    id?: string;
     /**
      * @private
      * @ignore
      * Callback to return value when the element is selected (prop added by the SelectList component) */
     onSelect?: (ev: {
-        id: string;
+        id?: string;
         text: string;
         value: string | Record<string, unknown>;
     }) => void;

package/esm/components/select/option-row/option-row.component.js

@@ -41,8 +41,11 @@ const OptionRow = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 });
 OptionRow.propTypes = {
   "children": PropTypes.node,
+  "data-component": PropTypes.string,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
   "hidden": PropTypes.bool,
-  "id": PropTypes.string.isRequired,
+  "id": PropTypes.string,
   "index": PropTypes.number,
   "onSelect": PropTypes.func,
   "style": PropTypes.object,

package/esm/components/select/select-list/select-list.component.js

@@ -102,7 +102,7 @@ const SelectList = /*#__PURE__*/React.forwardRef((_ref, listContainerRef) => {
   // childIds should be stable except when children are added or removed - can't use useMemo
   // as that isn't absolutely guaranteed to never rerun when dependencies haven't changed.
   const setChildIds = () => {
-    childIdsRef.current = React.Children.map(children, () => guid()) || /* istanbul ignore next */null;
+    childIdsRef.current = React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && child?.props.id || guid()) || /* istanbul ignore next */null;
   };
   if (childIdsRef.current?.length !== React.Children.count(children)) {
     setChildIds();

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

@@ -99,6 +99,7 @@ const Switch = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     warning,
     info,
     disabled: disabled || loading,
+    loading,
     checked: isControlled ? checked : checkedInternal,
     label,
     labelHelp,
@@ -143,6 +144,7 @@ const Switch = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     error,
     warning,
     disabled: disabled || loading,
+    loading,
     checked: isControlled ? checked : checkedInternal,
     onBlur,
     onFocus,

package/lib/__internal__/checkable-input/checkable-input.component.d.ts

@@ -4,6 +4,8 @@ import { ValidationProps } from "../validations";
 export interface CommonCheckableInputProps extends ValidationProps, CommonHiddenCheckableInputProps {
     /** If true, the component will be disabled */
     disabled?: boolean;
+    /** @private @ignore */
+    loading?: boolean;
     /** Help content to be displayed under an input */
     fieldHelp?: React.ReactNode;
     /**

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

@@ -23,6 +23,7 @@ const CheckableInput = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     checked,
     children,
     disabled,
+    loading,
     error,
     fieldHelp,
     fieldHelpInline,
@@ -66,6 +67,7 @@ const CheckableInput = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const isRadio = type === "radio";
   const formFieldProps = {
     disabled,
+    loading,
     error,
     fieldHelp,
     fieldHelpInline,
@@ -226,6 +228,7 @@ CheckableInput.propTypes = {
   "labelWidth": _propTypes.default.number,
   "lang": _propTypes.default.string,
   "list": _propTypes.default.string,
+  "loading": _propTypes.default.bool,
   "max": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   "maxLength": _propTypes.default.number,
   "min": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),

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

@@ -7,6 +7,8 @@ import { IconType } from "../../components/icon";
 interface CommonFormFieldProps extends MarginProps, ValidationProps {
     /** If true, the component will be disabled */
     disabled?: boolean;
+    /** @private @ignore */
+    loading?: boolean;
     /** Help content to be displayed under an input */
     fieldHelp?: React.ReactNode;
     /** The unique id of the Help component tooltip, used for accessibility */
@@ -59,7 +61,7 @@ export interface FormFieldProps extends CommonFormFieldProps, TagProps {
     useValidationIcon?: boolean;
 }
 declare const FormField: {
-    ({ children, "data-component": dataComponent, disabled, fieldHelp: fieldHelpContent, fieldHelpInline, error, warning, info, tooltipId, fieldHelpId, label, labelId, labelAlign, labelHelp, labelHelpIcon, labelInline, labelSpacing, labelWidth, labelAs, id, reverse, isOptional, useValidationIcon, adaptiveLabelBreakpoint, isRequired, validationIconId, validationRedesignOptIn, ...rest }: FormFieldProps): React.JSX.Element;
+    ({ children, "data-component": dataComponent, disabled, loading, fieldHelp: fieldHelpContent, fieldHelpInline, error, warning, info, tooltipId, fieldHelpId, label, labelId, labelAlign, labelHelp, labelHelpIcon, labelInline, labelSpacing, labelWidth, labelAs, id, reverse, isOptional, useValidationIcon, adaptiveLabelBreakpoint, isRequired, validationIconId, validationRedesignOptIn, ...rest }: FormFieldProps): React.JSX.Element;
     displayName: string;
 };
 export default FormField;

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

@@ -23,6 +23,7 @@ const FormField = _ref => {
     children,
     "data-component": dataComponent,
     disabled,
+    loading,
     fieldHelp: fieldHelpContent,
     fieldHelpInline,
     error,
@@ -55,7 +56,7 @@ const FormField = _ref => {
       warning: !!warning,
       info: !!info
     };
-    if (!disabled) return undefined;
+    if (!(disabled && !loading)) return undefined;
     return Object.keys(validationProps).find(propName => validationProps[propName]);
   }, [error, warning, info, disabled]);
   !(invalidValidationProp === undefined) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, `Prop \`${invalidValidationProp}\` cannot be used in conjunction with \`disabled\`. ` + "Use `readOnly` if you require users to see validations with a non-interactive field") : (0, _invariant.default)(false) : void 0;

package/lib/components/checkbox/checkbox.component.js

@@ -245,6 +245,7 @@ Checkbox.propTypes = {
   "labelWidth": _propTypes.default.number,
   "lang": _propTypes.default.string,
   "list": _propTypes.default.string,
+  "loading": _propTypes.default.bool,
   "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
     "__@toStringTag": _propTypes.default.string.isRequired,
     "description": _propTypes.default.string,

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

@@ -250,6 +250,7 @@ RadioButton.propTypes = {
   "labelWidth": _propTypes.default.number,
   "lang": _propTypes.default.string,
   "list": _propTypes.default.string,
+  "loading": _propTypes.default.bool,
   "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
     "__@toStringTag": _propTypes.default.string.isRequired,
     "description": _propTypes.default.string,

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

@@ -1,5 +1,11 @@
 import React from "react";
-export interface OptionProps extends Omit<React.InputHTMLAttributes<HTMLLIElement>, "value" | "onSelect" | "onClick"> {
+import { TagProps } from "__internal__/utils/helpers/tags";
+export interface OptionProps extends Omit<React.InputHTMLAttributes<HTMLLIElement>, "value" | "onSelect" | "onClick">, TagProps {
+    /**
+     * Unique identifier for the component.
+     * Will use a randomly generated GUID if none is provided.
+     */
+    id?: string;
     /** The option's visible text, displayed within <Textbox> of <Select>, and used for filtering */
     text: string;
     /** Optional: alternative rendered content, displayed within <SelectList> of <Select> (eg: an icon, an image, etc) */

package/lib/components/select/option/option.component.js

@@ -125,6 +125,9 @@ Option.propTypes = {
   "dangerouslySetInnerHTML": _propTypes.default.shape({
     "__html": _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]).isRequired
   }),
+  "data-component": _propTypes.default.string,
+  "data-element": _propTypes.default.string,
+  "data-role": _propTypes.default.string,
   "datatype": _propTypes.default.string,
   "defaultChecked": _propTypes.default.bool,
   "defaultValue": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.number, _propTypes.default.string]),

package/lib/components/select/option-group-header/option-group-header.component.d.ts

@@ -1,7 +1,13 @@
 import React from "react";
 import { CSSProperties } from "styled-components";
+import { TagProps } from "__internal__/utils/helpers/tags";
 import { IconProps } from "../../icon";
-export interface OptionGroupHeaderProps {
+export interface OptionGroupHeaderProps extends TagProps {
+    /**
+     * Unique identifier for the component.
+     * Will use a randomly generated GUID if none is provided.
+     */
+    id?: string;
     /** Heading text */
     label: string;
     /** Any valid Carbon icon name */

package/lib/components/select/option-group-header/option-group-header.component.js

@@ -26,7 +26,11 @@ const OptionGroupHeader = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
   }), /*#__PURE__*/_react.default.createElement("h4", null, label));
 });
 OptionGroupHeader.propTypes = {
+  "data-component": _propTypes.default.string,
+  "data-element": _propTypes.default.string,
+  "data-role": _propTypes.default.string,
   "icon": _propTypes.default.oneOf(["accessibility_web", "add", "admin", "alert_on", "alert", "analysis", "app_facebook", "app_instagram", "app_tiktok", "app_twitter", "app_youtube", "apps", "arrow_bottom_right_circle", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_top_left_circle", "arrow_up", "arrow", "arrows_left_right", "attach", "bank_with_card", "bank", "basket_with_squares", "basket", "bed", "bill_paid", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "box_arrow_left", "box_arrow_right", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_pay_date", "calendar_today", "calendar", "call", "camera", "car_lock", "car_money", "car_repair", "card_view", "card_wallet", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "cash", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "check_all", "check_none", "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_off", "connect", "construction", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "drill", "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", "form_refresh", "gift", "go", "graduation_hat", "graph", "grid", "hand_cash_coins", "hand_cash_note", "heart_pulse", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "intranet", "italic", "job_seeked", "key", "laptop", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "like", "link_cloud", "link_on", "link", "list_view", "location", "locked", "logout", "lookup", "maintenance", "marker", "message", "messages", "microphone", "minus_large", "minus", "mobile", "money_bag", "new", "none", "old_warning", "palm_tree", "pause_circle", "pause", "pdf", "people_switch", "people", "percentage_boxed", "person_info", "person_tick", "person", "petrol_pump", "phone", "piggy_bank", "plane", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "protect", "question_hollow", "question_mark", "question", "recruiting", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "send", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "success", "support_online", "sync", "tag", "talk", "target_man", "target", "theatre_masks", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "volunteering", "warning", "website", "welfare"]),
+  "id": _propTypes.default.string,
   "label": _propTypes.default.string.isRequired,
   "style": _propTypes.default.object
 };

package/lib/components/select/option-row/option-row.component.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { CSSProperties } from "styled-components";
-export interface OptionRowProps {
+import { TagProps } from "__internal__/utils/helpers/tags";
+export interface OptionRowProps extends TagProps {
     /** The option's visible text, displayed within <Textbox> of <Select> */
     text: string;
     /** Row content, should consist of multiple td elements */
@@ -8,17 +9,16 @@ export interface OptionRowProps {
     /** The option's invisible internal value */
     value: string | Record<string, unknown>;
     /**
-     * @private
-     * @ignore
-     * Component id (prop added by the SelectList component)
+     * Unique identifier for the component.
+     * Will use a randomly generated GUID if none is provided.
      */
-    id: string;
+    id?: string;
     /**
      * @private
      * @ignore
      * Callback to return value when the element is selected (prop added by the SelectList component) */
     onSelect?: (ev: {
-        id: string;
+        id?: string;
         text: string;
         value: string | Record<string, unknown>;
     }) => void;

package/lib/components/select/option-row/option-row.component.js

@@ -50,8 +50,11 @@ const OptionRow = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 });
 OptionRow.propTypes = {
   "children": _propTypes.default.node,
+  "data-component": _propTypes.default.string,
+  "data-element": _propTypes.default.string,
+  "data-role": _propTypes.default.string,
   "hidden": _propTypes.default.bool,
-  "id": _propTypes.default.string.isRequired,
+  "id": _propTypes.default.string,
   "index": _propTypes.default.number,
   "onSelect": _propTypes.default.func,
   "style": _propTypes.default.object,

package/lib/components/select/select-list/select-list.component.js

@@ -111,7 +111,7 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef((_ref, listContainerRe
   // childIds should be stable except when children are added or removed - can't use useMemo
   // as that isn't absolutely guaranteed to never rerun when dependencies haven't changed.
   const setChildIds = () => {
-    childIdsRef.current = _react.default.Children.map(children, () => (0, _guid.default)()) || /* istanbul ignore next */null;
+    childIdsRef.current = _react.default.Children.map(children, child => /*#__PURE__*/_react.default.isValidElement(child) && child?.props.id || (0, _guid.default)()) || /* istanbul ignore next */null;
   };
   if (childIdsRef.current?.length !== _react.default.Children.count(children)) {
     setChildIds();

package/lib/components/switch/switch.component.js

@@ -108,6 +108,7 @@ const Switch = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     warning,
     info,
     disabled: disabled || loading,
+    loading,
     checked: isControlled ? checked : checkedInternal,
     label,
     labelHelp,
@@ -152,6 +153,7 @@ const Switch = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     error,
     warning,
     disabled: disabled || loading,
+    loading,
     checked: isControlled ? checked : checkedInternal,
     onBlur,
     onFocus,

package/package.json

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