carbon-react 142.13.5 → 143.0.1

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/lib/components/select/simple-select/simple-select.component.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import { Side } from "@floating-ui/dom";
 import { FormInputPropTypes } from "../__internal__/select-textbox";
+import { ListPlacement } from "../__internal__/select-list/select-list.component";
 export interface OptionData {
     text?: string;
     value?: string | Record<string, unknown>;
@@ -51,7 +51,7 @@ export interface SimpleSelectProps extends Omit<FormInputPropTypes, "defaultValu
     /** Maximum list height - defaults to 180 */
     listMaxHeight?: number;
     /** Placement of the select list in relation to the input element */
-    listPlacement?: Side;
+    listPlacement?: ListPlacement;
     /** Use the opposite list placement if the set placement does not fit */
     flipEnabled?: boolean;
     /** Set this prop to enable a virtualised list of options. If it is not used then all options will be in the
@@ -67,6 +67,8 @@ export interface SimpleSelectProps extends Omit<FormInputPropTypes, "defaultValu
     isRequired?: boolean;
     /** Specify a callback triggered on change */
     onChange?: (ev: CustomSelectChangeEvent | React.ChangeEvent<HTMLInputElement>) => void;
+    /** Override the default width of the list element. Number passed is converted into pixel value */
+    listWidth?: number;
 }
 export declare const SimpleSelect: React.ForwardRefExoticComponent<SimpleSelectProps & React.RefAttributes<HTMLInputElement>>;
 export default SimpleSelect;

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

@@ -57,12 +57,13 @@ const SimpleSelect = exports.SimpleSelect = /*#__PURE__*/_react.default.forwardR
   virtualScrollOverscan,
   isOptional,
   required,
+  listWidth,
   ...props
 }, ref) => {
   const selectListId = (0, _react.useRef)((0, _guid.default)());
   const containerRef = (0, _react.useRef)(null);
   const listboxRef = (0, _react.useRef)(null);
-  const filterTimer = (0, _react.useRef)();
+  const filterTimer = (0, _react.useRef)(undefined);
   const isMouseDownReported = (0, _react.useRef)();
   const isControlled = (0, _react.useRef)(value !== undefined);
   const isTimerCounting = (0, _react.useRef)();
@@ -80,7 +81,7 @@ const SimpleSelect = exports.SimpleSelect = /*#__PURE__*/_react.default.forwardR
     id: inputId.current,
     label
   });
-  const focusTimer = (0, _react.useRef)(null);
+  const focusTimer = (0, _react.useRef)(undefined);
   const componentIsUncontrolled = !isControlled || !onChange && defaultValue;
   if (!deprecateUncontrolledWarnTriggered && componentIsUncontrolled) {
     deprecateUncontrolledWarnTriggered = true;
@@ -109,9 +110,7 @@ const SimpleSelect = exports.SimpleSelect = /*#__PURE__*/_react.default.forwardR
       if (!match) {
         return previousValue;
       }
-      if (onChange) {
-        onChange(createCustomEvent(match.props.value));
-      }
+      onChange?.(createCustomEvent(match.props.value));
       if (isControlled.current) {
         return previousValue;
       }
@@ -124,14 +123,14 @@ const SimpleSelect = exports.SimpleSelect = /*#__PURE__*/_react.default.forwardR
       const newVal = filterText.current + newCharacter;
       filterText.current = newVal;
       selectValueStartingWithText(newVal);
-      clearTimeout(filterTimer.current);
+      window.clearTimeout(filterTimer.current);
     } else {
       filterText.current = newCharacter;
       selectValueStartingWithText(newCharacter);
     }
     isTimerCounting.current = true;
-    clearTimeout(filterTimer.current);
-    filterTimer.current = setTimeout(() => {
+    window.clearTimeout(filterTimer.current);
+    filterTimer.current = window.setTimeout(() => {
       isTimerCounting.current = false;
       filterText.current = "";
     }, 500);
@@ -140,18 +139,12 @@ const SimpleSelect = exports.SimpleSelect = /*#__PURE__*/_react.default.forwardR
     const {
       key
     } = event;
-    if (onKeyDown) {
-      onKeyDown(event);
-    }
-    if (readOnly) {
-      return;
-    }
+    onKeyDown?.(event);
+    if (readOnly) return;
     if (key === " " || (0, _isNavigationKey.default)(key)) {
       event.preventDefault();
       setOpenState(isAlreadyOpen => {
-        if (!isAlreadyOpen && onOpen) {
-          onOpen();
-        }
+        if (!isAlreadyOpen) onOpen?.();
         return true;
       });
     } else if (key.length === 1 && !event.metaKey && !event.ctrlKey) {
@@ -193,21 +186,18 @@ const SimpleSelect = exports.SimpleSelect = /*#__PURE__*/_react.default.forwardR
   }, [handleGlobalClick]);
   (0, _react.useEffect)(() => {
     return function cleanup() {
-      clearTimeout(filterTimer.current);
+      window.clearTimeout(filterTimer.current);
+      window.clearTimeout(focusTimer.current);
     };
   }, []);
   function handleTextboxClick(event) {
     isMouseDownReported.current = false;
-    if (onClick) {
-      onClick(event);
-    }
+    onClick?.(event);
     setOpenState(isAlreadyOpen => {
       if (isAlreadyOpen) {
         return false;
       }
-      if (onOpen) {
-        onOpen();
-      }
+      onOpen?.();
       return true;
     });
   }
@@ -221,9 +211,7 @@ const SimpleSelect = exports.SimpleSelect = /*#__PURE__*/_react.default.forwardR
     if (isMouseDownReported.current) {
       return;
     }
-    if (onBlur) {
-      onBlur(event);
-    }
+    onBlur?.(event);
   }
   function handleTextboxMouseDown() {
     isMouseDownReported.current = true;
@@ -232,28 +220,22 @@ const SimpleSelect = exports.SimpleSelect = /*#__PURE__*/_react.default.forwardR
     if (isClickTriggeredBySelect.current) {
       return;
     }
-    if (onFocus) {
-      onFocus(event);
-    }
+    onFocus?.(event);
     if (isMouseDownReported.current) {
       isMouseDownReported.current = false;
       return;
     }
     if (openOnFocus) {
-      if (focusTimer.current) {
-        clearTimeout(focusTimer.current);
-      }
+      window.clearTimeout(focusTimer.current);
 
       // we need to use a timeout here as there is a race condition when rendered in a modal
       // whereby the select list isn't visible when the select is auto focused straight away
-      focusTimer.current = setTimeout(() => {
+      focusTimer.current = window.setTimeout(() => {
         setOpenState(isAlreadyOpen => {
           if (isAlreadyOpen) {
             return true;
           }
-          if (onOpen) {
-            onOpen();
-          }
+          onOpen?.();
           return true;
         });
       });
@@ -264,9 +246,7 @@ const SimpleSelect = exports.SimpleSelect = /*#__PURE__*/_react.default.forwardR
       setSelectedValue(newValue);
       setTextValue(text);
     }
-    if (onChange) {
-      onChange(createCustomEvent(newValue, selectionConfirmed));
-    }
+    onChange?.(createCustomEvent(newValue, selectionConfirmed));
   }
   function onSelectOption(optionData) {
     const {
@@ -323,6 +303,17 @@ const SimpleSelect = exports.SimpleSelect = /*#__PURE__*/_react.default.forwardR
       ...(0, _utils.filterOutStyledSystemSpacingProps)(props)
     };
   }
+  let placement;
+  switch (listPlacement) {
+    case "top":
+      placement = "top-end";
+      break;
+    case "bottom":
+      placement = "bottom-end";
+      break;
+    default:
+      placement = listPlacement;
+  }
   const selectList = /*#__PURE__*/_react.default.createElement(_selectList.default, {
     ref: listboxRef,
     id: selectListId.current,
@@ -337,11 +328,12 @@ const SimpleSelect = exports.SimpleSelect = /*#__PURE__*/_react.default.forwardR
     onListScrollBottom: onListScrollBottom,
     tableHeader: tableHeader,
     multiColumn: multiColumn,
-    listPlacement: listPlacement,
+    listPlacement: listWidth !== undefined ? placement : listPlacement,
     flipEnabled: flipEnabled,
     isOpen: isOpen,
     enableVirtualScroll: enableVirtualScroll,
-    virtualScrollOverscan: virtualScrollOverscan
+    virtualScrollOverscan: virtualScrollOverscan,
+    listWidth: listWidth
   }, children);
   const marginProps = (0, _useFormSpacing.default)(props);
   return /*#__PURE__*/_react.default.createElement(_select.default, _extends({
@@ -495,7 +487,8 @@ if (process.env.NODE_ENV !== "production") {
     "leftChildren": _propTypes.default.node,
     "list": _propTypes.default.string,
     "listMaxHeight": _propTypes.default.number,
-    "listPlacement": _propTypes.default.oneOf(["bottom", "left", "right", "top"]),
+    "listPlacement": _propTypes.default.oneOf(["bottom-end", "bottom-start", "bottom", "top-end", "top-start", "top"]),
+    "listWidth": _propTypes.default.number,
     "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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "142.13.5",
+  "version": "143.0.1",
   "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",