@splunk/react-ui 5.0.0-beta.3 → 5.0.0-beta.4

package/types/src/FormRows/docs/examples/Menu.d.ts

@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import { FormRowsRequestMoveHandler, RowRequestRemoveHandler } from '@splunk/react-ui/FormRows';
 import { SelectChangeHandler } from '@splunk/react-ui/Select';
-declare class Menu extends Component<{}, {
+declare class Menu extends Component<object, {
     items: React.ReactElement[];
 }> {
-    constructor(props: {});
+    constructor(props: object);
     handleRequestAdd: SelectChangeHandler;
     handleRequestMove: FormRowsRequestMoveHandler;
     handleRequestRemove: RowRequestRemoveHandler;

package/types/src/FormRows/docs/examples/ReorderOnly.d.ts

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import { FormRowsRequestMoveHandler } from '@splunk/react-ui/FormRows';
-declare class ReorderOnly extends Component<{}, {
+declare class ReorderOnly extends Component<object, {
     items: React.ReactElement[];
 }> {
-    constructor(props: {});
+    constructor(props: object);
     handleRequestMove: FormRowsRequestMoveHandler;
     render(): React.JSX.Element;
 }

package/types/src/Image/Image.d.ts

@@ -26,8 +26,6 @@ interface ImagePropsBase {
     elementRef?: React.Ref<HTMLDivElement>;
     /** Show the component in an error state. */
     error?: boolean;
-    /** The max-height of the preview in pixels. */
-    maxHeight?: number;
     /** A callback for when the image changes. The function is passed an
      * object containing two keys: `filename` and `imageDataURI`. Both are
      * `null` if the image was removed. */
@@ -38,7 +36,7 @@ declare const isAllowedFilename: (filename: string, allowExtensions: string[]) =
 /**
  * Image provides the ability to accept image files and present a preview of the image.
  */
-declare function Image({ allowExtensions, defaultFilename: defaultFilenameProp, defaultImageDataURI, disabled, error, maxHeight, onImageChange, ...otherProps }: ImageProps): React.JSX.Element;
+declare function Image({ allowExtensions, defaultFilename: defaultFilenameProp, defaultImageDataURI, disabled, error, onImageChange, ...otherProps }: ImageProps): React.JSX.Element;
 declare namespace Image {
     var propTypes: {
         allowExtensions: PropTypes.Requireable<(string | null | undefined)[]>;
@@ -48,7 +46,6 @@ declare namespace Image {
         dropAnywhere: PropTypes.Requireable<boolean>;
         elementRef: PropTypes.Requireable<object>;
         error: PropTypes.Requireable<boolean>;
-        maxHeight: PropTypes.Requireable<number>;
         onImageChange: PropTypes.Requireable<(...args: any[]) => any>;
     };
 }

package/types/src/JSONTree/docs/examples/Events.d.ts

@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
 import { JSONTreeClickValueHandler, JSONTreeClickKeyHandler } from '@splunk/react-ui/JSONTree';
-declare class Events extends Component<{}, {
+declare class Events extends Component<object, {
     key: string;
     keyPath?: (string | number)[];
     value: string;
 }> {
-    constructor(props: {});
+    constructor(props: object);
     onClickJSONValue: JSONTreeClickValueHandler;
     onClickJSONKey: JSONTreeClickKeyHandler;
     render(): React.JSX.Element;

package/types/src/Layout/Layout.d.ts

@@ -20,3 +20,4 @@ export declare namespace Layout {
     };
 }
 export default Layout;
+export type { LayoutProps, LayoutPropsBase };

package/types/src/Link/icons/External.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-declare const External: import("styled-components").StyledComponent<({ children, variant, ...otherprops }: import("@splunk/react-icons/ArrowSquareTopRightInset").IconBaseProps) => import("react").JSX.Element | null, any, {}, never>;
+declare const External: import("styled-components").StyledComponent<({ children, variant, ...otherprops }: import("@splunk/react-icons/ArrowSquareTopRightInset").IconBaseProps) => React.JSX.Element | null, any, import("@splunk/themes").OptionalThemedProps<import("@splunk/themes").AnyTheme>, never>;
 export default External;

package/types/src/Menu/Divider.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ComponentProps } from '../utils/types';
-type DividerProps = ComponentProps<{}, 'div'>;
+type DividerProps = ComponentProps<object, 'div'>;
 /**
  * A non-interactive menu item used to visually separate groups of items in the menu.
  */

package/types/src/Menu/MenuContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface MenuContextValue {
     role?: string;
     preventFocus?: boolean;

package/types/src/MessageBar/MessageBar.d.ts

@@ -6,6 +6,10 @@ interface MessageBarPropsBase {
      * Text is required and should be concise.
      */
     children: React.ReactNode;
+    /**
+     * A React ref which is set to the DOM element when the component mounts and null when it unmounts.
+     */
+    elementRef?: React.Ref<HTMLDivElement>;
     /**
      * Includes a close button. Always consider including a close button.
      */
@@ -16,7 +20,7 @@ interface MessageBarPropsBase {
     type: 'info' | 'warning' | 'error' | 'success';
 }
 type MessageBarProps = ComponentProps<MessageBarPropsBase, 'div'>;
-declare function MessageBar({ children, type, onRequestClose, ...otherProps }: MessageBarProps): React.JSX.Element;
+declare function MessageBar({ children, elementRef, onRequestClose, type, ...otherProps }: MessageBarProps): React.JSX.Element;
 declare namespace MessageBar {
     var propTypes: {
         children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;

package/types/src/Modal/ModalContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ModalRequestCloseHandler } from './Modal';
 export interface ModalContext {
     divider?: 'header' | 'footer' | 'both' | 'none';

package/types/src/Multiselect/Compact.d.ts

@@ -1,9 +1,8 @@
-import React, { Component } from 'react';
-import { Divider, Heading } from '@splunk/react-ui/Menu';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { MultiselectChangeHandler, MultiselectFilterChangeHandler, MultiselectScrollBottomHandler } from './Multiselect';
-import Option from './Option';
 import { SelectBaseProps } from '../Select/SelectBase';
-import { ClassComponentProps } from '../utils/types';
+import { ComponentProps } from '../utils/types';
 interface CompactPropsBase {
     animateLoading?: boolean;
     /**
@@ -151,23 +150,49 @@ interface CompactPropsBase {
     /** @private */
     toggle?: SelectBaseProps['toggle'];
 }
-declare const defaultProps: Required<Pick<CompactPropsBase, 'allowNewValues' | 'animateLoading' | 'defaultPlacement' | 'disabled' | 'inline' | 'isLoadingOptions' | 'menuStyle' | 'noOptionsMessage' | 'placeholder' | 'showSelectedValuesFirst' | 'tabConfirmsNewValue'>>;
-type CompactProps = ClassComponentProps<CompactPropsBase, typeof defaultProps, 'button'>;
-interface CompactState {
-    activeIndex: number;
-    filterKeyword: string;
-    open: boolean;
-    textHasFocus: boolean;
-    topValues: (string | number | boolean)[];
-    values: (string | number | boolean)[];
-}
-declare class Compact extends Component<CompactProps, CompactState> {
-    static propTypes: React.WeakValidationMap<CompactProps>;
-    static defaultProps: Required<Pick<CompactPropsBase, "placeholder" | "disabled" | "inline" | "defaultPlacement" | "animateLoading" | "noOptionsMessage" | "menuStyle" | "allowNewValues" | "isLoadingOptions" | "showSelectedValuesFirst" | "tabConfirmsNewValue">>;
-    static Option: typeof Option;
-    static Divider: typeof Divider;
-    static Heading: typeof Heading;
-    render(): React.JSX.Element;
+type CompactProps = ComponentProps<CompactPropsBase, 'button'>;
+declare function Compact({ allowNewValues, animateLoading, children, controlledFilter, defaultPlacement, defaultValues, describedBy, disabled, elementRef, error, filter, footerMessage, inline, inputId, inputRef, isLoadingOptions, labelledBy, loadingMessage, menuStyle, name, noOptionsMessage, onChange, onClose, onFilterChange, onOpen, onScroll, onScrollBottom, placeholder, repositionMode, selectAllAppearance, showSelectedValuesFirst, tabConfirmsNewValue, values, virtualization, ...otherProps }: CompactProps): React.JSX.Element;
+declare namespace Compact {
+    var propTypes: {
+        allowNewValues: PropTypes.Requireable<boolean>;
+        animateLoading: PropTypes.Requireable<boolean>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        controlledFilter: PropTypes.Requireable<boolean>;
+        defaultPlacement: PropTypes.Requireable<string>;
+        defaultValues: PropTypes.Requireable<any[]>;
+        describedBy: PropTypes.Requireable<string>;
+        disabled: PropTypes.Requireable<boolean>;
+        elementRef: PropTypes.Requireable<object>;
+        error: PropTypes.Requireable<boolean>;
+        filter: PropTypes.Requireable<string | boolean>;
+        footerMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        inline: PropTypes.Requireable<boolean>;
+        inputId: PropTypes.Requireable<string>;
+        inputRef: PropTypes.Requireable<object>;
+        isLoadingOptions: PropTypes.Requireable<boolean>;
+        labelledBy: PropTypes.Requireable<string>;
+        loadingMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        menuStyle: PropTypes.Requireable<object>;
+        name: PropTypes.Requireable<string>;
+        noOptionsMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        onFilterChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onOpen: PropTypes.Requireable<(...args: any[]) => any>;
+        onScroll: PropTypes.Requireable<(...args: any[]) => any>;
+        onScrollBottom: PropTypes.Requireable<(...args: any[]) => any>;
+        placeholder: PropTypes.Requireable<string>;
+        repositionMode: PropTypes.Requireable<string>;
+        selectAllAppearance: PropTypes.Requireable<string>;
+        showSelectedValuesFirst: PropTypes.Requireable<string>;
+        tabConfirmsNewValue: PropTypes.Requireable<boolean>;
+        values: PropTypes.Requireable<any[]>;
+        /** @private */
+        virtualization: PropTypes.Requireable<number>;
+    };
+    var Option: typeof import("./Option").default;
+    var Divider: typeof import("@splunk/react-ui/Menu").Divider;
+    var Heading: typeof import("@splunk/react-ui/Menu").Heading;
 }
 export default Compact;
 export { CompactPropsBase };

package/types/src/Multiselect/Multiselect.d.ts

@@ -1,9 +1,10 @@
-import React, { Component } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { Heading, Divider } from '@splunk/react-ui/Menu';
 import { SelectBaseChangeReason } from '@splunk/react-ui/Select/SelectBase';
 import { CompactPropsBase } from './Compact';
 import Option from './Option';
-import { ClassComponentProps } from '../utils/types';
+import { ComponentProps } from '../utils/types';
 /** @public */
 type MultiselectFilterChangeHandler = (event: React.ChangeEvent<HTMLInputElement> | React.FocusEvent<HTMLInputElement> | React.MouseEvent<HTMLSpanElement> | React.KeyboardEvent, data: {
     keyword: string;
@@ -17,11 +18,11 @@ type MultiselectChangeHandler = (event: React.MouseEvent<HTMLButtonElement> | Re
 /** @public */
 type MultiselectScrollBottomHandler = (event: React.UIEvent<HTMLDivElement> | React.KeyboardEvent<HTMLInputElement> | null) => void;
 interface MultiselectPropsBase {
-    animateLoading?: boolean;
     /**
      * Allow the user to add arbitrary values.
      */
     allowNewValues?: boolean;
+    animateLoading?: boolean;
     /**
      * When compact, options are shown as checkboxes and the input is a single line. This is
      * useful when placing the Multiselect in a horizontal bar, such as a filter.
@@ -97,13 +98,15 @@ interface MultiselectPropsBase {
      * the menu should it need to be wider than the toggle Button. */
     menuStyle?: React.CSSProperties;
     /** The name is returned with onChange events, which can be used to identify the
-     * control when multiple controls share an onChange callback. */
+     * control when multiple controls share an onChange callback.
+     */
     name?: string;
     /**
      * The noOptionsMessage is shown when there are no children and it's not loading, such as when
      * there are no Options matching the filter. This can be customized to the type of content,
      * for example: "No matching dashboards". You can insert other content, such as an error message, or
-     * communicate a minimum number of characters to enter to see results. */
+     * communicate a minimum number of characters to enter to see results.
+     */
     noOptionsMessage?: React.ReactNode;
     /**
      * A callback to receive the change events.  If values is set, this callback is required.
@@ -111,31 +114,31 @@ interface MultiselectPropsBase {
      */
     onChange?: MultiselectChangeHandler;
     /**
-     * A callback function invoked when the menu is scrolled.
-     */
-    onScroll?: React.UIEventHandler<Element>;
-    /**
-     * A callback function for loading additional list items.
-     * Called when the list is scrolled to the bottom or all items in the list are visible.
-     * This is called with an event argument if this is the result of a scroll.
-     *
-     * This should be set this to `null` when all items are loaded.
+     * A callback function invoked when the popover closes.
      */
-    onScrollBottom?: MultiselectScrollBottomHandler;
+    onClose?: () => void;
     /**
      * A callback with the change event and value of the filter box. Providing this callback and
      * setting controlledFilter to true enables you to filter and update the children by other
      * criteria.
      */
     onFilterChange?: MultiselectFilterChangeHandler;
-    /**
-     * A callback function invoked when the popover closes.
-     */
-    onClose?: () => void;
     /**
      * A callback function invoked when the popover opens.
      */
     onOpen?: () => void;
+    /**
+     * A callback function invoked when the menu is scrolled.
+     */
+    onScroll?: React.UIEventHandler<Element>;
+    /**
+     * A callback function for loading additional list items.
+     * Called when the list is scrolled to the bottom or all items in the list are visible.
+     * This is called with an event argument if this is the result of a scroll.
+     *
+     * This should be set this to `null` when all items are loaded.
+     */
+    onScrollBottom?: MultiselectScrollBottomHandler;
     /**
      * If 'value' is undefined or doesn't match an item, the Button will display this text.
      */
@@ -177,7 +180,6 @@ interface MultiselectPropsBase {
      */
     virtualization?: number;
 }
-declare const defaultProps: Required<Pick<MultiselectPropsBase, 'allowNewValues' | 'animateLoading' | 'compact' | 'defaultPlacement' | 'disabled' | 'inline' | 'isLoadingOptions' | 'menuStyle' | 'noOptionsMessage' | 'placeholder' | 'repositionMode' | 'tabConfirmsNewValue' | 'useClickawayOverlay'>>;
 interface MultiselectPropsBaseControlled extends MultiselectPropsBase {
     defaultValues?: never;
     onChange: MultiselectChangeHandler;
@@ -199,17 +201,55 @@ interface MultiselectPropsBaseCompact extends MultiselectPropsBase {
     /** @private */
     toggle?: CompactPropsBase['toggle'];
 }
-type MultiselectNormalProps = ClassComponentProps<(MultiselectPropsBaseControlled | MultiselectPropsBaseUncontrolled) & MultiselectPropsBaseNormal, typeof defaultProps, 'div'>;
-type MultiselectCompactProps = ClassComponentProps<(MultiselectPropsBaseControlled | MultiselectPropsBaseUncontrolled) & MultiselectPropsBaseCompact, typeof defaultProps, 'button'>;
+type MultiselectNormalProps = ComponentProps<(MultiselectPropsBaseControlled | MultiselectPropsBaseUncontrolled) & MultiselectPropsBaseNormal, 'div'>;
+type MultiselectCompactProps = ComponentProps<(MultiselectPropsBaseControlled | MultiselectPropsBaseUncontrolled) & MultiselectPropsBaseCompact, 'button'>;
 type MultiselectProps = MultiselectNormalProps | MultiselectCompactProps;
-declare class Multiselect extends Component<MultiselectProps, {}> {
-    static propTypes: React.WeakValidationMap<MultiselectProps>;
-    static defaultProps: Required<Pick<MultiselectPropsBase, "placeholder" | "disabled" | "inline" | "compact" | "defaultPlacement" | "repositionMode" | "animateLoading" | "noOptionsMessage" | "menuStyle" | "allowNewValues" | "isLoadingOptions" | "tabConfirmsNewValue" | "useClickawayOverlay">>;
-    static componentType: string;
-    static Option: typeof Option;
-    static Heading: typeof Heading;
-    static Divider: typeof Divider;
-    render(): React.JSX.Element;
+declare function Multiselect({ allowNewValues, animateLoading, compact, children, controlledFilter, defaultPlacement, defaultValues, describedBy, disabled, elementRef, error, filter, footerMessage, inline, inputId, inputRef, isLoadingOptions, labelledBy, loadingMessage, menuStyle, name, noOptionsMessage, onChange, onClose, onFilterChange, onOpen, onScroll, onScrollBottom, placeholder, repositionMode, selectAllAppearance, showSelectedValuesFirst, tabConfirmsNewValue, useClickawayOverlay, values, virtualization, ...otherProps }: MultiselectProps): React.JSX.Element;
+declare namespace Multiselect {
+    var componentType: string;
+    var Option: typeof import("./Option").default;
+    var Heading: typeof import("@splunk/react-ui/Menu").Heading;
+    var Divider: typeof import("@splunk/react-ui/Menu").Divider;
+    var propTypes: {
+        allowNewValues: PropTypes.Requireable<boolean>;
+        animateLoading: PropTypes.Requireable<boolean>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        compact: PropTypes.Requireable<boolean>;
+        controlledFilter: PropTypes.Requireable<boolean>;
+        defaultPlacement: PropTypes.Requireable<string>;
+        defaultValues: PropTypes.Requireable<any[]>;
+        describedBy: PropTypes.Requireable<string>;
+        disabled: PropTypes.Requireable<boolean>;
+        elementRef: PropTypes.Requireable<object>;
+        error: PropTypes.Requireable<boolean>;
+        filter: PropTypes.Requireable<string | boolean>;
+        footerMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        inline: PropTypes.Requireable<boolean>;
+        inputId: PropTypes.Requireable<string>;
+        inputRef: PropTypes.Requireable<object>;
+        isLoadingOptions: PropTypes.Requireable<boolean>;
+        labelledBy: PropTypes.Requireable<string>;
+        loadingMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        menuStyle: PropTypes.Requireable<object>;
+        name: PropTypes.Requireable<string>;
+        noOptionsMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        onFilterChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onOpen: PropTypes.Requireable<(...args: any[]) => any>;
+        onScroll: PropTypes.Requireable<(...args: any[]) => any>;
+        onScrollBottom: PropTypes.Requireable<(...args: any[]) => any>;
+        placeholder: PropTypes.Requireable<string>;
+        repositionMode: PropTypes.Requireable<string>;
+        selectAllAppearance: PropTypes.Requireable<string>;
+        showSelectedValuesFirst: PropTypes.Requireable<string>;
+        tabConfirmsNewValue: PropTypes.Requireable<boolean>;
+        useClickawayOverlay: PropTypes.Requireable<boolean>;
+        values: PropTypes.Requireable<any[]>;
+        /** @private */
+        virtualization: PropTypes.Requireable<number>;
+    };
 }
 export default Multiselect;
 export { Divider, Heading, MultiselectChangeHandler, MultiselectFilterChangeHandler, MultiselectScrollBottomHandler, Option, };
+export type { MultiselectPropsBase, MultiselectProps };

package/types/src/Multiselect/Normal.d.ts

@@ -1,14 +1,13 @@
-import React, { Component } from 'react';
-import { Divider, Heading } from '@splunk/react-ui/Menu';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { MultiselectChangeHandler, MultiselectFilterChangeHandler, MultiselectScrollBottomHandler } from './Multiselect';
-import Option from './Option';
-import { ClassComponentProps } from '../utils/types';
+import { ComponentProps } from '../utils/types';
 interface NormalPropsBase {
-    animateLoading?: boolean;
     /**
      * Allow the user to add arbitrary values.
      */
     allowNewValues?: boolean;
+    animateLoading?: boolean;
     /**
      * `children` should be `Multiselect.Option`, `Multiselect.Heading`, or
      * `Multiselect.Divider`.
@@ -127,57 +126,47 @@ interface NormalPropsBase {
      */
     values?: (string | number | boolean)[];
 }
-declare const defaultProps: Required<Pick<NormalPropsBase, 'allowNewValues' | 'animateLoading' | 'defaultPlacement' | 'disabled' | 'inline' | 'isLoadingOptions' | 'menuStyle' | 'noOptionsMessage' | 'placeholder' | 'tabConfirmsNewValue' | 'useClickawayOverlay'>>;
-type NormalProps = ClassComponentProps<NormalPropsBase, typeof defaultProps, 'div'>;
-interface NormalState {
-    activeIndex: number;
-    el: HTMLDivElement | null;
-    filterKeyword: string;
-    hasFocus: boolean;
-    open: boolean;
-    values: (string | number | boolean)[];
-    loadingMoreMessage: string;
-}
-declare class Normal extends Component<NormalProps, NormalState> {
-    private activeItemId;
-    private activeValue?;
-    private availableOptionCount;
-    private children;
-    private controlledExternally;
-    private input;
-    private popoverId;
-    private previousActiveIndex;
-    static propTypes: React.WeakValidationMap<NormalProps>;
-    static defaultProps: Required<Pick<NormalPropsBase, "placeholder" | "disabled" | "inline" | "defaultPlacement" | "animateLoading" | "noOptionsMessage" | "menuStyle" | "allowNewValues" | "isLoadingOptions" | "tabConfirmsNewValue" | "useClickawayOverlay">>;
-    static Option: typeof Option;
-    static Divider: typeof Divider;
-    static Heading: typeof Heading;
-    constructor(props: Readonly<NormalProps>);
-    componentDidUpdate(prevProps: Readonly<NormalProps>, prevState: Readonly<NormalState>): void;
-    private getCurrentValues;
-    private handleClick;
-    private handleRequestRemove;
-    private open;
-    private handleInputFocus;
-    private handleInputKeyDown;
-    private handleInputChange;
-    private handleMenuOptionClick;
-    private handleInputBlur;
-    private handleRequestClose;
-    private handleScrollBottom;
-    private handleMount;
-    private handleInputMount;
-    private handleActiveOptionMount;
-    private isControlled;
-    /**
-     * Place focus on the text input.
-     */
-    focus(): void;
-    private addValue;
-    private removeValue;
-    private renderButtons;
-    private renderMenu;
-    private getSelectedItemsContent;
-    render(): React.JSX.Element;
+export declare const getInlineMenuStyle: (({ anchorWidth, maxHeight, menuStyle }: any) => any) & import("lodash").MemoizedFunction;
+type NormalProps = ComponentProps<NormalPropsBase, 'div'>;
+declare function Normal({ allowNewValues, animateLoading, children, controlledFilter, defaultPlacement, defaultValues, describedBy, disabled, elementRef, error, footerMessage, inline, inputId, inputRef: inputRefProp, isLoadingOptions, labelledBy, loadingMessage, menuStyle, name, noOptionsMessage, onChange, onClose, onFilterChange, onScroll, onScrollBottom, onOpen, placeholder, required, repositionMode, tabConfirmsNewValue, useClickawayOverlay, values, ...otherProps }: NormalProps): React.JSX.Element;
+declare namespace Normal {
+    var propTypes: {
+        allowNewValues: PropTypes.Requireable<boolean>;
+        animateLoading: PropTypes.Requireable<boolean>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        controlledFilter: PropTypes.Requireable<boolean>;
+        defaultPlacement: PropTypes.Requireable<string>;
+        defaultValues: PropTypes.Requireable<any[]>;
+        describedBy: PropTypes.Requireable<string>;
+        disabled: PropTypes.Requireable<boolean>;
+        elementRef: PropTypes.Requireable<object>;
+        error: PropTypes.Requireable<boolean>;
+        footerMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        inline: PropTypes.Requireable<boolean>;
+        inputId: PropTypes.Requireable<string>;
+        inputRef: PropTypes.Requireable<object>;
+        isLoadingOptions: PropTypes.Requireable<boolean>;
+        labelledBy: PropTypes.Requireable<string>;
+        loadingMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        menuStyle: PropTypes.Requireable<object>;
+        name: PropTypes.Requireable<string>;
+        noOptionsMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        onFilterChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onOpen: PropTypes.Requireable<(...args: any[]) => any>;
+        onScroll: PropTypes.Requireable<(...args: any[]) => any>;
+        onScrollBottom: PropTypes.Requireable<(...args: any[]) => any>;
+        placeholder: PropTypes.Requireable<string>;
+        /** @private. */
+        required: PropTypes.Requireable<boolean>;
+        repositionMode: PropTypes.Requireable<string>;
+        tabConfirmsNewValue: PropTypes.Requireable<boolean>;
+        useClickawayOverlay: PropTypes.Requireable<boolean>;
+        values: PropTypes.Requireable<any[]>;
+    };
+    var Option: typeof import("./Option").default;
+    var Divider: typeof import("@splunk/react-ui/Menu").Divider;
+    var Heading: typeof import("@splunk/react-ui/Menu").Heading;
 }
 export default Normal;

package/types/src/Multiselect/Option.d.ts

@@ -1,5 +1,6 @@
-import React, { PureComponent } from 'react';
-import { ClassComponentProps } from '../utils/types';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ComponentProps } from '../utils/types';
 type OptionClickHandler = (event: React.MouseEvent<HTMLButtonElement>, data: {
     value: string | number | boolean;
 }) => void;
@@ -28,6 +29,10 @@ interface OptionPropsBase {
      * If disabled=true, the option is grayed out and cannot be clicked.
      */
     disabled?: boolean;
+    /**
+     * A React ref which is set to the DOM element when the component mounts, and null when it unmounts.
+     */
+    elementRef?: React.Ref<HTMLAnchorElement | HTMLButtonElement>;
     /**
      * Adding hidden options can be useful for resolving the selected display label and icon,
      * when the option should not be in the list. This scenario can arise when Select's filter is
@@ -77,24 +82,43 @@ interface OptionPropsBase {
      */
     value: string | number | boolean;
 }
-declare const defaultProps: Required<Pick<OptionPropsBase, 'compact' | 'descriptionPosition' | 'disabled' | 'selected' | 'truncate'>>;
-type OptionProps = ClassComponentProps<OptionPropsBase, typeof defaultProps, 'button'>;
+type OptionProps = ComponentProps<OptionPropsBase, 'button'>;
 /**
- * An option within a `Multiselect`. This inherits from
- * [PureComponent](https://reactjs.org/docs/react-api.html#reactpurecomponent)
- * so any elements passed to it must also be pure.
+ * An option within a `Multiselect`.
  */
-declare class Option extends PureComponent<OptionProps, {}> {
-    private optionBaseRef;
-    static propTypes: React.WeakValidationMap<OptionProps>;
-    static defaultProps: Required<Pick<OptionPropsBase, "disabled" | "selected" | "compact" | "descriptionPosition" | "truncate">>;
-    private handleMount;
-    scrollIntoViewIfNeeded(): void;
-    /**
-     * Place focus on the button.
-     */
-    focus(): void;
-    render(): React.JSX.Element;
+declare function Option({ compact, children, description, descriptionPosition, disabled, elementRef, hidden, icon, label, matchRanges, role, selected, truncate, value, ...otherProps }: OptionProps): React.JSX.Element;
+declare namespace Option {
+    var propTypes: {
+        /** @private */
+        active: PropTypes.Requireable<boolean>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * @private this is passed down from Multiselect.
+         */
+        compact: PropTypes.Requireable<boolean>;
+        description: PropTypes.Requireable<string>;
+        descriptionPosition: PropTypes.Requireable<string>;
+        disabled: PropTypes.Requireable<boolean>;
+        elementRef: PropTypes.Requireable<object>;
+        hidden: PropTypes.Requireable<boolean>;
+        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        label: PropTypes.Validator<string>;
+        matchRanges: PropTypes.Requireable<(PropTypes.InferProps<{
+            start: PropTypes.Validator<number>;
+            end: PropTypes.Validator<number>;
+        }> | null | undefined)[]>;
+        /** @private */
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        /** @private */
+        role: PropTypes.Requireable<string>;
+        /** @private */
+        selected: PropTypes.Requireable<boolean>;
+        selectedAppearance: PropTypes.Requireable<string>;
+        selectedBackgroundColor: PropTypes.Requireable<string>;
+        selectedForegroundColor: PropTypes.Requireable<string>;
+        truncate: PropTypes.Requireable<boolean>;
+        value: PropTypes.Validator<NonNullable<NonNullable<string | number | boolean | null | undefined>>>;
+    };
 }
 export default Option;
 export { OptionClickHandler };

package/types/src/Multiselect/docs/examples/Children.d.ts

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import { MultiselectChangeHandler } from '@splunk/react-ui/Multiselect';
-declare class Children extends Component<{}, {
+declare class Children extends Component<object, {
     values: (string | number | boolean)[];
 }> {
-    constructor(props: {});
+    constructor(props: object);
     handleChange: MultiselectChangeHandler;
     render(): React.JSX.Element;
 }

package/types/src/Multiselect/docs/examples/Controlled.d.ts

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import { MultiselectChangeHandler } from '@splunk/react-ui/Multiselect';
-declare class Controlled extends Component<{}, {
+declare class Controlled extends Component<object, {
     values: (string | number | boolean)[];
 }> {
-    constructor(props: {});
+    constructor(props: object);
     handleChange: MultiselectChangeHandler;
     render(): React.JSX.Element;
 }

package/types/src/Multiselect/docs/examples/CustomizeSelected.d.ts

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import { MultiselectChangeHandler } from '@splunk/react-ui/Multiselect';
-declare class CustomizeSelected extends Component<{}, {
+declare class CustomizeSelected extends Component<object, {
     values: (string | number | boolean)[];
 }> {
-    constructor(props: {});
+    constructor(props: object);
     handleChange: MultiselectChangeHandler;
     render(): React.JSX.Element;
 }

package/types/src/Multiselect/docs/examples/Disabled.d.ts

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import { MultiselectChangeHandler } from '@splunk/react-ui/Multiselect';
-declare class Disabled extends Component<{}, {
+declare class Disabled extends Component<object, {
     values: (string | number | boolean)[];
 }> {
-    constructor(props: {});
+    constructor(props: object);
     handleChange: MultiselectChangeHandler;
     render(): React.JSX.Element;
 }

package/types/src/Multiselect/docs/examples/Error.d.ts

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import { MultiselectChangeHandler } from '@splunk/react-ui/Multiselect';
-declare class MultiselectError extends Component<{}, {
+declare class MultiselectError extends Component<object, {
     values: (string | number | boolean)[];
 }> {
-    constructor(props: {});
+    constructor(props: object);
     handleChange: MultiselectChangeHandler;
     render(): React.JSX.Element;
 }