carbon-react 104.10.1 → 104.12.1

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

@@ -5,46 +5,63 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _option = _interopRequireDefault(require("./option.style"));
 
+var _selectListContext = _interopRequireDefault(require("../__internal__/select-list-context"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 const Option = /*#__PURE__*/_react.default.forwardRef(({
   text,
   children,
   onSelect,
   value,
-  isHighlighted,
+  id,
+  index,
   hidden,
   onClick
 }, ref) => {
+  const selectListContext = (0, _react.useContext)(_selectListContext.default);
+  let isSelected = selectListContext.currentOptionsListIndex === index;
+
+  if (selectListContext.multiselectValues) {
+    isSelected = selectListContext.multiselectValues.includes(value);
+  }
+
   function handleClick() {
     if (!onClick) {
       onSelect({
         text,
-        value
+        value,
+        id
       });
     } else {
       onSelect();
       onClick({
         target: {
           text,
-          value
+          value,
+          id
         }
       });
     }
   }
 
   return /*#__PURE__*/_react.default.createElement(_option.default, {
+    id: id,
     ref: ref,
-    "aria-selected": isHighlighted,
+    "aria-selected": isSelected,
     "data-component": "option",
     onClick: handleClick,
-    isHighlighted: isHighlighted,
+    isHighlighted: selectListContext.currentOptionsListIndex === index,
     role: "option",
     hidden: hidden
   }, children || text);
@@ -60,6 +77,13 @@ Option.propTypes = {
   /** The option's invisible internal value */
   value: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]).isRequired,
 
+  /**
+   * @private
+   * @ignore
+   * Component id (prop added by the SelectList component)
+   */
+  id: _propTypes.default.string,
+
   /**
    * @private
    * @ignore
@@ -75,8 +99,8 @@ Option.propTypes = {
   /**
    * @private
    * @ignore
-   * True if the option is highlighted (prop added by the SelectList component) */
-  isHighlighted: _propTypes.default.bool,
+   * Position of the element in the list */
+  index: _propTypes.default.number,
 
   /**
    * @private

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

@@ -5,35 +5,45 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _optionRow = _interopRequireDefault(require("./option-row.style"));
 
+var _selectListContext = _interopRequireDefault(require("../__internal__/select-list-context"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 const OptionRow = /*#__PURE__*/_react.default.forwardRef(({
+  id,
   text,
   children,
   onSelect,
   value,
-  isHighlighted,
+  index,
   hidden
 }, ref) => {
   const handleClick = () => {
     onSelect({
+      id,
       text,
       value
     });
   };
 
+  const selectListContext = (0, _react.useContext)(_selectListContext.default);
   return /*#__PURE__*/_react.default.createElement(_optionRow.default, {
+    id: id,
     ref: ref,
-    "aria-selected": isHighlighted,
+    "aria-selected": selectListContext.currentOptionsListIndex === index,
     "data-component": "option-row",
     onClick: handleClick,
-    isHighlighted: isHighlighted,
+    isHighlighted: selectListContext.currentOptionsListIndex === index,
     role: "option",
     hidden: hidden
   }, children);
@@ -49,6 +59,13 @@ OptionRow.propTypes = {
   /** The option's invisible internal value */
   value: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]).isRequired,
 
+  /**
+   * @private
+   * @ignore
+   * Component id (prop added by the SelectList component)
+   */
+  id: _propTypes.default.string.isRequired,
+
   /**
    * @private
    * @ignore
@@ -58,8 +75,8 @@ OptionRow.propTypes = {
   /**
    * @private
    * @ignore
-   * True if the option is highlighted (prop added by the SelectList component) */
-  isHighlighted: _propTypes.default.bool,
+   * Position of the element in the list */
+  index: _propTypes.default.number,
 
   /**
    * @private

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

@@ -29,6 +29,10 @@ var _loader = _interopRequireDefault(require("../../loader"));
 
 var _option = _interopRequireDefault(require("../option/option.component"));
 
+var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid/guid"));
+
+var _selectListContext = _interopRequireDefault(require("../__internal__/select-list-context"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -84,7 +88,6 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
   const anchorRef = (0, _react.useMemo)(() => ({
     current: anchorElement
   }), [anchorElement]);
-  const childrenList = (0, _react.useMemo)(() => _react.default.Children.toArray(children), [children]);
   const optionRefList = (0, _react.useMemo)(() => _react.default.Children.map(children, child => {
     if ((child === null || child === void 0 ? void 0 : child.type) === _option.default || (child === null || child === void 0 ? void 0 : child.type) === _optionRow.default) {
       return /*#__PURE__*/_react.default.createRef();
@@ -92,6 +95,26 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
 
     return null;
   }).filter(child => child), [children]);
+  const handleSelect = (0, _react.useCallback)(optionData => {
+    onSelect({ ...optionData,
+      selectionType: "click"
+    });
+  }, [onSelect]);
+  const childrenWithListProps = (0, _react.useMemo)(() => _react.default.Children.map(children, (child, index) => {
+    if (!child || child.type !== _option.default && child.type !== _optionRow.default) {
+      return child;
+    }
+
+    const newProps = {
+      index,
+      id: (0, _guid.default)(),
+      onSelect: handleSelect,
+      hidden: isLoading && _react.default.Children.count(children) === 1,
+      ref: optionRefList[index]
+    };
+    return /*#__PURE__*/_react.default.cloneElement(child, newProps);
+  }), [children, handleSelect, isLoading, optionRefList]);
+  const childrenList = (0, _react.useMemo)(() => _react.default.Children.toArray(childrenWithListProps), [childrenWithListProps]);
   const lastOptionIndex = (0, _react.useMemo)(() => {
     let lastIndex = 0;
     childrenList.forEach((element, index) => {
@@ -131,12 +154,14 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
 
     const {
       text,
-      value
+      value,
+      id: itemId
     } = childrenList[nextIndex].props;
     onSelect({
       text,
       value,
-      selectionType: "navigationKey"
+      selectionType: "navigationKey",
+      id: itemId
     });
   }, [childrenList, currentOptionsListIndex, getIndexOfMatch, getNextHighlightableItemIndex, highlightedValue, onSelect]);
   const handleActionButtonTab = (0, _react.useCallback)((event, isActionButtonFocused) => {
@@ -174,10 +199,12 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
       }
 
       const {
+        id: itemId,
         text,
         value
       } = currentOption.props;
       onSelect({
+        id: itemId,
         text,
         value,
         selectionType: "enterKey"
@@ -194,24 +221,6 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
       onListScrollBottom();
     }
   }, [onListScrollBottom]);
-  const handleSelect = (0, _react.useCallback)(optionData => {
-    onSelect({ ...optionData,
-      selectionType: "click"
-    });
-  }, [onSelect]);
-  const childrenWithListProps = (0, _react.useMemo)(() => _react.default.Children.map(children, (child, index) => {
-    if (!child || child.type !== _option.default && child.type !== _optionRow.default) {
-      return child;
-    }
-
-    const newProps = {
-      onSelect: handleSelect,
-      isHighlighted: currentOptionsListIndex === index,
-      hidden: isLoading && _react.default.Children.count(children) === 1,
-      ref: optionRefList[index]
-    };
-    return /*#__PURE__*/_react.default.cloneElement(child, newProps);
-  }), [children, currentOptionsListIndex, handleSelect, isLoading, optionRefList]);
   const assignListWidth = (0, _react.useCallback)(() => {
     if (!disablePortal && anchorElement) {
       const inputBoundingRect = anchorElement.getBoundingClientRect();
@@ -313,6 +322,10 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     height: listHeight,
     width: listWidth,
     ref: listContainerRef
+  }, /*#__PURE__*/_react.default.createElement(_selectListContext.default.Provider, {
+    value: {
+      currentOptionsListIndex
+    }
   }, /*#__PURE__*/_react.default.createElement(_selectListContainer.default, _extends({
     "data-element": "select-list-wrapper",
     height: listHeight,
@@ -324,14 +337,14 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     "data-element": "select-list",
     role: "listbox",
     ref: listRef,
-    tabIndex: "0",
+    tabIndex: "-1",
     isLoading: isLoading,
     multiColumn: multiColumn
   }, selectListContent, isLoading && loader()), listActionButton && /*#__PURE__*/_react.default.createElement(_listActionButton.default, {
     ref: listActionButtonRef,
     listActionButton: listActionButton,
     onListAction: onListAction
-  }))));
+  })))));
 });
 
 SelectList.propTypes = {

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

@@ -1,8 +1,11 @@
 export default SelectTextbox;
-declare function SelectTextbox({ value, disabled, readOnly, placeholder, labelId, size, onClick, onFocus, onBlur, selectedValue, required, ...restProps }: {
+declare function SelectTextbox({ accessibilityLabelId, "aria-controls": ariaControls, value, disabled, isOpen, readOnly, placeholder, labelId, size, onClick, onFocus, onBlur, onChange, selectedValue, required, hasTextCursor, transparent, activeDescendantId, ...restProps }: {
     [x: string]: any;
+    accessibilityLabelId?: string | undefined;
+    "aria-controls": any;
     value: any;
     disabled: any;
+    isOpen: any;
     readOnly: any;
     placeholder: any;
     labelId: any;
@@ -10,34 +13,118 @@ declare function SelectTextbox({ value, disabled, readOnly, placeholder, labelId
     onClick: any;
     onFocus: any;
     onBlur: any;
+    onChange: any;
     selectedValue: any;
     required: any;
+    hasTextCursor: any;
+    transparent: any;
+    activeDescendantId: any;
 }): JSX.Element;
 declare namespace SelectTextbox {
-    namespace propTypes {
-        const formattedValue: PropTypes.Requireable<string>;
-        const selectedValue: PropTypes.Requireable<string | object>;
-        const id: PropTypes.Requireable<string>;
-        const name: PropTypes.Requireable<string>;
-        const readOnly: PropTypes.Requireable<boolean>;
-        const disabled: PropTypes.Requireable<boolean>;
-        const autoFocus: PropTypes.Requireable<boolean>;
-        const labelId: PropTypes.Requireable<string>;
-        const label: PropTypes.Requireable<string>;
-        const labelHelp: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        const labelInline: PropTypes.Requireable<boolean>;
-        const labelWidth: PropTypes.Requireable<number>;
-        const inputWidth: PropTypes.Requireable<number>;
-        const size: PropTypes.Requireable<string>;
-        const placeholder: PropTypes.Requireable<string>;
-        const onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        const onClick: PropTypes.Requireable<(...args: any[]) => any>;
-        const onFocus: PropTypes.Requireable<(...args: any[]) => any>;
-        const onBlur: PropTypes.Requireable<(...args: any[]) => any>;
-        const onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
-        const adaptiveLabelBreakpoint: PropTypes.Requireable<number>;
-        const required: PropTypes.Requireable<boolean>;
-    }
+    const propTypes: {
+        /**
+         * @ignore
+         * @private
+         * Id attribute of the select list
+         */
+        "aria-controls": PropTypes.Requireable<string>;
+        /**
+         * @private
+         * @ignore
+         * Value to be displayed in the Textbox */
+        formattedValue: PropTypes.Requireable<string>;
+        /**
+         * @private
+         * @ignore
+         * If true, the input will be displayed */
+        hasTextCursor: PropTypes.Requireable<boolean>;
+        /**
+         * @private
+         * @ignore
+         * Value of the Select Input */
+        selectedValue: PropTypes.Requireable<string | object>;
+        /**
+         * Id of the element containing the currently displayed value
+         * to be read by voice readers
+         * @private
+         * @ignore
+         */
+        accessibilityLabelId: PropTypes.Requireable<string>;
+        /** Id attribute of the input element */
+        id: PropTypes.Requireable<string>;
+        /** Name attribute of the input element */
+        name: PropTypes.Requireable<string>;
+        /** If true the Component will be read-only */
+        readOnly: PropTypes.Requireable<boolean>;
+        /** If true the Component will be disabled */
+        disabled: PropTypes.Requireable<boolean>;
+        /** If true the Component will be focused when rendered */
+        autoFocus: PropTypes.Requireable<boolean>;
+        /**
+         * Label id passed from Select component
+         * @private
+         * @ignore
+         *
+         */
+        labelId: PropTypes.Requireable<string>;
+        /** Label */
+        label: PropTypes.Requireable<string>;
+        /** Text applied to label help tooltip */
+        labelHelp: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /** When true, label is placed in line with an input */
+        labelInline: PropTypes.Requireable<boolean>;
+        /** Width of a label in percentage. Works only when labelInline is true */
+        labelWidth: PropTypes.Requireable<number>;
+        /** Width of an input in percentage. Works only when labelInline is true */
+        inputWidth: PropTypes.Requireable<number>;
+        /**
+         * @ignore
+         * @private
+         * If true, the select is open
+         */
+        isOpen: PropTypes.Requireable<boolean>;
+        /** Size of an input */
+        size: PropTypes.Requireable<string>;
+        /** Placeholder string to be displayed in input */
+        placeholder: PropTypes.Requireable<string>;
+        /** A custom callback for when changes occur */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /** Callback function for when the Select Textbox is clicked. */
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        /** Callback function for when the Select Textbox is focused. */
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        /** Callback function for when the Select Textbox loses it's focus. */
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        /** Callback function for when the key is pressed when focused on Select Textbox. */
+        onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+        /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
+        adaptiveLabelBreakpoint: PropTypes.Requireable<number>;
+        /** Flag to configure component as mandatory */
+        required: PropTypes.Requireable<boolean>;
+    };
+}
+export namespace formInputPropTypes {
+    const accessibilityLabelId: PropTypes.Requireable<string>;
+    const id: PropTypes.Requireable<string>;
+    const name: PropTypes.Requireable<string>;
+    const readOnly: PropTypes.Requireable<boolean>;
+    const disabled: PropTypes.Requireable<boolean>;
+    const autoFocus: PropTypes.Requireable<boolean>;
+    const labelId: PropTypes.Requireable<string>;
+    const label: PropTypes.Requireable<string>;
+    const labelHelp: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    const labelInline: PropTypes.Requireable<boolean>;
+    const labelWidth: PropTypes.Requireable<number>;
+    const inputWidth: PropTypes.Requireable<number>;
+    const isOpen: PropTypes.Requireable<boolean>;
+    const size: PropTypes.Requireable<string>;
+    const placeholder: PropTypes.Requireable<string>;
+    const onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    const onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    const onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+    const onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+    const onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+    const adaptiveLabelBreakpoint: PropTypes.Requireable<number>;
+    const required: PropTypes.Requireable<boolean>;
 }
-export namespace formInputPropTypes { }
 import PropTypes from "prop-types";

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.formInputPropTypes = exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -13,13 +13,24 @@ var _textbox = _interopRequireDefault(require("../../textbox"));
 
 var _useLocale = _interopRequireDefault(require("../../../hooks/__internal__/useLocale"));
 
+var _selectText = _interopRequireDefault(require("../__internal__/select-text/select-text.component"));
+
+var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid/guid"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 const SelectTextbox = ({
+  accessibilityLabelId = "",
+  "aria-controls": ariaControls,
   value,
   disabled,
+  isOpen,
   readOnly,
   placeholder,
   labelId,
@@ -27,11 +38,16 @@ const SelectTextbox = ({
   onClick,
   onFocus,
   onBlur,
+  onChange,
   selectedValue,
   required,
+  hasTextCursor,
+  transparent,
+  activeDescendantId,
   ...restProps
 }) => {
   const l = (0, _useLocale.default)();
+  const textId = (0, _react.useRef)((0, _guid.default)());
 
   function handleTextboxClick(event) {
     if (disabled || readOnly) {
@@ -59,7 +75,7 @@ const SelectTextbox = ({
 
   function getTextboxProps() {
     return {
-      placeholder: placeholder || l.select.placeholder(),
+      placeholder: hasTextCursor ? placeholder || l.select.placeholder() : undefined,
       disabled,
       readOnly,
       required,
@@ -67,20 +83,63 @@ const SelectTextbox = ({
       onFocus: handleTextboxFocus,
       onBlur: handleTextboxBlur,
       labelId,
+      type: "text",
       ...restProps
     };
   }
 
+  function getInputAriaAttributes() {
+    return {
+      "aria-expanded": isOpen,
+      "aria-labelledby": hasTextCursor ? `${labelId} ${accessibilityLabelId}` : `${labelId} ${textId.current}`,
+      "aria-activedescendant": activeDescendantId,
+      "aria-controls": ariaControls,
+      "aria-autocomplete": hasTextCursor ? "both" : undefined,
+      role: readOnly ? undefined : "combobox"
+    };
+  }
+
+  function renderSelectText() {
+    if (hasTextCursor) {
+      return null;
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_selectText.default, _extends({
+      textId: textId.current,
+      transparent: transparent,
+      onKeyDown: handleSelectTextKeydown
+    }, getTextboxProps()));
+  }
+
+  function handleSelectTextKeydown(event) {
+    if (event.key.length === 1) {
+      onChange({
+        target: {
+          value: event.key
+        }
+      });
+    }
+  }
+
   return /*#__PURE__*/_react.default.createElement(_textbox.default, _extends({
     "data-element": "select-input",
     inputIcon: "dropdown",
     autoComplete: "off",
     size: size,
+    onChange: onChange,
     value: selectedValue
-  }, getTextboxProps()));
+  }, getInputAriaAttributes(), getTextboxProps()), renderSelectText());
 };
 
 const formInputPropTypes = {
+  /**
+   * Id of the element containing the currently displayed value
+   * to be read by voice readers
+   * @private
+   * @ignore
+   */
+  accessibilityLabelId: _propTypes.default.string,
+
   /** Id attribute of the input element */
   id: _propTypes.default.string,
 
@@ -119,6 +178,13 @@ const formInputPropTypes = {
   /** Width of an input in percentage. Works only when labelInline is true */
   inputWidth: _propTypes.default.number,
 
+  /**
+   * @ignore
+   * @private
+   * If true, the select is open
+   */
+  isOpen: _propTypes.default.bool,
+
   /** Size of an input */
   size: _propTypes.default.oneOf(["small", "medium", "large"]),
 
@@ -149,12 +215,25 @@ const formInputPropTypes = {
 exports.formInputPropTypes = formInputPropTypes;
 SelectTextbox.propTypes = { ...formInputPropTypes,
 
+  /**
+   * @ignore
+   * @private
+   * Id attribute of the select list
+   */
+  "aria-controls": _propTypes.default.string,
+
   /**
    * @private
    * @ignore
    * Value to be displayed in the Textbox */
   formattedValue: _propTypes.default.string,
 
+  /**
+   * @private
+   * @ignore
+   * If true, the input will be displayed */
+  hasTextCursor: _propTypes.default.bool,
+
   /**
    * @private
    * @ignore

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

@@ -47,10 +47,16 @@ export interface FormInputPropTypes
 }
 
 export interface SelectTextboxProps extends FormInputPropTypes {
+  /** Id attribute of the select list */
+  "aria-controls"?: string;
   /** Value to be displayed in the Textbox */
-  formattedValue: string;
+  formattedValue?: string;
+  /** If true, the input will be displayed */
+  hasTextCursor?: boolean;
+  /** If true, the list is displayed */
+  isOpen?: boolean;
   /** Value of the Select Input */
-  selectedValue:
+  selectedValue?:
     | string
     | Record<string, unknown>
     | string[]

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

@@ -35,7 +35,7 @@ const StyledSelect = _styledComponents.default.div`
     position: relative;
 
     ${_input.default} {
-      cursor: ${hasTextCursor ? "text" : "pointer"};
+      cursor: "text";
 
       ${disabled && (0, _styledComponents.css)`
         cursor: not-allowed;
@@ -44,7 +44,7 @@ const StyledSelect = _styledComponents.default.div`
       `}
 
       ${readOnly && (0, _styledComponents.css)`
-        cursor: ${hasTextCursor ? "text" : "default"};
+        cursor: "text";
         color: var(--colorsYin065);
         text-shadow: none;
       `}
@@ -73,15 +73,18 @@ const StyledSelect = _styledComponents.default.div`
         border: none;
       }
 
-      ${_input.default} {
-        font-weight: 900;
-        text-align: right;
-      }
-
       ${_inputIconToggle.default} {
         margin-left: 0;
       }
     `}
+
+    ${!hasTextCursor && (0, _styledComponents.css)`
+      ${_input.default} {
+        position: absolute;
+        width: auto;
+        opacity: 0;
+      }
+    `}
   `}
 `;
 StyledSelect.defaultProps = {