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

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.
      */
@@ -158,12 +161,6 @@ interface MultiselectPropsBase {
     showSelectedValuesFirst?: 'nextOpen' | 'immediately' | 'never';
     /** Pressing Tab while entering an input confirms the new value. Requires `allowNewValues`. */
     tabConfirmsNewValue?: boolean;
-    /**
-     * Specifies whether or not to add an overlay div to clickaway from the popover. This is
-     * to avoid cases where some other element is accidentally clicked when the popover is open.
-     * Note: This only works with the Normal multiselect.
-     */
-    useClickawayOverlay?: boolean;
     /**
      * Value will be matched to one of the children to deduce the label and/or icon for the
      * toggle.
@@ -177,7 +174,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 +195,54 @@ 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, 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>;
+        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`.
@@ -116,68 +115,52 @@ interface NormalPropsBase {
     repositionMode?: 'none' | 'flip';
     /** Pressing tab while entering an input confirms the new value. Requires `allowNewValues`. */
     tabConfirmsNewValue?: boolean;
-    /**
-     * Specifies whether or not to add a overlay div to clickaway from the popover. This is
-     * to avoid cases where some other element is accidentally clicked when the popover is open
-     */
-    useClickawayOverlay?: boolean;
     /**
      * Value will be matched to one of the children to deduce the label and/or icon for the
      * toggle. An `onChange` callback is required.
      */
     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, 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>;
+        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,10 +1,3 @@
-import React, { Component } from 'react';
-import { MultiselectChangeHandler } from '@splunk/react-ui/Multiselect';
-declare class Children extends Component<{}, {
-    values: (string | number | boolean)[];
-}> {
-    constructor(props: {});
-    handleChange: MultiselectChangeHandler;
-    render(): React.JSX.Element;
-}
+import React from 'react';
+declare function Children(): React.JSX.Element;
 export default Children;

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

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

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

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

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

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

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

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

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

@@ -1,23 +1,3 @@
-import React, { Component } from 'react';
-import { MultiselectChangeHandler, MultiselectFilterChangeHandler } from '@splunk/react-ui/Multiselect';
-import { Movie, MovieOption } from '@splunk/react-ui/fixtures/FetchOptions';
-interface ExampleState {
-    fullCount: number;
-    isLoading: boolean;
-    options: MovieOption[];
-    values: (string | number | boolean)[];
-}
-declare class Fetching extends Component<{}, ExampleState> {
-    private fetchOptions;
-    constructor(props: {});
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    handleChange: MultiselectChangeHandler;
-    handleFetch: (keyword?: string) => void;
-    handleFilterChange: MultiselectFilterChangeHandler;
-    createOption: (movie: Movie | MovieOption, isSelected?: boolean) => React.JSX.Element;
-    generateOptions: () => React.JSX.Element[];
-    footerMessage: () => string | null;
-    render(): React.JSX.Element;
-}
+import React from 'react';
+declare function Fetching(): React.JSX.Element;
 export default Fetching;

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

@@ -1,2 +1,3 @@
 import React from 'react';
-export default function Headings(): React.JSX.Element;
+declare function Headings(): React.JSX.Element;
+export default Headings;

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

@@ -1,26 +1,3 @@
-import React, { Component } from 'react';
-import { MultiselectChangeHandler, MultiselectFilterChangeHandler } from '@splunk/react-ui/Multiselect';
-import { Movie, MovieOption } from '@splunk/react-ui/fixtures/FetchOptions';
-interface ExampleState {
-    fullCount: number;
-    isLoading: boolean;
-    isLoadingMore: boolean;
-    options: MovieOption[];
-    values: (string | number | boolean)[];
-}
-declare class LoadMoreOnScrollBottom extends Component<{}, ExampleState> {
-    private fetchOptions;
-    constructor(props: {});
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    handleChange: MultiselectChangeHandler;
-    handleFetch: (keyword?: string) => void;
-    handleFetchMore: (currentOptions: MovieOption[]) => void;
-    handleFilterChange: MultiselectFilterChangeHandler;
-    handleScrollBottom: () => void;
-    createOption: (movie: Movie | MovieOption, isSelected?: boolean) => React.JSX.Element;
-    generateOptions: () => React.JSX.Element[];
-    footerMessage: () => string;
-    render(): React.JSX.Element;
-}
+import React from 'react';
+declare function LoadMoreOnScrollBottom(): React.JSX.Element;
 export default LoadMoreOnScrollBottom;

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

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

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

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

package/types/src/NonInteractiveCheckbox/NonInteractiveCheckbox.d.ts

@@ -2,20 +2,21 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { ComponentProps } from '../utils/types';
 interface NonInteractiveCheckboxPropsBase {
-    disabled?: boolean | 'dimmed';
+    disabled?: boolean;
     selected?: boolean | 'some';
 }
 type NonInteractiveCheckboxProps = ComponentProps<NonInteractiveCheckboxPropsBase, 'div'>;
 /**
  * NonInteractiveCheckbox is a private component that replaced our internal usage of Switch's interactive={false}
- * with react-icons instead in components like Menu.Item, Table.Toggle, etc. (SUI-6757)
+ * for components like Menu.Item, Table.Toggle, etc. (SUI-6757)
  *
  */
-declare function NonInteractiveCheckbox({ disabled, selected, ...otherProps }: NonInteractiveCheckboxProps): React.JSX.Element;
-declare namespace NonInteractiveCheckbox {
-    var propTypes: {
-        disabled: PropTypes.Requireable<NonNullable<string | boolean | null | undefined>>;
+declare const NonInteractiveCheckbox: {
+    ({ className, disabled, selected }: NonInteractiveCheckboxProps): React.JSX.Element;
+    propTypes: {
+        disabled: PropTypes.Requireable<boolean>;
         selected: PropTypes.Requireable<NonNullable<string | boolean | null | undefined>>;
     };
-}
+};
 export default NonInteractiveCheckbox;
+export { NonInteractiveCheckboxPropsBase };

package/types/src/Number/docs/examples/Basic.d.ts

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import { NumberChangeHandler } from '@splunk/react-ui/Number';
-declare class Basic extends Component<{}, {
+declare class Basic extends Component<object, {
     value?: number;
 }> {
-    constructor(props: {});
+    constructor(props: object);
     handleChange: NumberChangeHandler;
     render(): React.JSX.Element;
 }

package/types/src/Number/docs/examples/Limits.d.ts

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import { NumberChangeHandler } from '@splunk/react-ui/Number';
-declare class Limits extends Component<{}, {
+declare class Limits extends Component<object, {
     value?: number;
 }> {
-    constructor(props: {});
+    constructor(props: object);
     handleChange: NumberChangeHandler;
     render(): React.JSX.Element;
 }

package/types/src/Number/docs/examples/Locale.d.ts

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import { NumberChangeHandler } from '@splunk/react-ui/Number';
-declare class Locale extends Component<{}, {
+declare class Locale extends Component<object, {
     value?: number;
 }> {
-    constructor(props: {});
+    constructor(props: object);
     handleChange: NumberChangeHandler;
     render(): React.JSX.Element;
 }

package/types/src/Popover/Popover.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { SpringConfig } from 'react-spring';
+import { SpringConfig } from '@react-spring/web';
 import { ComponentProps } from '../utils/types';
 /** @public */
 type PopoverChildrenRenderer = (data: {

package/types/src/Popover/PopoverMenuContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface PopoverMenuContextValue {
     retainFocus?: boolean;
 }

package/types/src/RadioBar/RadioBar.d.ts

@@ -64,7 +64,7 @@ type RadioBarProps = ComponentProps<RadioBarPropsBaseControlled | RadioBarPropsB
 /**
  * RadioBar is a form control that provides the ability to select one option out of a group.
  */
-declare function RadioBar({ children, defaultValue: defaultValueProp, describedBy, error, labelledBy, name, onChange, required, role, value: valueProp, ...otherProps }: RadioBarProps): React.JSX.Element;
+declare function RadioBar({ children, defaultValue: defaultValueProp, describedBy, elementRef, error, labelledBy, name, onChange, required, role, value: valueProp, ...otherProps }: RadioBarProps): React.JSX.Element;
 declare namespace RadioBar {
     var Option: typeof import("./Option").default;
     var propTypes: {