carbon-react 118.0.0 → 118.1.1

package/esm/components/select/utils/get-next-child-by-text.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+/**
+ * Recreates HTML Select element functionality of finding first match based on typed characters
+ * */
+export default function getNextChildByText(textToMatch: string, arrayOfChildren: React.ReactElement[], previousIndex?: number): React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/esm/components/select/utils/get-next-child-by-text.js

@@ -1,17 +1,9 @@
-/**
- * Recreates HTML Select element functionality of finding first match based on typed characters
- * */
-export default function getNextChildByText(textToMatch, arrayOfChildren, previousIndex = -1) {
-  const lastCharacter = textToMatch.slice(-1);
-  const isTheSameCharacter = textToMatch.split("").every(character => character === lastCharacter);
-  let indexOfMatch = findElementStartingWithText(textToMatch, arrayOfChildren);
-  const listOfMatches = getListOfMatches(arrayOfChildren, lastCharacter);
-
-  if (isTheSameCharacter && listOfMatches.length > 1) {
-    indexOfMatch = getIndexOfNextElement(listOfMatches, previousIndex);
-  }
+function findElementStartingWithText(textToMatch, list) {
+  return list.findIndex(child => {
+    var _child$props$text;
 
-  return arrayOfChildren[indexOfMatch];
+    return (_child$props$text = child.props.text) === null || _child$props$text === void 0 ? void 0 : _child$props$text.toLowerCase().startsWith(textToMatch.toLowerCase());
+  });
 }
 
 function getListOfMatches(arrayOfChildren, lastCharacter) {
@@ -33,9 +25,20 @@ function getIndexOfNextElement(listOfMatches, previousIndex) {
 
   return listOfMatches[listOfMatches.indexOf(previousIndex) + 1];
 }
+/**
+ * Recreates HTML Select element functionality of finding first match based on typed characters
+ * */
 
-function findElementStartingWithText(textToMatch, list) {
-  return list.findIndex(child => {
-    return child.props.text && child.props.text.toLowerCase().startsWith(textToMatch.toLowerCase());
-  });
+
+export default function getNextChildByText(textToMatch, arrayOfChildren, previousIndex = -1) {
+  const lastCharacter = textToMatch.slice(-1);
+  const isTheSameCharacter = textToMatch.split("").every(character => character === lastCharacter);
+  let indexOfMatch = findElementStartingWithText(textToMatch, arrayOfChildren);
+  const listOfMatches = getListOfMatches(arrayOfChildren, lastCharacter);
+
+  if (isTheSameCharacter && listOfMatches.length > 1) {
+    indexOfMatch = getIndexOfNextElement(listOfMatches, previousIndex);
+  }
+
+  return arrayOfChildren[indexOfMatch];
 }

package/esm/components/select/utils/get-next-index-by-key.d.ts

@@ -0,0 +1,2 @@
+export declare const PAGE_SIZE = 4;
+export default function getNextIndexByKey(key: string, currentIndex: number, lastIndex: number, isLoading?: boolean): number;

package/esm/components/select/utils/highlight-part-of-text.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export default function highlightPartOfTextRecursive(child: React.ReactNode, partToHighlight: string): React.ReactNode;

package/esm/components/select/utils/highlight-part-of-text.js

@@ -13,10 +13,11 @@ function highlightPartOfText(text, partToHighlight) {
 
   const precedingText = text.substr(0, indexOfFirstMatch);
   const matchingText = text.substr(indexOfFirstMatch, partToHighlight.length);
-  let followingText = text.substr(indexOfFirstMatch + partToHighlight.length, text.length);
+  const followingText = text.substr(indexOfFirstMatch + partToHighlight.length, text.length);
+  let followingTextNode = followingText;
 
   if (followingText.length >= partToHighlight.length) {
-    followingText = highlightPartOfText(followingText, partToHighlight);
+    followingTextNode = highlightPartOfText(followingText, partToHighlight);
   }
 
   const newValue = [/*#__PURE__*/React.createElement("span", {
@@ -25,7 +26,7 @@ function highlightPartOfText(text, partToHighlight) {
     key: "match"
   }, matchingText), /*#__PURE__*/React.createElement("span", {
     key: "following"
-  }, followingText)];
+  }, followingTextNode)];
   return newValue;
 }
 
@@ -33,6 +34,12 @@ export default function highlightPartOfTextRecursive(child, partToHighlight) {
   if (typeof child === "string") {
     return highlightPartOfText(child, partToHighlight);
   }
+  /* istanbul ignore if */
+
+
+  if (! /*#__PURE__*/React.isValidElement(child)) {
+    return child;
+  }
 
   const highlightedChildren = React.Children.map(child.props.children, grandChild => highlightPartOfTextRecursive(grandChild, partToHighlight));
   return /*#__PURE__*/React.cloneElement(child, {

package/esm/components/select/utils/is-expected-option.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function isExpectedOption(element: React.ReactElement, expectedValue?: string | Record<string, unknown> | null): boolean;

package/esm/components/select/utils/is-expected-option.js

@@ -1,4 +1,4 @@
-import Option from "../option/option.component";
+import Option from "../option";
 import OptionRow from "../option-row/option-row.component";
 import isExpectedValue from "./is-expected-value";
 export default function isExpectedOption(element, expectedValue) {

package/esm/components/select/utils/is-expected-value.d.ts

@@ -0,0 +1 @@
+export default function isExpectedValue(currentValue: string | Record<string, unknown>, expectedValue: string | Record<string, unknown>): boolean;

package/esm/components/select/utils/is-expected-value.js

@@ -1,5 +1,5 @@
 export default function isExpectedValue(currentValue, expectedValue) {
-  if (typeof currentValue === "object" && currentValue.id !== null && currentValue.id !== undefined) {
+  if (typeof currentValue === "object" && currentValue.id !== null && currentValue.id !== undefined && typeof expectedValue === "object") {
     return currentValue.id === expectedValue.id;
   }
 

package/esm/components/select/utils/is-navigation-key.d.ts

@@ -0,0 +1 @@
+export default function isNavigationKey(key: string): boolean;

package/esm/components/select/utils/matching-text.style.d.ts

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

package/esm/components/select/utils/with-filter.hoc.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+interface WrappedComponentProps {
+    filterText?: string;
+    isLoading?: boolean;
+    multiColumn?: boolean;
+    tableHeader?: React.ReactNode;
+    children?: React.ReactNode;
+}
+export interface FilteredComponentProps extends WrappedComponentProps {
+    noResultsMessage?: string;
+}
+/** Filters wrapped component children based on provided filter text and highlights matching content */
+declare const withFilter: <T extends WrappedComponentProps>(WrappedComponent: React.ComponentType<T>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<FilteredComponentProps & T> & React.RefAttributes<HTMLDivElement>>;
+export default withFilter;

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

@@ -1,11 +1,10 @@
 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); }
 
 import React, { useCallback } from "react";
-import PropTypes from "prop-types";
 import useLocale from "../../../hooks/__internal__/useLocale";
 import StyledOptionRow from "../option-row/option-row.style";
 import StyledOption from "../option/option.style";
-import Option from "../option/option.component";
+import Option from "../option";
 import OptionRow from "../option-row/option-row.component";
 import highlightPartOfText from "./highlight-part-of-text";
 
@@ -25,6 +24,11 @@ const filterOptions = (option, filterText) => {
 const filterOptionRows = (optionRow, filterText) => {
   const cells = React.Children.toArray(optionRow.props.children);
   const hasText = cells.find(cell => {
+    /* istanbul ignore if */
+    if (! /*#__PURE__*/React.isValidElement(cell)) {
+      return false;
+    }
+
     if (typeof cell.props.children === "string") {
       const processedText = cell.props.children.toLowerCase();
       const processedValue = filterText.toLowerCase();
@@ -43,24 +47,63 @@ const filterOptionRows = (optionRow, filterText) => {
 };
 
 const filterChildren = filterText => children => {
-  // eslint-disable-next-line consistent-return
   const filteredChildren = React.Children.map(children, child => {
+    /* istanbul ignore if */
+    if (! /*#__PURE__*/React.isValidElement(child)) {
+      return null;
+    }
+
     if (child.type === Option) {
       return filterOptions(child, filterText);
     }
+    /* istanbul ignore else */
+
 
     if (child.type === OptionRow) {
       return filterOptionRows(child, filterText);
     }
+    /* istanbul ignore next */
+
 
     return null;
   });
   if (React.Children.count(filteredChildren)) return filteredChildren;
   return null;
 };
-/** Filters wrapped component children based on provided filter text and highlights matching content */
 
+function addHighlightedContent(filteredElements, filterText) {
+  return React.Children.map(filteredElements, child => {
+    let highlightedContent;
+    /* istanbul ignore if */
+
+    if (! /*#__PURE__*/React.isValidElement(child)) {
+      return child;
+    }
+
+    if (child.type === Option) {
+      highlightedContent = highlightPartOfText(child.props.text, filterText);
+    }
+
+    if (child.type === OptionRow) {
+      highlightedContent = React.Children.map(child.props.children, cell => {
+        /* istanbul ignore if */
+        if (! /*#__PURE__*/React.isValidElement(cell)) {
+          return cell;
+        }
+
+        return /*#__PURE__*/React.cloneElement(cell, {
+          children: highlightPartOfText(cell.props.children, filterText)
+        });
+      });
+    }
+
+    return /*#__PURE__*/React.cloneElement(child, {
+      children: highlightedContent
+    });
+  });
+}
 
+/** Filters wrapped component children based on provided filter text and highlights matching content */
 const withFilter = WrappedComponent => {
   const FilteredComponent = /*#__PURE__*/React.forwardRef(({
     children,
@@ -84,7 +127,9 @@ const withFilter = WrappedComponent => {
           if (multiColumn) {
             var _tableHeader$props;
 
-            const colSpan = React.Children.count(tableHeader === null || tableHeader === void 0 ? void 0 : (_tableHeader$props = tableHeader.props) === null || _tableHeader$props === void 0 ? void 0 : _tableHeader$props.children);
+            const colSpan = /*#__PURE__*/React.isValidElement(tableHeader) ?
+            /* istanbul ignore next */
+            React.Children.count(tableHeader === null || tableHeader === void 0 ? void 0 : (_tableHeader$props = tableHeader.props) === null || _tableHeader$props === void 0 ? void 0 : _tableHeader$props.children) : 1;
             return /*#__PURE__*/React.createElement(StyledOptionRow, null, /*#__PURE__*/React.createElement("td", {
               style: {
                 fontWeight: "normal"
@@ -101,45 +146,18 @@ const withFilter = WrappedComponent => {
 
       return children;
     }, [children, filterText, isLoading, multiColumn, noResultsMessage, tableHeader, l]);
-    return /*#__PURE__*/React.createElement(WrappedComponent, _extends({
-      filterText: filterText,
-      isLoading: isLoading,
-      multiColumn: multiColumn,
-      tableHeader: tableHeader
-    }, props, {
+    const wrappedComponentProps = {
+      filterText,
+      isLoading,
+      multiColumn,
+      tableHeader,
+      ...props
+    };
+    return /*#__PURE__*/React.createElement(WrappedComponent, _extends({}, wrappedComponentProps, {
       ref: forwardedRef
     }), getFilteredChildren());
   });
-
-  function addHighlightedContent(filteredElements, filterText) {
-    return React.Children.map(filteredElements, child => {
-      let highlightedContent;
-
-      if (child.type === Option) {
-        highlightedContent = highlightPartOfText(child.props.text, filterText);
-      }
-
-      if (child.type === OptionRow) {
-        highlightedContent = React.Children.map(child.props.children, cell => /*#__PURE__*/React.cloneElement(cell, {
-          children: highlightPartOfText(cell.props.children, filterText)
-        }));
-      }
-
-      return /*#__PURE__*/React.cloneElement(child, {
-        children: highlightedContent
-      });
-    });
-  }
-
-  FilteredComponent.propTypes = {
-    forwardedRef: PropTypes.object,
-    children: PropTypes.node,
-    filterText: PropTypes.string,
-    noResultsMessage: PropTypes.string,
-    isLoading: PropTypes.bool,
-    multiColumn: PropTypes.bool,
-    tableHeader: PropTypes.node
-  };
+  FilteredComponent.displayName = "FilteredComponent";
   return FilteredComponent;
 };
 

package/esm/components/tabs/__internal__/tab-title/tab-title.component.js

@@ -190,6 +190,7 @@ const TabTitle = /*#__PURE__*/React.forwardRef(({
     href: href,
     target: "_blank"
   }), titleChildren) : /*#__PURE__*/React.createElement(StyledTabTitleButton, _extends({}, titleWrapperProps, {
+    type: "button",
     ref: ref
   }), titleChildren);
   return /*#__PURE__*/React.createElement(TooltipProvider, {

package/lib/__internal__/filter-object-properties/filter-object-properties.d.ts

@@ -1 +1 @@
-export default function filterObjectProperties(originalObject: any, keyList: any): {};
+export default function filterObjectProperties<T extends object>(originalObject: T, keyList: string[]): Partial<T>;

package/lib/components/button-minor/button-minor.style.js

@@ -32,6 +32,14 @@ function makeColors(color) {
 }
 
 const StyledButtonMinor = (0, _styledComponents.default)(_button.default)`
+  ${({
+  children
+}) => !children && (0, _styledComponents.css)`
+      ${_icon.default} {
+        position: absolute;
+      }
+    `}
+
   ${({
   buttonType,
   destructive,

package/lib/components/pager/pager.component.js

@@ -121,12 +121,12 @@ const Pager = ({
       onPrevious(e);
     }
   }, [page, onPrevious]);
-  const handleOnPagination = (0, _react.useCallback)(e => {
-    setValue(e.target.value);
-    setCurrentPageSize(+e.target.value);
-    onPagination(1, +e.target.value, "page-select");
+  const handleOnPagination = (0, _react.useCallback)(selectedValue => {
+    setValue(selectedValue);
+    setCurrentPageSize(+selectedValue);
+    onPagination(1, +selectedValue, "page-select");
   }, [onPagination]);
-  const handleKeyDown = (0, _react.useCallback)(e => _events.default.isEnterKey(e) && handleOnPagination(e), [handleOnPagination]);
+  const handleKeyDown = (0, _react.useCallback)(e => _events.default.isEnterKey(e) && handleOnPagination(e.target.value), [handleOnPagination]);
 
   const sizeSelector = () => {
     return /*#__PURE__*/_react.default.createElement(_pager.StyledSelectContainer, null, /*#__PURE__*/_react.default.createElement(_select.Select, {

package/lib/components/pill/pill.component.d.ts

@@ -14,11 +14,13 @@ export interface PillProps extends StyledPillProps {
     /** Callback function for when the pill is clicked. */
     onClick?: (ev: React.MouseEvent<HTMLSpanElement>) => void;
     /** Callback function for when the remove icon is clicked. */
-    onDelete?: (ev: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
+    onDelete?: (ev?: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
     /** Sets the type of pill in use. */
     pillRole?: "tag" | "status";
     /** Sets custom aria-label attribute on the remove button */
     ariaLabelOfRemoveButton?: string;
+    /** @private @ignore title attribute passed down to underlying element */
+    title?: string;
 }
 export declare const Pill: ({ wrapText, borderColor, colorVariant, children, fill, maxWidth, onClick, onDelete, pillRole, size, ariaLabelOfRemoveButton, ...rest }: PillProps) => JSX.Element;
 export default Pill;

package/lib/components/pill/pill.component.js

@@ -262,6 +262,7 @@ Pill.propTypes = {
       "smallOverlay": _propTypes.default.number.isRequired
     })
   }),
+  "title": _propTypes.default.string,
   "wrapText": _propTypes.default.bool
 };
 var _default = Pill;

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

@@ -0,0 +1,7 @@
+import React from "react";
+declare type SelectListContextProps = {
+    currentOptionsListIndex?: number;
+    multiselectValues?: (string | Record<string, unknown>)[];
+};
+declare const SelectListContext: React.Context<SelectListContextProps>;
+export default SelectListContext;

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

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

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

@@ -0,0 +1,15 @@
+"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(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

@@ -0,0 +1,6 @@
+{
+  "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

@@ -0,0 +1,33 @@
+import React from "react";
+export interface SelectTextProps {
+    /** If true the Component will be disabled */
+    disabled?: boolean;
+    /** Value to be displayed */
+    formattedValue?: string;
+    /** Label id passed from Select component  */
+    labelId?: string;
+    /** If true, the list is displayed */
+    isOpen?: boolean;
+    /** Callback function for when the Select Textbox loses it's focus. */
+    onBlur?: (ev: React.FocusEvent<HTMLElement>) => void;
+    /** Callback function for when the component is clicked. */
+    onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
+    /** Callback function for when the Select Textbox is focused. */
+    onFocus?: (ev: React.FocusEvent<HTMLElement>) => void;
+    /** Callback function for when the key is pressed when focused on Select Text. */
+    onKeyDown?: (ev: React.KeyboardEvent<HTMLElement>) => void;
+    /** 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;
+    /** Id of the Select Text element */
+    textId?: string;
+    /** Component size */
+    size?: "small" | "medium" | "large";
+}
+declare const SelectText: ({ disabled, formattedValue, onClick, onKeyDown, onMouseDown, placeholder, readOnly, textId, transparent, size, }: SelectTextProps) => JSX.Element;
+export default SelectText;

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

@@ -26,58 +26,38 @@ const SelectText = ({
   size = "medium"
 }) => {
   const hasPlaceholder = !disabled && !readOnly && !formattedValue;
-
-  function handleClick(event) {
-    onClick(event);
-  }
-
   return /*#__PURE__*/_react.default.createElement(_selectText.default, {
     "aria-hidden": true,
     "data-element": "select-text",
     disabled: disabled,
     hasPlaceholder: hasPlaceholder,
     id: textId,
-    onClick: handleClick,
+    onClick: onClick,
     onKeyDown: onKeyDown,
     onMouseDown: onMouseDown,
     readOnly: readOnly,
     role: "button",
-    tabIndex: "-1",
+    tabIndex: -1,
     transparent: transparent,
     size: size
   }, hasPlaceholder ? placeholder : formattedValue);
 };
 
 SelectText.propTypes = {
-  /** If true the Component will be disabled */
-  disabled: _propTypes.default.bool,
-
-  /** Value to be displayed */
-  formattedValue: _propTypes.default.string,
-
-  /** Callback function for when the component is clicked. */
-  onClick: _propTypes.default.func,
-
-  /** Callback function for when the key is pressed when focused on Select Text. */
-  onKeyDown: _propTypes.default.func,
-
-  /** Callback function for when the left mouse key is pressed when focused on Select Text. */
-  onMouseDown: _propTypes.default.func,
-
-  /** Placeholder string to be displayed when formattedValue is empty */
-  placeholder: _propTypes.default.string,
-
-  /** If true the Component will be read-only */
-  readOnly: _propTypes.default.bool,
-
-  /** If true the component has no border and a transparent background */
-  transparent: _propTypes.default.bool,
-
-  /** Id of the Select Text element */
-  textId: _propTypes.default.string,
-
-  /** Component size */
-  size: _propTypes.default.string
+  "disabled": _propTypes.default.bool,
+  "formattedValue": _propTypes.default.string,
+  "isOpen": _propTypes.default.bool,
+  "labelId": _propTypes.default.string,
+  "onBlur": _propTypes.default.func,
+  "onClick": _propTypes.default.func,
+  "onFocus": _propTypes.default.func,
+  "onKeyDown": _propTypes.default.func,
+  "onMouseDown": _propTypes.default.func,
+  "placeholder": _propTypes.default.string,
+  "readOnly": _propTypes.default.bool,
+  "size": _propTypes.default.oneOf(["large", "medium", "small"]),
+  "textId": _propTypes.default.string,
+  "transparent": _propTypes.default.bool
 };
 var _default = SelectText;
 exports.default = _default;

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

@@ -1,2 +1,7 @@
+import { SelectTextProps } from ".";
+interface StyledSelectTextProps extends Pick<SelectTextProps, "disabled" | "readOnly" | "transparent"> {
+    hasPlaceholder: boolean;
+    size: NonNullable<SelectTextProps["size"]>;
+}
+declare const StyledSelectText: import("styled-components").StyledComponent<"span", any, StyledSelectTextProps, never>;
 export default StyledSelectText;
-declare const StyledSelectText: import("styled-components").StyledComponent<"span", any, {}, never>;

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

@@ -0,0 +1,65 @@
+import React from "react";
+import { Side } from "@floating-ui/dom";
+import { ButtonProps } from "../../button";
+import { FormInputPropTypes } from "../select-textbox";
+export interface FilterableSelectProps extends Omit<FormInputPropTypes, "defaultValue" | "value"> {
+    /** Prop to specify the aria-label attribute of the component input */
+    "aria-label"?: string;
+    /** Prop to specify the aria-labeledby property of the component input */
+    "aria-labelledby"?: string;
+    /** Identifier used for testing purposes, applied to the root element of the component. */
+    "data-component"?: string;
+    /** Identifier used for testing purposes, applied to the root element of the component. */
+    "data-element"?: string;
+    /** Identifier used for testing purposes, applied to the root element of the component. */
+    "data-role"?: string;
+    /** Child components (such as Option or OptionRow) for the SelectList */
+    children: React.ReactNode;
+    /** The default selected value(s), when the component is operating in uncontrolled mode */
+    defaultValue?: string | Record<string, unknown>;
+    /** Boolean to toggle where SelectList is rendered in relation to the Select Input */
+    disablePortal?: boolean;
+    /** If true the loader animation is displayed in the option list */
+    isLoading?: boolean;
+    /** True for default text button or a Button Component to be rendered */
+    listActionButton?: boolean | React.ReactElement<ButtonProps>;
+    /** When true component will work in multi column mode.
+     * Children should consist of OptionRow components in this mode
+     */
+    multiColumn?: boolean;
+    /** A custom message to be displayed when any option does not match the filter text */
+    noResultsMessage?: string;
+    /** A custom callback for when the input text changes */
+    onFilterChange?: (filterText: string) => void;
+    /** A custom callback for when the dropdown menu opens */
+    onOpen?: () => void;
+    /** A callback for when the Action Button is triggered */
+    onListAction?: () => void;
+    /** A callback that is triggered when a user scrolls to the bottom of the list */
+    onListScrollBottom?: () => void;
+    /** If true the Component opens on focus */
+    openOnFocus?: boolean;
+    /** SelectList table header, should consist of multiple th elements.
+     * Works only in multiColumn mode
+     */
+    tableHeader?: React.ReactNode;
+    /** The selected value(s), when the component is operating in controlled mode */
+    value?: string | Record<string, unknown>;
+    /** Overrides the default tooltip position */
+    tooltipPosition?: "top" | "bottom" | "left" | "right";
+    /** Maximum list height - defaults to 180 */
+    listMaxHeight?: number;
+    /** Placement of the select list in relation to the input element */
+    listPlacement?: Side;
+    /** Use the opposite list placement if the set placement does not fit */
+    flipEnabled?: boolean;
+    /** Set this prop to enable a virtualised list of options. If it is not used then all options will be in the
+     * 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;
+}
+export declare const FilterableSelect: React.ForwardRefExoticComponent<FilterableSelectProps & React.RefAttributes<unknown>>;
+export default FilterableSelect;