carbon-react 142.4.0 → 142.4.1

package/esm/components/menu/__internal__/submenu/submenu.style.js

@@ -54,7 +54,6 @@ const StyledSubmenu = styled.ul`
       min-width: 100%;
 
       ${submenuMaxWidth && css`
-        min-width: ${submenuMaxWidth};
         max-width: ${submenuMaxWidth};
 
         &&& {

package/esm/components/pager/pager.style.js

@@ -3,7 +3,7 @@ import StyledInput from "../../__internal__/input/input.style";
 import StyledInputPresentation from "../../__internal__/input/input-presentation.style";
 import StyledFormField from "../../__internal__/form-field/form-field.style";
 import InputIconToggleStyle from "../../__internal__/input-icon-toggle/input-icon-toggle.style";
-import { StyledSelectText } from "../select/__internal__/select-text/select-text.style";
+import { StyledSelectText } from "../select/__internal__/select-textbox/select-textbox.style";
 import Link from "../link";
 const StyledSelectContainer = styled.div`
   height: 26px;

package/esm/components/select/__internal__/select-list/select-list.component.d.ts

@@ -37,8 +37,6 @@ export interface SelectListProps {
     tableHeader?: React.ReactNode;
     /** When true component will work in multi column mode, children should consist of OptionRow components in this mode */
     multiColumn?: boolean;
-    /** Data role for loader component */
-    loaderDataRole?: string;
     /** Placement of the select list relative to the input element */
     listPlacement?: Side;
     /** Use the opposite list placement if the set placement does not fit */

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

@@ -38,7 +38,6 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
   onListScrollBottom,
   multiColumn,
   tableHeader,
-  loaderDataRole,
   listPlacement = "bottom",
   flipEnabled = true,
   isOpen,
@@ -172,9 +171,6 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     start
   }) => {
     const child = childrenList[index];
-    if (! /*#__PURE__*/React.isValidElement(child)) {
-      return child;
-    }
     const optionChildIndex = optionChildrenList.indexOf(child);
     const isOption = optionChildIndex > -1;
     const newProps = {
@@ -384,9 +380,7 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
   })] : [])], [flipEnabled]);
   const loader = isLoading ? /*#__PURE__*/React.createElement(StyledSelectLoaderContainer, {
     key: "loader"
-  }, /*#__PURE__*/React.createElement(Loader, {
-    "data-role": loaderDataRole
-  })) : undefined;
+  }, /*#__PURE__*/React.createElement(Loader, null)) : undefined;
   let selectListContent = renderedChildren;
   const listBoxProps = {
     role: "listbox",
@@ -423,11 +417,13 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     animationFrame: true
   }, /*#__PURE__*/React.createElement(StyledSelectListContainer, _extends({
     "data-element": "select-list-wrapper",
+    "data-role": "select-list-wrapper",
     isLoading: isLoading
   }, listProps), /*#__PURE__*/React.createElement(StyledScrollableContainer, {
     ref: listContainerRef,
     maxHeight: listMaxHeight,
     "data-component": "select-list-scrollable-container",
+    "data-role": "select-list-scrollable-container",
     hasActionButton: !!listActionButton
   }, /*#__PURE__*/React.createElement(StyledSelectList, _extends({
     as: multiColumn ? "div" : "ul",
@@ -463,7 +459,6 @@ if (process.env.NODE_ENV !== "production") {
     "listActionButton": PropTypes.node,
     "listMaxHeight": PropTypes.number,
     "listPlacement": PropTypes.oneOf(["bottom", "left", "right", "top"]),
-    "loaderDataRole": PropTypes.string,
     "multiColumn": PropTypes.bool,
     "multiselectValues": PropTypes.arrayOf(PropTypes.string),
     "onListAction": PropTypes.func,

package/esm/components/select/__internal__/select-textbox/select-textbox.component.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
+import { CustomSelectChangeEvent } from "../../simple-select/simple-select.component";
 import { CommonTextboxProps } from "../../../textbox";
 import { ValidationProps } from "../../../../__internal__/validations";
-import { CustomSelectChangeEvent } from "../../simple-select/simple-select.component";
 export interface FormInputPropTypes extends ValidationProps, Omit<CommonTextboxProps, "onClick" | "onChange"> {
     /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
     adaptiveLabelBreakpoint?: number;
@@ -74,8 +74,6 @@ export interface SelectTextboxProps extends FormInputPropTypes {
     /** Value of the Select Input */
     selectedValue?: string | Record<string, unknown> | string[] | Record<string, unknown>[];
     /** @private @ignore */
-    textboxRef?: HTMLInputElement | null;
-    /** @private @ignore */
     transparent?: boolean;
     /** @private @ignore */
     activeDescendantId?: string;

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

@@ -1,81 +1,45 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useMemo } from "react";
+import React from "react";
 import PropTypes from "prop-types";
-import { offset, size as sizeMiddleware } from "@floating-ui/dom";
-import useFloating from "../../../../hooks/__internal__/useFloating";
+import { SelectTextboxContext } from "./select-textbox.context";
+import { StyledSelectText, StyledSelectTextChildrenWrapper } from "./select-textbox.style";
 import Textbox from "../../../textbox";
-import SelectText from "../select-text";
 import useLocale from "../../../../hooks/__internal__/useLocale";
-import { SelectTextboxContext } from "./select-textbox.context";
-const floatingMiddleware = [offset(({
-  rects
-}) => ({
-  mainAxis: -rects.reference.height
-})), sizeMiddleware({
-  apply({
-    rects,
-    elements
-  }) {
-    elements.reference.style.height = `${rects.floating.height}px`;
-    elements.floating.style.width = `${rects.reference.width}px`;
-  }
-})];
 const SelectTextbox = /*#__PURE__*/React.forwardRef(({
   ariaLabel,
   ariaLabelledby,
   accessibilityLabelId,
   labelId,
   "aria-controls": ariaControls,
-  disabled,
+  disabled = false,
   isOpen,
   id,
-  readOnly,
-  placeholder,
+  readOnly = false,
+  placeholder: customPlaceholder,
   size = "medium",
   onClick,
   onFocus,
   onBlur,
   onChange,
+  formattedValue = "",
   selectedValue,
   required,
   isOptional,
-  textboxRef,
   hasTextCursor,
-  transparent,
+  transparent = false,
   activeDescendantId,
   onKeyDown,
   ...restProps
 }, ref) => {
-  const reference = useMemo(() => ({
-    current: textboxRef?.parentElement?.parentElement || null
-  }), [textboxRef]);
-  const floating = useMemo(() => ({
-    current: textboxRef?.parentElement || null
-  }), [textboxRef]);
-  useFloating({
-    isOpen,
-    reference,
-    floating,
-    strategy: "fixed",
-    animationFrame: true,
-    middleware: floatingMiddleware
-  });
   const l = useLocale();
+  const placeholder = customPlaceholder || l.select.placeholder();
+  const showPlaceholder = !disabled && !readOnly && !formattedValue;
   function handleTextboxClick(event) {
     onClick?.(event);
   }
   function handleTextboxFocus(event) {
-    if (disabled || readOnly) {
-      return;
-    }
-    if (onFocus) {
-      onFocus(event);
-    }
-  }
-  function handleTextboxBlur(event) {
-    if (onBlur) {
-      onBlur(event);
-    }
+    if (disabled || readOnly) return;
+    onFocus?.(event);
   }
   const textboxProps = {
     disabled,
@@ -85,7 +49,7 @@ const SelectTextbox = /*#__PURE__*/React.forwardRef(({
     isOptional,
     onClick: handleTextboxClick,
     onFocus: handleTextboxFocus,
-    onBlur: handleTextboxBlur,
+    onBlur,
     labelId,
     type: "text",
     ref,
@@ -108,22 +72,27 @@ const SelectTextbox = /*#__PURE__*/React.forwardRef(({
   }, /*#__PURE__*/React.createElement(Textbox, _extends({
     "aria-label": ariaLabel,
     "data-element": "select-input",
+    "data-role": "select-textbox",
     inputIcon: "dropdown",
     autoComplete: "off",
     size: size,
     onChange: onChange,
+    formattedValue: formattedValue,
     value: hasStringValue ? selectedValue : undefined,
-    placeholder: hasTextCursor ? placeholder || l.select.placeholder() : undefined
+    placeholder: hasTextCursor ? placeholder : undefined
   }, inputAriaAttributes, textboxProps, {
     my: 0 // prevents any form spacing being applied
-  }), !hasTextCursor && /*#__PURE__*/React.createElement(SelectText, _extends({
-    transparent: transparent,
-    placeholder: placeholder || l.select.placeholder(),
-    onClick: disabled || readOnly ? undefined : handleTextboxClick,
+  }), !hasTextCursor && /*#__PURE__*/React.createElement(StyledSelectText, _extends({
+    "aria-hidden": true,
+    "data-element": "select-text",
+    "data-role": "select-text",
     disabled: disabled,
+    hasPlaceholder: showPlaceholder,
+    onClick: disabled || readOnly ? undefined : handleTextboxClick,
     readOnly: readOnly,
+    transparent: transparent,
     size: size
-  }, restProps))));
+  }, restProps), /*#__PURE__*/React.createElement(StyledSelectTextChildrenWrapper, null, showPlaceholder ? placeholder : formattedValue))));
 });
 if (process.env.NODE_ENV !== "production") {
   SelectTextbox.propTypes = {
@@ -652,7 +621,6 @@ if (process.env.NODE_ENV !== "production") {
     "suppressContentEditableWarning": PropTypes.bool,
     "suppressHydrationWarning": PropTypes.bool,
     "tabIndex": PropTypes.number,
-    "textboxRef": PropTypes.object,
     "title": PropTypes.string,
     "tooltipPosition": PropTypes.oneOf(["bottom", "left", "right", "top"]),
     "translate": PropTypes.oneOf(["no", "yes"]),

package/esm/components/select/__internal__/{select-text/select-text.style.d.ts → select-textbox/select-textbox.style.d.ts}

@@ -1,7 +1,6 @@
-import { SelectTextProps } from ".";
-interface StyledSelectTextProps extends Pick<SelectTextProps, "disabled" | "readOnly" | "transparent"> {
+import { SelectTextboxProps } from "./select-textbox.component";
+interface StyledSelectTextProps extends Required<Pick<SelectTextboxProps, "disabled" | "readOnly" | "transparent" | "size">> {
     hasPlaceholder: boolean;
-    size: NonNullable<SelectTextProps["size"]>;
 }
 declare const StyledSelectText: import("styled-components").StyledComponent<"span", any, StyledSelectTextProps, never>;
 declare const StyledSelectTextChildrenWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;

package/esm/components/select/filterable-select/filterable-select.component.d.ts

@@ -66,5 +66,5 @@ export interface FilterableSelectProps extends Omit<FormInputPropTypes, "default
     /** Flag to configure component as mandatory */
     required?: boolean;
 }
-export declare const FilterableSelect: React.ForwardRefExoticComponent<FilterableSelectProps & React.RefAttributes<unknown>>;
+export declare const FilterableSelect: React.ForwardRefExoticComponent<FilterableSelectProps & React.RefAttributes<HTMLInputElement>>;
 export default FilterableSelect;

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

@@ -364,10 +364,9 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     onListAction?.();
   }
   const assignInput = useCallback(element => {
+    if (!element) return;
     setTextboxRef(element);
-    if (!ref) {
-      return;
-    }
+    if (!ref) return;
     if (typeof ref === "function") {
       ref(element);
     } else {
@@ -381,7 +380,6 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
       label,
       disabled,
       readOnly,
-      ref: assignInput,
       selectedValue,
       formattedValue: textValue,
       onClick: handleTextboxClick,
@@ -416,7 +414,6 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     onListScrollBottom,
     tableHeader,
     multiColumn,
-    loaderDataRole: "filterable-select-list-loader",
     listPlacement,
     flipEnabled,
     isOpen,
@@ -436,14 +433,14 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
   }, marginProps), /*#__PURE__*/React.createElement("div", {
     ref: containerRef
   }, /*#__PURE__*/React.createElement(SelectTextbox, _extends({
+    ref: assignInput,
     activeDescendantId: activeDescendantId,
     ariaLabel: ariaLabel,
     ariaLabelledby: ariaLabelledby,
     labelId: label ? labelId : undefined,
     "aria-controls": selectListId.current,
     isOpen: isOpen,
-    hasTextCursor: true,
-    textboxRef: textboxRef
+    hasTextCursor: true
   }, getTextboxProps()))), selectList);
 });
 if (process.env.NODE_ENV !== "production") {

package/esm/components/select/multi-select/multi-select.component.d.ts

@@ -58,5 +58,5 @@ export interface MultiSelectProps extends Omit<FormInputPropTypes, "defaultValue
     /** Flag to configure component as optional. */
     isOptional?: boolean;
 }
-export declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<unknown>>;
+export declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<HTMLInputElement>>;
 export default MultiSelect;

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

@@ -386,10 +386,9 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     setFilterText("");
   }, []);
   const assignInput = useCallback(element => {
+    if (!element) return;
     setTextboxRef(element);
-    if (!ref) {
-      return;
-    }
+    if (!ref) return;
     if (typeof ref === "function") {
       ref(element);
     } else {
@@ -405,7 +404,6 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       readOnly,
       placeholder: placeholderOverride,
       leftChildren: mapValuesToPills,
-      ref: assignInput,
       formattedValue: textValue,
       selectedValue: actualValue,
       onClick: handleTextboxClick,
@@ -440,7 +438,6 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     listPlacement: listPlacement,
     listMaxHeight: listMaxHeight,
     flipEnabled: flipEnabled,
-    loaderDataRole: "multi-select-list-loader",
     multiselectValues: actualValue,
     isOpen: isOpen,
     enableVirtualScroll: enableVirtualScroll,
@@ -462,6 +459,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     "data-element": "accessibility-label",
     id: accessibilityLabelId.current
   }, accessibilityLabel), /*#__PURE__*/React.createElement(SelectTextbox, _extends({
+    ref: assignInput,
     accessibilityLabelId: accessibilityLabelId.current,
     activeDescendantId: activeDescendantId,
     "aria-controls": selectListId.current,
@@ -469,8 +467,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     ariaLabelledby: ariaLabelledby,
     hasTextCursor: true,
     isOpen: isOpen,
-    labelId: labelId,
-    textboxRef: textboxRef
+    labelId: labelId
   }, getTextboxProps()))), selectList);
 });
 if (process.env.NODE_ENV !== "production") {

package/esm/components/select/simple-select/simple-select.component.d.ts

@@ -66,5 +66,5 @@ export interface SimpleSelectProps extends Omit<FormInputPropTypes, "defaultValu
     /** Flag to configure component as mandatory */
     isRequired?: boolean;
 }
-export declare const SimpleSelect: React.ForwardRefExoticComponent<SimpleSelectProps & React.RefAttributes<unknown>>;
+export declare const SimpleSelect: React.ForwardRefExoticComponent<SimpleSelectProps & React.RefAttributes<HTMLInputElement>>;
 export default SimpleSelect;

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

@@ -282,10 +282,9 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
     setOpenState(false);
   }, []);
   const assignInput = useCallback(element => {
+    if (!element) return;
     setTextboxRef(element);
-    if (!ref) {
-      return;
-    }
+    if (!ref) return;
     if (typeof ref === "function") {
       ref(element);
     } else {
@@ -298,7 +297,6 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
       name,
       disabled,
       readOnly,
-      ref: assignInput,
       selectedValue,
       formattedValue: textValue,
       onClick: handleTextboxClick,
@@ -330,7 +328,6 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
     onListScrollBottom: onListScrollBottom,
     tableHeader: tableHeader,
     multiColumn: multiColumn,
-    loaderDataRole: "simple-select-list-loader",
     listPlacement: listPlacement,
     flipEnabled: flipEnabled,
     isOpen: isOpen,
@@ -349,12 +346,12 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
   }, marginProps), /*#__PURE__*/React.createElement("div", {
     ref: containerRef
   }, /*#__PURE__*/React.createElement(SelectTextbox, _extends({
+    ref: assignInput,
     ariaLabel: ariaLabel,
     "aria-controls": selectListId.current,
     activeDescendantId: activeDescendantId,
     ariaLabelledby: ariaLabelledby,
-    isOpen: isOpen,
-    textboxRef: textboxRef
+    isOpen: isOpen
   }, getTextboxProps()))), selectList);
 });
 if (process.env.NODE_ENV !== "production") {

package/lib/components/menu/__internal__/submenu/submenu.style.js

@@ -63,7 +63,6 @@ const StyledSubmenu = exports.StyledSubmenu = _styledComponents.default.ul`
       min-width: 100%;
 
       ${submenuMaxWidth && (0, _styledComponents.css)`
-        min-width: ${submenuMaxWidth};
         max-width: ${submenuMaxWidth};
 
         &&& {

package/lib/components/pager/pager.style.js

@@ -9,7 +9,7 @@ var _input = _interopRequireDefault(require("../../__internal__/input/input.styl
 var _inputPresentation = _interopRequireDefault(require("../../__internal__/input/input-presentation.style"));
 var _formField = _interopRequireDefault(require("../../__internal__/form-field/form-field.style"));
 var _inputIconToggle = _interopRequireDefault(require("../../__internal__/input-icon-toggle/input-icon-toggle.style"));
-var _selectText = require("../select/__internal__/select-text/select-text.style");
+var _selectTextbox = require("../select/__internal__/select-textbox/select-textbox.style");
 var _link = _interopRequireDefault(require("../link"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
@@ -51,7 +51,7 @@ const StyledPagerSizeOptions = exports.StyledPagerSizeOptions = _styledComponent
     min-width: 10px;
     margin: 0px;
 
-    ${_selectText.StyledSelectText} {
+    ${_selectTextbox.StyledSelectText} {
       font-size: 14px;
       padding-right: 0px;
       padding-left: 8px;

package/lib/components/select/__internal__/select-list/select-list.component.d.ts

@@ -37,8 +37,6 @@ export interface SelectListProps {
     tableHeader?: React.ReactNode;
     /** When true component will work in multi column mode, children should consist of OptionRow components in this mode */
     multiColumn?: boolean;
-    /** Data role for loader component */
-    loaderDataRole?: string;
     /** Placement of the select list relative to the input element */
     listPlacement?: Side;
     /** Use the opposite list placement if the set placement does not fit */

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

@@ -47,7 +47,6 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
   onListScrollBottom,
   multiColumn,
   tableHeader,
-  loaderDataRole,
   listPlacement = "bottom",
   flipEnabled = true,
   isOpen,
@@ -181,9 +180,6 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     start
   }) => {
     const child = childrenList[index];
-    if (! /*#__PURE__*/_react.default.isValidElement(child)) {
-      return child;
-    }
     const optionChildIndex = optionChildrenList.indexOf(child);
     const isOption = optionChildIndex > -1;
     const newProps = {
@@ -393,9 +389,7 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
   })] : [])], [flipEnabled]);
   const loader = isLoading ? /*#__PURE__*/_react.default.createElement(_selectList.StyledSelectLoaderContainer, {
     key: "loader"
-  }, /*#__PURE__*/_react.default.createElement(_loader.default, {
-    "data-role": loaderDataRole
-  })) : undefined;
+  }, /*#__PURE__*/_react.default.createElement(_loader.default, null)) : undefined;
   let selectListContent = renderedChildren;
   const listBoxProps = {
     role: "listbox",
@@ -432,11 +426,13 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     animationFrame: true
   }, /*#__PURE__*/_react.default.createElement(_selectList.StyledSelectListContainer, _extends({
     "data-element": "select-list-wrapper",
+    "data-role": "select-list-wrapper",
     isLoading: isLoading
   }, listProps), /*#__PURE__*/_react.default.createElement(_selectList.StyledScrollableContainer, {
     ref: listContainerRef,
     maxHeight: listMaxHeight,
     "data-component": "select-list-scrollable-container",
+    "data-role": "select-list-scrollable-container",
     hasActionButton: !!listActionButton
   }, /*#__PURE__*/_react.default.createElement(_selectList.StyledSelectList, _extends({
     as: multiColumn ? "div" : "ul",
@@ -472,7 +468,6 @@ if (process.env.NODE_ENV !== "production") {
     "listActionButton": _propTypes.default.node,
     "listMaxHeight": _propTypes.default.number,
     "listPlacement": _propTypes.default.oneOf(["bottom", "left", "right", "top"]),
-    "loaderDataRole": _propTypes.default.string,
     "multiColumn": _propTypes.default.bool,
     "multiselectValues": _propTypes.default.arrayOf(_propTypes.default.string),
     "onListAction": _propTypes.default.func,

package/lib/components/select/__internal__/select-textbox/select-textbox.component.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
+import { CustomSelectChangeEvent } from "../../simple-select/simple-select.component";
 import { CommonTextboxProps } from "../../../textbox";
 import { ValidationProps } from "../../../../__internal__/validations";
-import { CustomSelectChangeEvent } from "../../simple-select/simple-select.component";
 export interface FormInputPropTypes extends ValidationProps, Omit<CommonTextboxProps, "onClick" | "onChange"> {
     /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
     adaptiveLabelBreakpoint?: number;
@@ -74,8 +74,6 @@ export interface SelectTextboxProps extends FormInputPropTypes {
     /** Value of the Select Input */
     selectedValue?: string | Record<string, unknown> | string[] | Record<string, unknown>[];
     /** @private @ignore */
-    textboxRef?: HTMLInputElement | null;
-    /** @private @ignore */
     transparent?: boolean;
     /** @private @ignore */
     activeDescendantId?: string;

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

@@ -4,87 +4,49 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _dom = require("@floating-ui/dom");
-var _useFloating = _interopRequireDefault(require("../../../../hooks/__internal__/useFloating"));
+var _selectTextbox = require("./select-textbox.context");
+var _selectTextbox2 = require("./select-textbox.style");
 var _textbox = _interopRequireDefault(require("../../../textbox"));
-var _selectText = _interopRequireDefault(require("../select-text"));
 var _useLocale = _interopRequireDefault(require("../../../../hooks/__internal__/useLocale"));
-var _selectTextbox = require("./select-textbox.context");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const floatingMiddleware = [(0, _dom.offset)(({
-  rects
-}) => ({
-  mainAxis: -rects.reference.height
-})), (0, _dom.size)({
-  apply({
-    rects,
-    elements
-  }) {
-    elements.reference.style.height = `${rects.floating.height}px`;
-    elements.floating.style.width = `${rects.reference.width}px`;
-  }
-})];
 const SelectTextbox = /*#__PURE__*/_react.default.forwardRef(({
   ariaLabel,
   ariaLabelledby,
   accessibilityLabelId,
   labelId,
   "aria-controls": ariaControls,
-  disabled,
+  disabled = false,
   isOpen,
   id,
-  readOnly,
-  placeholder,
+  readOnly = false,
+  placeholder: customPlaceholder,
   size = "medium",
   onClick,
   onFocus,
   onBlur,
   onChange,
+  formattedValue = "",
   selectedValue,
   required,
   isOptional,
-  textboxRef,
   hasTextCursor,
-  transparent,
+  transparent = false,
   activeDescendantId,
   onKeyDown,
   ...restProps
 }, ref) => {
-  const reference = (0, _react.useMemo)(() => ({
-    current: textboxRef?.parentElement?.parentElement || null
-  }), [textboxRef]);
-  const floating = (0, _react.useMemo)(() => ({
-    current: textboxRef?.parentElement || null
-  }), [textboxRef]);
-  (0, _useFloating.default)({
-    isOpen,
-    reference,
-    floating,
-    strategy: "fixed",
-    animationFrame: true,
-    middleware: floatingMiddleware
-  });
   const l = (0, _useLocale.default)();
+  const placeholder = customPlaceholder || l.select.placeholder();
+  const showPlaceholder = !disabled && !readOnly && !formattedValue;
   function handleTextboxClick(event) {
     onClick?.(event);
   }
   function handleTextboxFocus(event) {
-    if (disabled || readOnly) {
-      return;
-    }
-    if (onFocus) {
-      onFocus(event);
-    }
-  }
-  function handleTextboxBlur(event) {
-    if (onBlur) {
-      onBlur(event);
-    }
+    if (disabled || readOnly) return;
+    onFocus?.(event);
   }
   const textboxProps = {
     disabled,
@@ -94,7 +56,7 @@ const SelectTextbox = /*#__PURE__*/_react.default.forwardRef(({
     isOptional,
     onClick: handleTextboxClick,
     onFocus: handleTextboxFocus,
-    onBlur: handleTextboxBlur,
+    onBlur,
     labelId,
     type: "text",
     ref,
@@ -117,22 +79,27 @@ const SelectTextbox = /*#__PURE__*/_react.default.forwardRef(({
   }, /*#__PURE__*/_react.default.createElement(_textbox.default, _extends({
     "aria-label": ariaLabel,
     "data-element": "select-input",
+    "data-role": "select-textbox",
     inputIcon: "dropdown",
     autoComplete: "off",
     size: size,
     onChange: onChange,
+    formattedValue: formattedValue,
     value: hasStringValue ? selectedValue : undefined,
-    placeholder: hasTextCursor ? placeholder || l.select.placeholder() : undefined
+    placeholder: hasTextCursor ? placeholder : undefined
   }, inputAriaAttributes, textboxProps, {
     my: 0 // prevents any form spacing being applied
-  }), !hasTextCursor && /*#__PURE__*/_react.default.createElement(_selectText.default, _extends({
-    transparent: transparent,
-    placeholder: placeholder || l.select.placeholder(),
-    onClick: disabled || readOnly ? undefined : handleTextboxClick,
+  }), !hasTextCursor && /*#__PURE__*/_react.default.createElement(_selectTextbox2.StyledSelectText, _extends({
+    "aria-hidden": true,
+    "data-element": "select-text",
+    "data-role": "select-text",
     disabled: disabled,
+    hasPlaceholder: showPlaceholder,
+    onClick: disabled || readOnly ? undefined : handleTextboxClick,
     readOnly: readOnly,
+    transparent: transparent,
     size: size
-  }, restProps))));
+  }, restProps), /*#__PURE__*/_react.default.createElement(_selectTextbox2.StyledSelectTextChildrenWrapper, null, showPlaceholder ? placeholder : formattedValue))));
 });
 if (process.env.NODE_ENV !== "production") {
   SelectTextbox.propTypes = {
@@ -661,7 +628,6 @@ if (process.env.NODE_ENV !== "production") {
     "suppressContentEditableWarning": _propTypes.default.bool,
     "suppressHydrationWarning": _propTypes.default.bool,
     "tabIndex": _propTypes.default.number,
-    "textboxRef": _propTypes.default.object,
     "title": _propTypes.default.string,
     "tooltipPosition": _propTypes.default.oneOf(["bottom", "left", "right", "top"]),
     "translate": _propTypes.default.oneOf(["no", "yes"]),

package/lib/components/select/__internal__/{select-text/select-text.style.d.ts → select-textbox/select-textbox.style.d.ts}

@@ -1,7 +1,6 @@
-import { SelectTextProps } from ".";
-interface StyledSelectTextProps extends Pick<SelectTextProps, "disabled" | "readOnly" | "transparent"> {
+import { SelectTextboxProps } from "./select-textbox.component";
+interface StyledSelectTextProps extends Required<Pick<SelectTextboxProps, "disabled" | "readOnly" | "transparent" | "size">> {
     hasPlaceholder: boolean;
-    size: NonNullable<SelectTextProps["size"]>;
 }
 declare const StyledSelectText: import("styled-components").StyledComponent<"span", any, StyledSelectTextProps, never>;
 declare const StyledSelectTextChildrenWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;

package/lib/components/select/filterable-select/filterable-select.component.d.ts

@@ -66,5 +66,5 @@ export interface FilterableSelectProps extends Omit<FormInputPropTypes, "default
     /** Flag to configure component as mandatory */
     required?: boolean;
 }
-export declare const FilterableSelect: React.ForwardRefExoticComponent<FilterableSelectProps & React.RefAttributes<unknown>>;
+export declare const FilterableSelect: React.ForwardRefExoticComponent<FilterableSelectProps & React.RefAttributes<HTMLInputElement>>;
 export default FilterableSelect;

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

@@ -373,10 +373,9 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
     onListAction?.();
   }
   const assignInput = (0, _react.useCallback)(element => {
+    if (!element) return;
     setTextboxRef(element);
-    if (!ref) {
-      return;
-    }
+    if (!ref) return;
     if (typeof ref === "function") {
       ref(element);
     } else {
@@ -390,7 +389,6 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
       label,
       disabled,
       readOnly,
-      ref: assignInput,
       selectedValue,
       formattedValue: textValue,
       onClick: handleTextboxClick,
@@ -425,7 +423,6 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
     onListScrollBottom,
     tableHeader,
     multiColumn,
-    loaderDataRole: "filterable-select-list-loader",
     listPlacement,
     flipEnabled,
     isOpen,
@@ -445,14 +442,14 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
   }, marginProps), /*#__PURE__*/_react.default.createElement("div", {
     ref: containerRef
   }, /*#__PURE__*/_react.default.createElement(_selectTextbox.default, _extends({
+    ref: assignInput,
     activeDescendantId: activeDescendantId,
     ariaLabel: ariaLabel,
     ariaLabelledby: ariaLabelledby,
     labelId: label ? labelId : undefined,
     "aria-controls": selectListId.current,
     isOpen: isOpen,
-    hasTextCursor: true,
-    textboxRef: textboxRef
+    hasTextCursor: true
   }, getTextboxProps()))), selectList);
 });
 if (process.env.NODE_ENV !== "production") {

package/lib/components/select/multi-select/multi-select.component.d.ts

@@ -58,5 +58,5 @@ export interface MultiSelectProps extends Omit<FormInputPropTypes, "defaultValue
     /** Flag to configure component as optional. */
     isOptional?: boolean;
 }
-export declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<unknown>>;
+export declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<HTMLInputElement>>;
 export default MultiSelect;

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

@@ -395,10 +395,9 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
     setFilterText("");
   }, []);
   const assignInput = (0, _react.useCallback)(element => {
+    if (!element) return;
     setTextboxRef(element);
-    if (!ref) {
-      return;
-    }
+    if (!ref) return;
     if (typeof ref === "function") {
       ref(element);
     } else {
@@ -414,7 +413,6 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
       readOnly,
       placeholder: placeholderOverride,
       leftChildren: mapValuesToPills,
-      ref: assignInput,
       formattedValue: textValue,
       selectedValue: actualValue,
       onClick: handleTextboxClick,
@@ -449,7 +447,6 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
     listPlacement: listPlacement,
     listMaxHeight: listMaxHeight,
     flipEnabled: flipEnabled,
-    loaderDataRole: "multi-select-list-loader",
     multiselectValues: actualValue,
     isOpen: isOpen,
     enableVirtualScroll: enableVirtualScroll,
@@ -471,6 +468,7 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
     "data-element": "accessibility-label",
     id: accessibilityLabelId.current
   }, accessibilityLabel), /*#__PURE__*/_react.default.createElement(_selectTextbox.default, _extends({
+    ref: assignInput,
     accessibilityLabelId: accessibilityLabelId.current,
     activeDescendantId: activeDescendantId,
     "aria-controls": selectListId.current,
@@ -478,8 +476,7 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
     ariaLabelledby: ariaLabelledby,
     hasTextCursor: true,
     isOpen: isOpen,
-    labelId: labelId,
-    textboxRef: textboxRef
+    labelId: labelId
   }, getTextboxProps()))), selectList);
 });
 if (process.env.NODE_ENV !== "production") {

package/lib/components/select/simple-select/simple-select.component.d.ts

@@ -66,5 +66,5 @@ export interface SimpleSelectProps extends Omit<FormInputPropTypes, "defaultValu
     /** Flag to configure component as mandatory */
     isRequired?: boolean;
 }
-export declare const SimpleSelect: React.ForwardRefExoticComponent<SimpleSelectProps & React.RefAttributes<unknown>>;
+export declare const SimpleSelect: React.ForwardRefExoticComponent<SimpleSelectProps & React.RefAttributes<HTMLInputElement>>;
 export default SimpleSelect;

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

@@ -291,10 +291,9 @@ const SimpleSelect = exports.SimpleSelect = /*#__PURE__*/_react.default.forwardR
     setOpenState(false);
   }, []);
   const assignInput = (0, _react.useCallback)(element => {
+    if (!element) return;
     setTextboxRef(element);
-    if (!ref) {
-      return;
-    }
+    if (!ref) return;
     if (typeof ref === "function") {
       ref(element);
     } else {
@@ -307,7 +306,6 @@ const SimpleSelect = exports.SimpleSelect = /*#__PURE__*/_react.default.forwardR
       name,
       disabled,
       readOnly,
-      ref: assignInput,
       selectedValue,
       formattedValue: textValue,
       onClick: handleTextboxClick,
@@ -339,7 +337,6 @@ const SimpleSelect = exports.SimpleSelect = /*#__PURE__*/_react.default.forwardR
     onListScrollBottom: onListScrollBottom,
     tableHeader: tableHeader,
     multiColumn: multiColumn,
-    loaderDataRole: "simple-select-list-loader",
     listPlacement: listPlacement,
     flipEnabled: flipEnabled,
     isOpen: isOpen,
@@ -358,12 +355,12 @@ const SimpleSelect = exports.SimpleSelect = /*#__PURE__*/_react.default.forwardR
   }, marginProps), /*#__PURE__*/_react.default.createElement("div", {
     ref: containerRef
   }, /*#__PURE__*/_react.default.createElement(_selectTextbox.default, _extends({
+    ref: assignInput,
     ariaLabel: ariaLabel,
     "aria-controls": selectListId.current,
     activeDescendantId: activeDescendantId,
     ariaLabelledby: ariaLabelledby,
-    isOpen: isOpen,
-    textboxRef: textboxRef
+    isOpen: isOpen
   }, getTextboxProps()))), selectList);
 });
 if (process.env.NODE_ENV !== "production") {

package/package.json

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

package/esm/components/select/__internal__/select-text/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./select-text.component";
-export type { SelectTextProps } from "./select-text.component";

package/esm/components/select/__internal__/select-text/index.js

@@ -1 +0,0 @@
-export { default } from "./select-text.component";

package/esm/components/select/__internal__/select-text/select-text.component.d.ts

@@ -1,22 +0,0 @@
-import React from "react";
-export interface SelectTextProps {
-    /** If true the Component will be disabled */
-    disabled?: boolean;
-    /** Value to be displayed */
-    formattedValue?: string;
-    /** Callback function for when the component is clicked. */
-    onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
-    /** Callback function for when the key is pressed when focused on Select Text. */
-    /** Callback function for when the left mouse key is pressed when focused on Select Text. */
-    onMouseDown?: (ev: React.MouseEvent<HTMLElement>) => void;
-    /** Placeholder string to be displayed when formattedValue is empty */
-    placeholder?: string;
-    /** If true the Component will be read-only */
-    readOnly?: boolean;
-    /** If true the component has no border and a transparent background */
-    transparent?: boolean;
-    /** Component size */
-    size?: "small" | "medium" | "large";
-}
-declare const SelectText: ({ disabled, formattedValue, onClick, onMouseDown, placeholder, readOnly, transparent, size, }: SelectTextProps) => React.JSX.Element;
-export default SelectText;

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

@@ -1,27 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { StyledSelectText, StyledSelectTextChildrenWrapper } from "./select-text.style";
-const SelectText = ({
-  disabled,
-  formattedValue = "",
-  onClick,
-  onMouseDown,
-  placeholder,
-  readOnly,
-  transparent,
-  size = "medium"
-}) => {
-  const hasPlaceholder = !disabled && !readOnly && !formattedValue;
-  return /*#__PURE__*/React.createElement(StyledSelectText, {
-    "aria-hidden": true,
-    "data-element": "select-text",
-    disabled: disabled,
-    hasPlaceholder: hasPlaceholder,
-    onClick: onClick,
-    onMouseDown: onMouseDown,
-    readOnly: readOnly,
-    transparent: transparent,
-    size: size
-  }, /*#__PURE__*/React.createElement(StyledSelectTextChildrenWrapper, null, hasPlaceholder ? placeholder : formattedValue));
-};
-export default SelectText;

package/lib/components/select/__internal__/select-text/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./select-text.component";
-export type { SelectTextProps } from "./select-text.component";

package/lib/components/select/__internal__/select-text/index.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _selectText.default;
-  }
-});
-var _selectText = _interopRequireDefault(require("./select-text.component"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/components/select/__internal__/select-text/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "module": "../../../../../esm/components/select/__internal__/select-text/index.js",
-  "main": "./index.js",
-  "types": "./index.d.ts"
-}

package/lib/components/select/__internal__/select-text/select-text.component.d.ts

@@ -1,22 +0,0 @@
-import React from "react";
-export interface SelectTextProps {
-    /** If true the Component will be disabled */
-    disabled?: boolean;
-    /** Value to be displayed */
-    formattedValue?: string;
-    /** Callback function for when the component is clicked. */
-    onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
-    /** Callback function for when the key is pressed when focused on Select Text. */
-    /** Callback function for when the left mouse key is pressed when focused on Select Text. */
-    onMouseDown?: (ev: React.MouseEvent<HTMLElement>) => void;
-    /** Placeholder string to be displayed when formattedValue is empty */
-    placeholder?: string;
-    /** If true the Component will be read-only */
-    readOnly?: boolean;
-    /** If true the component has no border and a transparent background */
-    transparent?: boolean;
-    /** Component size */
-    size?: "small" | "medium" | "large";
-}
-declare const SelectText: ({ disabled, formattedValue, onClick, onMouseDown, placeholder, readOnly, transparent, size, }: SelectTextProps) => React.JSX.Element;
-export default SelectText;

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

@@ -1,34 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _selectText = require("./select-text.style");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const SelectText = ({
-  disabled,
-  formattedValue = "",
-  onClick,
-  onMouseDown,
-  placeholder,
-  readOnly,
-  transparent,
-  size = "medium"
-}) => {
-  const hasPlaceholder = !disabled && !readOnly && !formattedValue;
-  return /*#__PURE__*/_react.default.createElement(_selectText.StyledSelectText, {
-    "aria-hidden": true,
-    "data-element": "select-text",
-    disabled: disabled,
-    hasPlaceholder: hasPlaceholder,
-    onClick: onClick,
-    onMouseDown: onMouseDown,
-    readOnly: readOnly,
-    transparent: transparent,
-    size: size
-  }, /*#__PURE__*/_react.default.createElement(_selectText.StyledSelectTextChildrenWrapper, null, hasPlaceholder ? placeholder : formattedValue));
-};
-var _default = exports.default = SelectText;