carbon-react 118.1.0 → 118.2.0

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

@@ -0,0 +1,2 @@
+declare const StyledOptionGroupHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export default StyledOptionGroupHeader;

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

@@ -1,16 +1,2 @@
-import * as React from "react";
-
-export interface OptionRowProps {
-  /** The option's visible text, displayed within <Textbox> of <Select> */
-  text: string;
-  /** Row content, should consist of multiple td elements */
-  children: React.ReactNode;
-  /** The option's invisible internal value */
-  value: string | Record<string, unknown>;
-}
-
-declare function OptionRow(
-  props: OptionRowProps & React.RefAttributes<HTMLTableRowElement>
-): JSX.Element;
-
-export default OptionRow;
+export { default } from "./option-row.component";
+export type { OptionRowProps } from "./option-row.component";

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

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

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

@@ -0,0 +1,42 @@
+import React from "react";
+import { CSSProperties } from "styled-components";
+export interface OptionRowProps {
+    /** The option's visible text, displayed within <Textbox> of <Select> */
+    text: string;
+    /** Row content, should consist of multiple td elements */
+    children: React.ReactNode;
+    /** The option's invisible internal value */
+    value: string | Record<string, unknown>;
+    /**
+     * @private
+     * @ignore
+     * Component id (prop added by the SelectList component)
+     */
+    id: string;
+    /**
+     * @private
+     * @ignore
+     * Callback to return value when the element is selected (prop added by the SelectList component) */
+    onSelect?: (ev: {
+        id: string;
+        text: string;
+        value: string | Record<string, unknown>;
+    }) => void;
+    /**
+     * @private
+     * @ignore
+     * Position of the element in the list */
+    index?: number;
+    /**
+     * @private
+     * @ignore
+     * True when option should be hidden from the view (prop added by the SelectList component) */
+    hidden?: boolean;
+    /**
+     * @private
+     * @ignore
+     * object containing CSS styles to be passed to the underlying DOM element */
+    style?: CSSProperties;
+}
+declare const OptionRow: React.ForwardRefExoticComponent<OptionRowProps & React.RefAttributes<HTMLTableRowElement>>;
+export default OptionRow;

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

@@ -16,7 +16,7 @@ const OptionRow = /*#__PURE__*/React.forwardRef(({
   ...rest
 }, ref) => {
   const handleClick = () => {
-    onSelect({
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect({
       id,
       text,
       value
@@ -43,44 +43,14 @@ const OptionRow = /*#__PURE__*/React.forwardRef(({
   }, rest), children);
 });
 OptionRow.propTypes = {
-  /** The option's visible text, displayed within Textbox of Select */
-  text: PropTypes.string.isRequired,
-
-  /** Row content, should consist of multiple `td` elements */
-  children: PropTypes.node.isRequired,
-
-  /** The option's invisible internal value */
-  value: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired,
-
-  /**
-   * @private
-   * @ignore
-   * Component id (prop added by the SelectList component)
-   */
-  id: PropTypes.string.isRequired,
-
-  /**
-   * @private
-   * @ignore
-   * Callback to return value when the element is selected (prop added by the SelectList component) */
-  onSelect: PropTypes.func,
-
-  /**
-   * @private
-   * @ignore
-   * Position of the element in the list */
-  index: PropTypes.number,
-
-  /**
-   * @private
-   * @ignore
-   * True when option should be hidden from the view (prop added by the SelectList component) */
-  hidden: PropTypes.bool,
-
-  /**
-   * @private
-   * @ignore
-   * object containing CSS styles to be passed to the underlying DOM element */
-  style: PropTypes.object
+  "children": PropTypes.node,
+  "hidden": PropTypes.bool,
+  "id": PropTypes.string.isRequired,
+  "index": PropTypes.number,
+  "onSelect": PropTypes.func,
+  "style": PropTypes.object,
+  "text": PropTypes.string.isRequired,
+  "value": PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired
 };
+OptionRow.displayName = "OptionRow";
 export default OptionRow;

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

@@ -0,0 +1,6 @@
+import { OptionRowProps } from ".";
+interface StyledOptionRowProps extends Pick<OptionRowProps, "hidden"> {
+    isHighlighted?: boolean;
+}
+declare const StyledOptionRow: import("styled-components").StyledComponent<"tr", any, StyledOptionRowProps, never>;
+export default StyledOptionRow;

package/esm/components/select/select-list/index.d.ts

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

package/esm/components/select/select-list/index.js

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

package/esm/components/select/select-list/select-list-container.style.d.ts

@@ -0,0 +1,6 @@
+import { SelectListProps } from ".";
+interface StyledSelectListContainerProps extends Pick<SelectListProps, "isLoading"> {
+    maxHeight: number;
+}
+declare const StyledSelectListContainer: import("styled-components").StyledComponent<"div", any, StyledSelectListContainerProps, never>;
+export default StyledSelectListContainer;

package/esm/components/select/select-list/select-list-container.style.js

@@ -15,6 +15,7 @@ const StyledSelectListContainer = styled.div`
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
+  border-radius: var(--borderRadius050);
 
   ${({
   isLoading

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

@@ -0,0 +1,64 @@
+import React from "react";
+import { Side } from "@floating-ui/dom";
+export interface SelectListProps {
+    /** The ID for the parent <div> */
+    id?: string;
+    /** The Id of the label */
+    labelId?: string;
+    /** Child components (such as <Option>) */
+    children?: React.ReactNode;
+    /** Boolean to toggle where DatePicker is rendered in relation to the Date Input */
+    disablePortal?: boolean;
+    /** DOM element to position the dropdown menu list relative to */
+    anchorElement?: HTMLElement;
+    /** A callback for when a child is selected */
+    onSelect: (target: {
+        text?: string;
+        value?: string | Record<string, unknown>;
+        id?: string;
+        selectionType: string;
+    }) => void;
+    /** A callback for when the list should be closed */
+    onSelectListClose: () => void;
+    /** Text value to highlight an option */
+    filterText?: string;
+    /** Value of option to be highlighted on component render */
+    highlightedValue?: string | Record<string, unknown>;
+    /** True for default text button or a Button Component to be rendered */
+    listActionButton?: boolean | React.ReactNode;
+    /** Maximum list height - defaults to 180 */
+    listMaxHeight?: number;
+    /** A callback for when the Action Button is triggered */
+    onListAction?: (ev?: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    /** If true the loader animation is displayed below the last option */
+    isLoading?: boolean;
+    /** A callback that is triggered when a user scrolls to the bottom of the list */
+    onListScrollBottom?: () => void;
+    /** SelectList table header, should consist of multiple th elements. Works only in multiColumn mode */
+    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 */
+    flipEnabled?: boolean;
+    /** @private @ignore
+     * Hides the list (with CSS display: none) if not set
+     */
+    isOpen?: boolean;
+    /** array of selected values, if rendered as part of a MultiSelect */
+    multiselectValues?: string[] | Record<string, unknown>[];
+    /** Set this prop to enable a virtualised list of options. If it is not used then all options will be in the
+     * DOM at all times, which may cause performance problems on very large lists */
+    enableVirtualScroll?: boolean;
+    /** The number of options to render into the DOM at once, either side of the currently-visible ones.
+     * Higher values make for smoother scrolling but may impact performance.
+     * Only used if the `enableVirtualScroll` prop is set. */
+    virtualScrollOverscan?: number;
+    /** @private @ignore A callback for when a mouseDown event occurs on the component */
+    onMouseDown?: () => void;
+}
+declare const SelectList: React.ForwardRefExoticComponent<SelectListProps & React.RefAttributes<HTMLDivElement>>;
+export default SelectList;

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

@@ -13,15 +13,15 @@ import OptionRow from "../option-row/option-row.component";
 import getNextChildByText from "../utils/get-next-child-by-text";
 import getNextIndexByKey from "../utils/get-next-index-by-key";
 import isNavigationKey from "../utils/is-navigation-key";
-import ListActionButton from "../list-action-button/list-action-button.component";
+import ListActionButton from "../list-action-button";
 import StyledSelectListContainer from "./select-list-container.style";
 import Loader from "../../loader";
-import Option from "../option/option.component";
+import Option from "../option";
 import guid from "../../../__internal__/utils/helpers/guid";
 import SelectListContext from "../__internal__/select-list-context";
 const TABLE_HEADER_HEIGHT = 48;
 const SCROLL_OPTIONS = {
-  smoothScroll: false,
+  behavior: "auto",
   align: "end"
 };
 const SelectList = /*#__PURE__*/React.forwardRef(({
@@ -55,9 +55,9 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
   const [currentOptionsListIndex, setCurrentOptionsListIndex] = useState(-1);
   const [scrollbarWidth, setScrollbarWidth] = useState(0);
   const lastFilter = useRef("");
-  const listRef = useRef();
-  const tableRef = useRef();
-  const listActionButtonRef = useRef();
+  const listRef = useRef(null);
+  const tableRef = useRef(null);
+  const listActionButtonRef = useRef(null);
   const {
     blockScroll,
     allowScroll
@@ -88,11 +88,13 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
   }, [allowScroll, blockScroll, isOpen]);
   useLayoutEffect(() => {
     if (multiColumn) {
-      setScrollbarWidth(tableRef.current.offsetWidth - tableRef.current.clientWidth);
+      setScrollbarWidth(tableRef.current ? tableRef.current.offsetWidth - tableRef.current.clientWidth :
+      /* istanbul ignore next */
+      0);
     }
   }, [multiColumn]);
   const anchorRef = useMemo(() => ({
-    current: anchorElement
+    current: anchorElement || null
   }), [anchorElement]);
   const handleSelect = useCallback(optionData => {
     onSelect({ ...optionData,
@@ -103,7 +105,9 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
   // as that isn't absolutely guaranteed to never rerun when dependencies haven't changed.
 
   const setChildIds = () => {
-    childIdsRef.current = React.Children.map(children, () => guid());
+    childIdsRef.current = React.Children.map(children, () => guid()) ||
+    /* istanbul ignore next */
+    null;
   };
 
   if (((_childIdsRef$current = childIdsRef.current) === null || _childIdsRef$current === void 0 ? void 0 : _childIdsRef$current.length) !== React.Children.count(children)) {
@@ -112,7 +116,7 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
 
   const childIds = childIdsRef.current;
   const childrenList = useMemo(() => React.Children.toArray(children), [children]);
-  const optionChildrenList = useMemo(() => childrenList.filter(child => child.type === Option || child.type === OptionRow), [childrenList]);
+  const optionChildrenList = useMemo(() => childrenList.filter(child => /*#__PURE__*/React.isValidElement(child) && (child.type === Option || child.type === OptionRow)), [childrenList]);
   const {
     measureElement
   } = virtualizer;
@@ -131,7 +135,7 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     } = item;
     const child = childrenList[index];
 
-    if (!child) {
+    if (! /*#__PURE__*/React.isValidElement(child)) {
       return child;
     }
 
@@ -139,7 +143,9 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     const isOption = optionChildIndex > -1;
     const newProps = {
       index,
-      id: childIds[index],
+      id: childIds ? childIds[index] :
+      /* istanbul ignore next */
+      undefined,
       onSelect: handleSelect,
       hidden: isLoading && childrenList.length === 1,
       // these need to be inline styles rather than implemented in styled-components to avoid it generating thousands of classes
@@ -154,20 +160,20 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     };
     return /*#__PURE__*/React.cloneElement(child, newProps);
   });
-  const lastOptionIndex = findLastIndex(childrenList, child => child.type === Option || child.type === OptionRow);
+  const lastOptionIndex = findLastIndex(childrenList, child => /*#__PURE__*/React.isValidElement(child) && (child.type === Option || child.type === OptionRow));
   const getNextHighlightableItemIndex = useCallback((key, indexOfHighlighted) => {
     const lastIndex = lastOptionIndex;
     let nextIndex = getNextIndexByKey(key, indexOfHighlighted, lastIndex, isLoading);
     const nextElement = childrenList[nextIndex];
 
-    if (nextElement && nextElement.type !== Option && nextElement.type !== OptionRow) {
-      nextIndex = getNextHighlightableItemIndex(key, nextIndex, lastIndex);
+    if ( /*#__PURE__*/React.isValidElement(nextElement) && nextElement.type !== Option && nextElement.type !== OptionRow) {
+      nextIndex = getNextHighlightableItemIndex(key, nextIndex);
     }
 
     return nextIndex;
   }, [childrenList, lastOptionIndex, isLoading]);
   const getIndexOfMatch = useCallback(valueToMatch => {
-    return childrenList.findIndex(child => child.props.value === valueToMatch);
+    return childrenList.findIndex(child => /*#__PURE__*/React.isValidElement(child) && child.props.value === valueToMatch);
   }, [childrenList]);
   const highlightNextItem = useCallback(key => {
     let currentIndex = currentOptionsListIndex;
@@ -191,7 +197,9 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
       text,
       value,
       selectionType: "navigationKey",
-      id: childIds[nextIndex]
+      id: childIds ? childIds[nextIndex] :
+      /* istanbul ignore next */
+      undefined
     });
   }, [childrenList, currentOptionsListIndex, getIndexOfMatch, getNextHighlightableItemIndex, highlightedValue, onSelect, childIds]);
   const handleActionButtonTab = useCallback((event, isActionButtonFocused) => {
@@ -200,8 +208,10 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
         selectionType: "tab"
       });
     } else {
+      var _listActionButtonRef$;
+
       event.preventDefault();
-      listActionButtonRef.current.focus();
+      (_listActionButtonRef$ = listActionButtonRef.current) === null || _listActionButtonRef$ === void 0 ? void 0 : _listActionButtonRef$.focus();
     }
   }, [onSelect]);
   const focusOnAnchor = useCallback(() => {
@@ -227,7 +237,7 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
       event.preventDefault();
       const currentOption = childrenList[currentOptionsListIndex];
 
-      if (!currentOption) {
+      if (! /*#__PURE__*/React.isValidElement(currentOption)) {
         onSelectListClose();
         return;
       }
@@ -237,7 +247,9 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
         value
       } = currentOption.props;
       onSelect({
-        id: childIds[currentOptionsListIndex],
+        id: childIds ? childIds[currentOptionsListIndex] :
+        /* istanbul ignore next */
+        undefined,
         text,
         value,
         selectionType: "enterKey"
@@ -253,7 +265,7 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     }
   }, [onSelectListClose]);
   useModalManager({
-    open: isOpen,
+    open: !!isOpen,
     closeModal: handleEscapeKey,
     modalRef: listRef,
     triggerRefocusOnClose: false
@@ -270,15 +282,15 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     const keyboardEvent = "keydown";
     const listElement = listContainerRef.current;
     window.addEventListener(keyboardEvent, handleGlobalKeydown);
-    listElement.addEventListener("scroll", handleListScroll);
+    listElement === null || listElement === void 0 ? void 0 : listElement.addEventListener("scroll", handleListScroll);
     return function cleanup() {
       window.removeEventListener(keyboardEvent, handleGlobalKeydown);
-      listElement.removeEventListener("scroll", handleListScroll);
+      listElement === null || listElement === void 0 ? void 0 : listElement.removeEventListener("scroll", handleListScroll);
     };
   }, [handleGlobalKeydown, handleListScroll, listContainerRef]);
   useEffect(() => {
     if (!filterText || filterText === lastFilter.current) {
-      lastFilter.current = filterText;
+      lastFilter.current = filterText || "";
       return;
     }
 
@@ -351,9 +363,9 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
   };
   useLayoutEffect(() => {
     if (listActionButton && isOpen) {
-      var _listActionButtonRef$, _listActionButtonRef$2;
+      var _listActionButtonRef$2, _listActionButtonRef$3;
 
-      actionButtonHeight.current = ((_listActionButtonRef$ = listActionButtonRef.current) === null || _listActionButtonRef$ === void 0 ? void 0 : (_listActionButtonRef$2 = _listActionButtonRef$.parentElement) === null || _listActionButtonRef$2 === void 0 ? void 0 : _listActionButtonRef$2.offsetHeight) || 0;
+      actionButtonHeight.current = ((_listActionButtonRef$2 = listActionButtonRef.current) === null || _listActionButtonRef$2 === void 0 ? void 0 : (_listActionButtonRef$3 = _listActionButtonRef$2.parentElement) === null || _listActionButtonRef$3 === void 0 ? void 0 : _listActionButtonRef$3.offsetHeight) || 0;
     }
   }, [listActionButton, isOpen]);
 
@@ -390,7 +402,7 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     "data-element": "select-list"
   }, multiColumn ? {} : listBoxProps, {
     ref: listRef,
-    tabIndex: "-1",
+    tabIndex: -1,
     listHeight: multiColumn ? undefined : listHeight
   }), selectListContent), isLoading && loader(), listActionButton && /*#__PURE__*/React.createElement(ListActionButton, {
     ref: listActionButtonRef,
@@ -399,78 +411,35 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
   }))));
 });
 SelectList.propTypes = {
-  /** The ID for the parent <div> */
-  id: PropTypes.string,
-
-  /** The Id of the label */
-  labelId: PropTypes.string,
-
-  /** Child components (such as <Option>) */
-  children: PropTypes.node,
-
-  /** Boolean to toggle where DatePicker is rendered in relation to the Date Input */
-  disablePortal: PropTypes.bool,
-
-  /** DOM element to position the dropdown menu list relative to */
-  anchorElement: PropTypes.object,
-
-  /** A callback for when a child is selected */
-  onSelect: PropTypes.func.isRequired,
-
-  /** A callback for when the list should be closed */
-  onSelectListClose: PropTypes.func.isRequired,
-
-  /** Text value to highlight an option */
-  filterText: PropTypes.string,
-
-  /** Value of option to be highlighted on component render */
-  highlightedValue: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-
-  /** True for default text button or a Button Component to be rendered */
-  listActionButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.element]),
-
-  /** Maximum list height - defaults to 180 */
-  listMaxHeight: PropTypes.number,
-
-  /** A callback for when the Action Button is triggered */
-  onListAction: PropTypes.func,
-
-  /** If true the loader animation is displayed below the last option */
-  isLoading: PropTypes.bool,
-
-  /** A callback that is triggered when a user scrolls to the bottom of the list */
-  onListScrollBottom: PropTypes.func,
-
-  /** SelectList table header, should consist of multiple th elements. Works only in multiColumn mode */
-  tableHeader: PropTypes.node,
-
-  /** When true component will work in multi column mode, children should consist of OptionRow components in this mode */
-  multiColumn: PropTypes.bool,
-
-  /** Data role for loader component */
-  loaderDataRole: PropTypes.string,
-
-  /** Placement of the select list relative to the input element */
-  listPlacement: PropTypes.oneOf(["top", "bottom", "right", "left"]),
-
-  /** Use the opposite list placement if the set placement does not fit */
-  flipEnabled: PropTypes.bool,
-
-  /** @private @ignore
-   * Hides the list (with CSS display: none) if not set
-   */
-  isOpen: PropTypes.bool,
-
-  /** array of selected values, if rendered as part of a MultiSelect */
-  multiselectValues: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.object)]),
-
-  /** Set this prop to enable a virtualised list of options. If it is not used then all options will be in the
-   * DOM at all times, which may cause performance problems on very large lists */
-  enableVirtualScroll: PropTypes.bool,
-
-  /** The number of options to render into the DOM at once, either side of the currently-visible ones.
-   * Higher values make for smoother scrolling but may impact performance.
-   * Only used if the `enableVirtualScroll` prop is set. */
-  virtualScrollOverscan: PropTypes.number
+  "anchorElement": function (props, propName) {
+    if (props[propName] == null) {
+      return null;
+    } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
+      return new Error("Expected prop '" + propName + "' to be of type Element");
+    }
+  },
+  "children": PropTypes.node,
+  "disablePortal": PropTypes.bool,
+  "enableVirtualScroll": PropTypes.bool,
+  "filterText": PropTypes.string,
+  "flipEnabled": PropTypes.bool,
+  "highlightedValue": PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+  "id": PropTypes.string,
+  "isLoading": PropTypes.bool,
+  "isOpen": PropTypes.bool,
+  "labelId": PropTypes.string,
+  "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,
+  "onListScrollBottom": PropTypes.func,
+  "onMouseDown": PropTypes.func,
+  "onSelect": PropTypes.func.isRequired,
+  "onSelectListClose": PropTypes.func.isRequired,
+  "tableHeader": PropTypes.node,
+  "virtualScrollOverscan": PropTypes.number
 };
 export default SelectList;

package/esm/components/select/select-list/select-list.style.d.ts

@@ -0,0 +1,12 @@
+interface StyledSelectListProps {
+    listHeight?: number;
+}
+declare const StyledSelectList: import("styled-components").StyledComponent<"ul", any, StyledSelectListProps, never>;
+declare const StyledSelectLoaderContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledSelectListTable: import("styled-components").StyledComponent<"table", any, {}, never>;
+interface StyledSelectListTableHeaderProps {
+    scrollbarWidth: number;
+}
+declare const StyledSelectListTableHeader: import("styled-components").StyledComponent<"thead", any, StyledSelectListTableHeaderProps, never>;
+declare const StyledSelectListTableBody: import("styled-components").StyledComponent<"tbody", any, StyledSelectListProps, never>;
+export { StyledSelectList, StyledSelectLoaderContainer, StyledSelectListTable, StyledSelectListTableHeader, StyledSelectListTableBody, };

package/esm/components/select/select-list/select-list.style.js

@@ -41,8 +41,8 @@ const StyledSelectListTable = styled.table`
     width: 100%;
     table-layout: fixed;
   }
-`; // TODO (design-tokens): to match current style for border bottom colorsUtilityMajor100
-
+`;
+// TODO (design-tokens): to match current style for border bottom colorsUtilityMajor100
 const StyledSelectListTableHeader = styled.thead`
   border-bottom: 1px solid var(--colorsUtilityMajor050);
   position: sticky;

package/esm/components/select/select-textbox/index.d.ts

@@ -1 +1,2 @@
-export { default } from "./select-textbox";
+export { default } from "./select-textbox.component";
+export type { SelectTextboxProps, FormInputPropTypes, } from "./select-textbox.component";

package/esm/components/select/select-textbox/index.js

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

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

@@ -0,0 +1,81 @@
+import React from "react";
+import { CommonTextboxProps } from "../../textbox";
+import { ValidationProps } from "../../../__internal__/validations";
+export interface FormInputPropTypes extends ValidationProps, Omit<CommonTextboxProps, "onClick"> {
+    /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
+    adaptiveLabelBreakpoint?: number;
+    /** Prop to specify the aria-label attribute of the component input */
+    ariaLabel?: string;
+    /** Prop to specify the aria-labeledby property of the component input */
+    ariaLabelledby?: string;
+    /** If true the Component will be focused when rendered */
+    autoFocus?: boolean;
+    /** If true, the component will be disabled */
+    disabled?: boolean;
+    /** Id attribute of the input element */
+    id?: string;
+    /** The width of the input as a percentage */
+    inputWidth?: number;
+    /** Label content */
+    label?: string;
+    /** A message that the Help component will display */
+    labelHelp?: React.ReactNode;
+    /** When true label is inline */
+    labelInline?: boolean;
+    /** Label width */
+    labelWidth?: number;
+    /** Name attribute of the input element */
+    name?: string;
+    /** Specify a callback triggered on blur */
+    onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
+    /** Specify a callback triggered on change */
+    onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Specify a callback triggered on click */
+    onClick?: (ev: React.MouseEvent<HTMLInputElement>) => void;
+    /** Specify a callback triggered on focus */
+    onFocus?: (ev: React.FocusEvent<HTMLInputElement>) => void;
+    /** pecify a callback triggered on keuyDown */
+    onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement>) => void;
+    /** Placeholder string to be displayed in input */
+    placeholder?: string;
+    /** Flag to configure component as mandatory */
+    required?: boolean;
+    /** If true, the component will be read-only */
+    readOnly?: boolean;
+    /** Size of an input */
+    size?: "small" | "medium" | "large";
+    /**
+     * Id of the element containing the currently displayed value
+     * to be read by voice readers
+     * @private
+     * @ignore
+     */
+    accessibilityLabelId?: string;
+    /**
+     * Label id passed from Select component
+     * @private
+     * @ignore
+     *
+     */
+    labelId?: string;
+}
+export interface SelectTextboxProps extends FormInputPropTypes {
+    /** Id attribute of the select list */
+    "aria-controls"?: string;
+    /** Value to be displayed in the Textbox */
+    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?: string | Record<string, unknown> | string[] | Record<string, unknown>[];
+    /** @private @ignore */
+    textboxRef?: HTMLInputElement | null;
+    /** @private @ignore */
+    transparent?: boolean;
+    /** @private @ignore */
+    activeDescendantId?: string;
+}
+declare const SelectTextbox: React.ForwardRefExoticComponent<SelectTextboxProps & React.RefAttributes<HTMLInputElement>>;
+export default SelectTextbox;