carbon-react 143.0.0 → 143.0.2

package/esm/components/action-popover/action-popover-menu/action-popover-menu.component.d.ts

@@ -3,13 +3,21 @@ import { Alignment } from "../__internal__/action-popover.context";
 export interface ActionPopoverMenuBaseProps {
     /** Children for the menu */
     children?: React.ReactNode;
-    /** Index to control which item is focused */
+    /**
+     * @ignore
+     * @private
+     * @internal
+     * Index to control which item is focused */
     focusIndex?: number;
     /** Flag to indicate whether a menu should open */
     isOpen?: boolean;
     /** A unique ID for the menu */
     menuID?: string;
-    /** Callback to set the index of the focused item */
+    /**
+     * @ignore
+     * @private
+     * @internal
+     * Callback to set the index of the focused item */
     setFocusIndex?: (args: number) => void;
     /** Callback to set the isOpen flag */
     setOpen?: (args: boolean) => void;

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

@@ -154,7 +154,9 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
   const childElementRefs = useRef(Array.from({
     length: React.Children.count(children)
   }));
-  const optionChildrenList = useMemo(() => childrenList.filter(child => /*#__PURE__*/React.isValidElement(child) && (child.type === Option || child.type === OptionRow)), [childrenList]);
+  const optionChildrenList = useMemo(() => childrenList.filter(child => {
+    return /*#__PURE__*/React.isValidElement(child) && (child.type === Option || child.type === OptionRow);
+  }), [childrenList]);
   const {
     measureElement
   } = virtualizer;

package/esm/components/select/__internal__/utils/with-filter.hoc.js

@@ -106,7 +106,9 @@ const withFilter = WrappedComponent => {
               colSpan: colSpan
             }, noResultsMessage || noResultsText));
           }
-          return /*#__PURE__*/React.createElement(StyledOption, null, noResultsMessage || noResultsText);
+          return /*#__PURE__*/React.createElement(StyledOption, {
+            isInteractive: true
+          }, noResultsMessage || noResultsText);
         }
         return addHighlightedContent(filteredElements, filterText);
       }

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

@@ -1,17 +1,17 @@
 import React from "react";
 import { TagProps } from "../../../__internal__/utils/helpers/tags";
-export interface OptionProps extends Omit<React.InputHTMLAttributes<HTMLLIElement>, "value" | "onSelect" | "onClick">, TagProps {
+export interface OptionProps extends Omit<React.InputHTMLAttributes<HTMLLIElement>, "value" | "onSelect" | "onClick">, Omit<TagProps, "data-component"> {
     /**
      * 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) */
+    text?: string;
+    /** Alternative rendered content, displayed within `<SelectList>` of `<Select>` (eg: an icon, an image, etc) */
     children?: React.ReactNode;
-    /** The option's invisible internal value */
-    value: string | Record<string, unknown>;
+    /** The option's invisible internal value, if this is not passed the option will not be treated as interactive or selectable */
+    value?: string | Record<string, unknown>;
     /** MultiSelect only - custom Pill border color - provide any color from palette or any valid css color value. */
     borderColor?: string;
     /** MultiSelect only - fill Pill background with color */

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

@@ -20,11 +20,11 @@ const Option = /*#__PURE__*/React.forwardRef(({
   const selectListContext = useContext(SelectListContext);
   let isSelected = selectListContext.currentOptionsListIndex === index;
   const internalIdRef = useRef(id || guid());
-  if (selectListContext.multiselectValues) {
+  if (selectListContext.multiselectValues && value) {
     isSelected = selectListContext.multiselectValues.includes(value);
   }
   function handleClick() {
-    if (disabled) {
+    if (disabled || !value) {
       return;
     }
     if (!onClick) {
@@ -43,15 +43,16 @@ const Option = /*#__PURE__*/React.forwardRef(({
     ref: ref,
     "aria-selected": isSelected,
     "aria-disabled": disabled,
-    "data-component": "option",
     isDisabled: disabled,
     onClick: handleClick,
     isHighlighted: selectListContext.currentOptionsListIndex === index,
     role: "option",
     hidden: hidden,
-    style: style
+    style: style,
+    isInteractive: !!value
   }, rest, {
-    fill: undefined
+    fill: undefined,
+    "data-component": "option"
   }), children || text);
 });
 if (process.env.NODE_ENV !== "production") {
@@ -125,7 +126,6 @@ if (process.env.NODE_ENV !== "production") {
     "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,
@@ -395,7 +395,7 @@ if (process.env.NODE_ENV !== "production") {
     "suppressContentEditableWarning": PropTypes.bool,
     "suppressHydrationWarning": PropTypes.bool,
     "tabIndex": PropTypes.number,
-    "text": PropTypes.string.isRequired,
+    "text": PropTypes.string,
     "title": PropTypes.string,
     "translate": PropTypes.oneOf(["no", "yes"]),
     "type": PropTypes.oneOfType([PropTypes.oneOf(["button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "number", "password", "radio", "range", "reset", "search", "submit", "tel", "text", "time", "url", "week"]), PropTypes.shape({
@@ -451,7 +451,7 @@ if (process.env.NODE_ENV !== "production") {
     })]),
     "typeof": PropTypes.string,
     "unselectable": PropTypes.oneOf(["off", "on"]),
-    "value": PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired,
+    "value": PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
     "vocab": PropTypes.string,
     "width": PropTypes.oneOfType([PropTypes.number, PropTypes.string])
   };

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

@@ -2,6 +2,7 @@ import { OptionProps } from ".";
 interface StyledOptionProps extends Pick<OptionProps, "id"> {
     isHighlighted?: boolean;
     isDisabled?: boolean;
+    isInteractive: boolean;
 }
 declare const StyledOption: import("styled-components").StyledComponent<"li", any, StyledOptionProps, never>;
 export default StyledOption;

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

@@ -1,6 +1,5 @@
 import styled, { css } from "styled-components";
 const StyledOption = styled.li`
-  cursor: pointer;
   box-sizing: border-box;
   line-height: 16px;
   padding: 12px 16px;
@@ -12,19 +11,22 @@ const StyledOption = styled.li`
   width: 100%;
 
   ${({
+  isInteractive,
   isHighlighted
-}) => isHighlighted && css`
-      background-color: var(--colorsUtilityMajor200);
+}) => isInteractive && css`
+      cursor: pointer;
+      :hover {
+        background-color: var(--colorsUtilityMajor100);
+      }
+      ${isHighlighted && css`
+        background-color: var(--colorsUtilityMajor200);
+      `}
     `}
 
   ${({
   hidden
 }) => hidden && "display: none;"}
 
-  :hover {
-    background-color: var(--colorsUtilityMajor100);
-  }
-
   ${({
   isDisabled
 }) => isDisabled && css`

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

@@ -2,7 +2,7 @@ import React from "react";
 import { CSSProperties } from "styled-components";
 import { TagProps } from "__internal__/utils/helpers/tags";
 import { IconProps } from "../../icon";
-export interface OptionGroupHeaderProps extends TagProps {
+export interface OptionGroupHeaderProps extends Omit<TagProps, "data-component"> {
     /**
      * Unique identifier for the component.
      * Will use a randomly generated GUID if none is provided.

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

@@ -21,7 +21,8 @@ const OptionGroupHeader = /*#__PURE__*/React.forwardRef(({
     style: style,
     id: internalIdRef.current
   }, rest, {
-    ref: ref
+    ref: ref,
+    "data-component": "option-group-header"
   }), children || /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement(Icon, {
     type: icon
   }), /*#__PURE__*/React.createElement("h4", null, label)));
@@ -29,7 +30,6 @@ const OptionGroupHeader = /*#__PURE__*/React.forwardRef(({
 if (process.env.NODE_ENV !== "production") {
   OptionGroupHeader.propTypes = {
     "children": PropTypes.node,
-    "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", "bill_unpaid", "bin", "biometric", "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", "cloud_co2", "coins", "collaborate", "computer_clock", "connect_off", "connect", "construction", "contact_card", "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", "export", "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", "import", "in_progress", "in_transit", "individual", "info", "intranet", "italic", "job_seeked", "key", "laptop", "leaf", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "like_no", "like", "link_cloud", "link_on", "link", "list_view", "location", "locked", "logout", "lookup", "maintenance", "marker", "message", "messages", "microphone", "minimise", "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", "pin", "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"]),

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { CSSProperties } from "styled-components";
 import { TagProps } from "__internal__/utils/helpers/tags";
-export interface OptionRowProps extends TagProps {
+export interface OptionRowProps extends Omit<TagProps, "data-component"> {
     /** The option's visible text, displayed within <Textbox> of <Select> */
     text: string;
     /** Row content, should consist of multiple td elements */

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

@@ -37,19 +37,19 @@ const OptionRow = /*#__PURE__*/React.forwardRef(({
     ref: ref,
     "aria-selected": isSelected,
     "aria-disabled": disabled,
-    "data-component": "option-row",
     isDisabled: disabled,
     onClick: handleClick,
     isHighlighted: selectListContext.currentOptionsListIndex === index,
     role: "option",
     hidden: hidden,
     style: style
-  }, rest), children);
+  }, rest, {
+    "data-component": "option-row"
+  }), children);
 });
 if (process.env.NODE_ENV !== "production") {
   OptionRow.propTypes = {
     "children": PropTypes.node,
-    "data-component": PropTypes.string,
     "data-element": PropTypes.string,
     "data-role": PropTypes.string,
     "disabled": PropTypes.bool,

package/lib/components/action-popover/action-popover-menu/action-popover-menu.component.d.ts

@@ -3,13 +3,21 @@ import { Alignment } from "../__internal__/action-popover.context";
 export interface ActionPopoverMenuBaseProps {
     /** Children for the menu */
     children?: React.ReactNode;
-    /** Index to control which item is focused */
+    /**
+     * @ignore
+     * @private
+     * @internal
+     * Index to control which item is focused */
     focusIndex?: number;
     /** Flag to indicate whether a menu should open */
     isOpen?: boolean;
     /** A unique ID for the menu */
     menuID?: string;
-    /** Callback to set the index of the focused item */
+    /**
+     * @ignore
+     * @private
+     * @internal
+     * Callback to set the index of the focused item */
     setFocusIndex?: (args: number) => void;
     /** Callback to set the isOpen flag */
     setOpen?: (args: boolean) => void;

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

@@ -163,7 +163,9 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
   const childElementRefs = (0, _react.useRef)(Array.from({
     length: _react.default.Children.count(children)
   }));
-  const optionChildrenList = (0, _react.useMemo)(() => childrenList.filter(child => /*#__PURE__*/_react.default.isValidElement(child) && (child.type === _option.default || child.type === _optionRow.default)), [childrenList]);
+  const optionChildrenList = (0, _react.useMemo)(() => childrenList.filter(child => {
+    return /*#__PURE__*/_react.default.isValidElement(child) && (child.type === _option.default || child.type === _optionRow.default);
+  }), [childrenList]);
   const {
     measureElement
   } = virtualizer;

package/lib/components/select/__internal__/utils/with-filter.hoc.js

@@ -115,7 +115,9 @@ const withFilter = WrappedComponent => {
               colSpan: colSpan
             }, noResultsMessage || noResultsText));
           }
-          return /*#__PURE__*/_react.default.createElement(_option.default, null, noResultsMessage || noResultsText);
+          return /*#__PURE__*/_react.default.createElement(_option.default, {
+            isInteractive: true
+          }, noResultsMessage || noResultsText);
         }
         return addHighlightedContent(filteredElements, filterText);
       }

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

@@ -1,17 +1,17 @@
 import React from "react";
 import { TagProps } from "../../../__internal__/utils/helpers/tags";
-export interface OptionProps extends Omit<React.InputHTMLAttributes<HTMLLIElement>, "value" | "onSelect" | "onClick">, TagProps {
+export interface OptionProps extends Omit<React.InputHTMLAttributes<HTMLLIElement>, "value" | "onSelect" | "onClick">, Omit<TagProps, "data-component"> {
     /**
      * 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) */
+    text?: string;
+    /** Alternative rendered content, displayed within `<SelectList>` of `<Select>` (eg: an icon, an image, etc) */
     children?: React.ReactNode;
-    /** The option's invisible internal value */
-    value: string | Record<string, unknown>;
+    /** The option's invisible internal value, if this is not passed the option will not be treated as interactive or selectable */
+    value?: string | Record<string, unknown>;
     /** MultiSelect only - custom Pill border color - provide any color from palette or any valid css color value. */
     borderColor?: string;
     /** MultiSelect only - fill Pill background with color */

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

@@ -29,11 +29,11 @@ const Option = /*#__PURE__*/_react.default.forwardRef(({
   const selectListContext = (0, _react.useContext)(_selectList.default);
   let isSelected = selectListContext.currentOptionsListIndex === index;
   const internalIdRef = (0, _react.useRef)(id || (0, _guid.default)());
-  if (selectListContext.multiselectValues) {
+  if (selectListContext.multiselectValues && value) {
     isSelected = selectListContext.multiselectValues.includes(value);
   }
   function handleClick() {
-    if (disabled) {
+    if (disabled || !value) {
       return;
     }
     if (!onClick) {
@@ -52,15 +52,16 @@ const Option = /*#__PURE__*/_react.default.forwardRef(({
     ref: ref,
     "aria-selected": isSelected,
     "aria-disabled": disabled,
-    "data-component": "option",
     isDisabled: disabled,
     onClick: handleClick,
     isHighlighted: selectListContext.currentOptionsListIndex === index,
     role: "option",
     hidden: hidden,
-    style: style
+    style: style,
+    isInteractive: !!value
   }, rest, {
-    fill: undefined
+    fill: undefined,
+    "data-component": "option"
   }), children || text);
 });
 if (process.env.NODE_ENV !== "production") {
@@ -134,7 +135,6 @@ if (process.env.NODE_ENV !== "production") {
     "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,
@@ -404,7 +404,7 @@ if (process.env.NODE_ENV !== "production") {
     "suppressContentEditableWarning": _propTypes.default.bool,
     "suppressHydrationWarning": _propTypes.default.bool,
     "tabIndex": _propTypes.default.number,
-    "text": _propTypes.default.string.isRequired,
+    "text": _propTypes.default.string,
     "title": _propTypes.default.string,
     "translate": _propTypes.default.oneOf(["no", "yes"]),
     "type": _propTypes.default.oneOfType([_propTypes.default.oneOf(["button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "number", "password", "radio", "range", "reset", "search", "submit", "tel", "text", "time", "url", "week"]), _propTypes.default.shape({
@@ -460,7 +460,7 @@ if (process.env.NODE_ENV !== "production") {
     })]),
     "typeof": _propTypes.default.string,
     "unselectable": _propTypes.default.oneOf(["off", "on"]),
-    "value": _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]).isRequired,
+    "value": _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
     "vocab": _propTypes.default.string,
     "width": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
   };

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

@@ -2,6 +2,7 @@ import { OptionProps } from ".";
 interface StyledOptionProps extends Pick<OptionProps, "id"> {
     isHighlighted?: boolean;
     isDisabled?: boolean;
+    isInteractive: boolean;
 }
 declare const StyledOption: import("styled-components").StyledComponent<"li", any, StyledOptionProps, never>;
 export default StyledOption;

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

@@ -8,7 +8,6 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const StyledOption = _styledComponents.default.li`
-  cursor: pointer;
   box-sizing: border-box;
   line-height: 16px;
   padding: 12px 16px;
@@ -20,19 +19,22 @@ const StyledOption = _styledComponents.default.li`
   width: 100%;
 
   ${({
+  isInteractive,
   isHighlighted
-}) => isHighlighted && (0, _styledComponents.css)`
-      background-color: var(--colorsUtilityMajor200);
+}) => isInteractive && (0, _styledComponents.css)`
+      cursor: pointer;
+      :hover {
+        background-color: var(--colorsUtilityMajor100);
+      }
+      ${isHighlighted && (0, _styledComponents.css)`
+        background-color: var(--colorsUtilityMajor200);
+      `}
     `}
 
   ${({
   hidden
 }) => hidden && "display: none;"}
 
-  :hover {
-    background-color: var(--colorsUtilityMajor100);
-  }
-
   ${({
   isDisabled
 }) => isDisabled && (0, _styledComponents.css)`

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

@@ -2,7 +2,7 @@ import React from "react";
 import { CSSProperties } from "styled-components";
 import { TagProps } from "__internal__/utils/helpers/tags";
 import { IconProps } from "../../icon";
-export interface OptionGroupHeaderProps extends TagProps {
+export interface OptionGroupHeaderProps extends Omit<TagProps, "data-component"> {
     /**
      * Unique identifier for the component.
      * Will use a randomly generated GUID if none is provided.

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

@@ -30,7 +30,8 @@ const OptionGroupHeader = /*#__PURE__*/_react.default.forwardRef(({
     style: style,
     id: internalIdRef.current
   }, rest, {
-    ref: ref
+    ref: ref,
+    "data-component": "option-group-header"
   }), children || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, icon && /*#__PURE__*/_react.default.createElement(_icon.default, {
     type: icon
   }), /*#__PURE__*/_react.default.createElement("h4", null, label)));
@@ -38,7 +39,6 @@ const OptionGroupHeader = /*#__PURE__*/_react.default.forwardRef(({
 if (process.env.NODE_ENV !== "production") {
   OptionGroupHeader.propTypes = {
     "children": _propTypes.default.node,
-    "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", "bill_unpaid", "bin", "biometric", "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", "cloud_co2", "coins", "collaborate", "computer_clock", "connect_off", "connect", "construction", "contact_card", "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", "export", "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", "import", "in_progress", "in_transit", "individual", "info", "intranet", "italic", "job_seeked", "key", "laptop", "leaf", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "like_no", "like", "link_cloud", "link_on", "link", "list_view", "location", "locked", "logout", "lookup", "maintenance", "marker", "message", "messages", "microphone", "minimise", "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", "pin", "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"]),

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { CSSProperties } from "styled-components";
 import { TagProps } from "__internal__/utils/helpers/tags";
-export interface OptionRowProps extends TagProps {
+export interface OptionRowProps extends Omit<TagProps, "data-component"> {
     /** The option's visible text, displayed within <Textbox> of <Select> */
     text: string;
     /** Row content, should consist of multiple td elements */

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

@@ -46,19 +46,19 @@ const OptionRow = /*#__PURE__*/_react.default.forwardRef(({
     ref: ref,
     "aria-selected": isSelected,
     "aria-disabled": disabled,
-    "data-component": "option-row",
     isDisabled: disabled,
     onClick: handleClick,
     isHighlighted: selectListContext.currentOptionsListIndex === index,
     role: "option",
     hidden: hidden,
     style: style
-  }, rest), children);
+  }, rest, {
+    "data-component": "option-row"
+  }), children);
 });
 if (process.env.NODE_ENV !== "production") {
   OptionRow.propTypes = {
     "children": _propTypes.default.node,
-    "data-component": _propTypes.default.string,
     "data-element": _propTypes.default.string,
     "data-role": _propTypes.default.string,
     "disabled": _propTypes.default.bool,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "143.0.0",
+  "version": "143.0.2",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
@@ -184,7 +184,7 @@
     "@floating-ui/react-dom": "~1.3.0",
     "@octokit/rest": "^18.12.0",
     "@styled-system/prop-types": "^5.1.5",
-    "@tanstack/react-virtual": "^3.0.0-beta.68",
+    "@tanstack/react-virtual": "^3.10.8",
     "@types/styled-system": "^5.1.22",
     "chalk": "^4.1.2",
     "ci-info": "^3.8.0",