carbon-react 119.7.2 → 119.8.0

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/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/package.json

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