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

package/Typography.js

@@ -68,8 +68,8 @@
     const t = require("react");
     var n =  e.n(t);
     // CONCATENATED MODULE: external "prop-types"
-    const a = require("prop-types");
-    var o =  e.n(a);
+    const o = require("prop-types");
+    var a =  e.n(o);
     // CONCATENATED MODULE: external "styled-components"
     const i = require("styled-components");
     var l =  e.n(i);
@@ -90,14 +90,14 @@
     }
     function c(e, r) {
         if (null == e) return {};
-        var t, n, a = f(e, r);
+        var t, n, o = f(e, r);
         if (Object.getOwnPropertySymbols) {
-            var o = Object.getOwnPropertySymbols(e);
-            for (n = 0; n < o.length; n++) {
-                t = o[n], r.includes(t) || {}.propertyIsEnumerable.call(e, t) && (a[t] = e[t]);
+            var a = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < a.length; n++) {
+                t = a[n], r.includes(t) || {}.propertyIsEnumerable.call(e, t) && (o[t] = e[t]);
             }
         }
-        return a;
+        return o;
     }
     function f(e, r) {
         if (null == e) return {};
@@ -111,15 +111,16 @@
         return t;
     }
     var y = {
-        children: o().node.isRequired,
-        as: o().string.isRequired,
-        elementRef: o().oneOfType([ o().func, o().object ]),
-        family: o().oneOf([ "sansSerif", "monospace", "title" ]),
-        variant: o().oneOf(s.typographyVariants),
-        size: o().oneOf([ 24, 20, 18, 16, 14, 12 ]),
-        lineHeight: o().oneOf([ "single", "tight", "snug", "comfortable", "relaxed", "spacious", "normal" ]),
-        color: o().oneOf([ "active", "default", "disabled", "inverted", "muted", "inherit" ]),
-        weight: o().oneOf([ "light", "normal", "semiBold", "bold", "extraBold", "heavy" ])
+        as: a().string.isRequired,
+        children: a().node.isRequired,
+        color: a().oneOf([ "active", "default", "disabled", "inverted", "muted", "inherit" ]),
+        elementRef: a().oneOfType([ a().func, a().object ]),
+        family: a().oneOf([ "sansSerif", "monospace", "title" ]),
+        lineHeight: a().oneOf([ "single", "tight", "snug", "comfortable", "relaxed", "spacious", "normal" ]),
+        size: a().oneOf([ 24, 20, 18, 16, 14, 12 ]),
+        variant: a().oneOf(s.typographyVariants),
+        weight: a().oneOf([ "light", "normal", "semiBold", "bold", "extraBold", "heavy" ]),
+        withReset: a().bool
     };
     var d = l().p.withConfig({
         displayName: "Typography__StyledTypography",
@@ -131,25 +132,26 @@
     /**
  * Typography renders text content with styling based on the Splunk Design System.
  */    function g(e) {
-        var r = e.children, a = e.as, o = e.elementRef, i = e.variant, l = e.family, s = e.size, u = e.lineHeight, f = e.color, y = e.weight, g = c(e, [ "children", "as", "elementRef", "variant", "family", "size", "lineHeight", "color", "weight" ]);
+        var r = e.as, o = e.children, a = e.color, i = e.elementRef, l = e.family, s = e.lineHeight, u = e.size, f = e.variant, y = e.weight, g = e.withReset, h = g === void 0 ? true : g, v = c(e, [ "as", "children", "color", "elementRef", "family", "lineHeight", "size", "variant", "weight", "withReset" ]);
         // @docs-props-type TypographyPropsBase
-                var h = (0, t.useMemo)((function() {
+                var m = (0, t.useMemo)((function() {
             return {
+                color: a,
                 family: l,
-                size: s,
-                lineHeight: u,
-                color: f,
-                weight: y
+                lineHeight: s,
+                size: u,
+                weight: y,
+                withReset: h
             };
-        }), [ f, l, u, s, y ]);
+        }), [ a, l, s, u, y, h ]);
         
         return n().createElement(d, p({
-            as: a,
-            ref: o,
+            as: r,
             "data-test": "typography",
-            $variant: i,
-            $typographyParams: h
-        }, g), r);
+            ref: i,
+            $typographyParams: m,
+            $variant: f
+        }, v), o);
     }
     g.propTypes = y;
     /* harmony default export */    const h = g;

package/WaitSpinner.js

@@ -61,7 +61,7 @@
         e.r(t);
     // EXPORTS
         e.d(t, {
-        default: () => /* reexport */ x
+        default: () => /* reexport */ z
     });
     // CONCATENATED MODULE: external "react"
     const r = require("react");
@@ -109,12 +109,7 @@
     var b = c().circle.withConfig({
         displayName: "WaitSpinnerStyles__StyledFillPath",
         componentId: "sc-1nu971z-3"
-    })([ "fill:transparent;stroke-width:2;stroke:", ";stroke-dasharray:7 113;stroke-dashoffset:3;", "" ], (0, 
-    f.pickVariant)("$size", {
-        small: f.variables.contentColorDefault,
-        medium: f.variables.contentColorDefault,
-        large: f.variables.contentColorAccent
-    }), (function(e) {
+    })([ "fill:transparent;stroke-width:2;stroke:", ";stroke-dasharray:7 113;stroke-dashoffset:3;", "" ], f.variables.contentColorAccent, (function(e) {
         var t = e.$animated;
         return t && (0, l.css)([ "animation:", " ", " infinite;" ], h, p);
     }));
@@ -152,12 +147,12 @@
         }
         return r;
     }
-    var z = {
+    var O = {
         elementRef: i().oneOfType([ i().func, i().object ]),
         screenReaderText: i().oneOfType([ i().string, i().oneOf([ "null" ]) ]),
         size: i().oneOf([ "small", "medium", "large" ])
     };
-    function O(e) {
+    function x(e) {
         var t = e.elementRef, r = e.screenReaderText, a = r === void 0 ? (0, o._)("Waiting") : r, i = e.size, l = i === void 0 ? "small" : i, c = w(e, [ "elementRef", "screenReaderText", "size" ]);
         // @docs-props-type WaitSpinnerPropsBase
                 var f = (0, s.useAnimationToggle)() === "on";
@@ -185,8 +180,8 @@
             $size: l
         }))));
     }
-    O.propTypes = z;
-    /* harmony default export */    const x = O;
+    x.propTypes = O;
+    /* harmony default export */    const z = x;
     // CONCATENATED MODULE: ./src/WaitSpinner/index.ts
     module.exports = t;
     /******/})();

package/cypress/support/commands.ts

@@ -3,9 +3,19 @@ import 'cypress-real-events';
 
 // https://docs.cypress.io/api/commands/hover
 Cypress.Commands.add('hover', (selector: string) => {
-    if (Cypress.browser.name !== 'firefox') {
-        cy.get(selector).realHover();
-    } else {
-        cy.get(selector).trigger('mouseover', { force: true });
+    if (!selector) {
+        throw new Error('You must provide a valid selector to hover over.');
     }
+
+    return cy.get(selector).then(($el) => {
+        if ($el.length === 0) {
+            throw new Error(`No elements found for selector: ${selector}`);
+        }
+
+        if (Cypress.browser.name !== 'firefox') {
+            return cy.wrap($el).realHover();
+        }
+
+        return cy.wrap($el).trigger('mouseover', { force: true });
+    });
 });

package/cypress/support/index.d.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-namespace */
 declare namespace Cypress {
     interface Chainable {
-        hover(selector: string): void; // to support hover custom command
+        hover(selector: string): Chainable; // to support hover custom command
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "5.0.0-beta.4",
+  "version": "5.0.0-beta.5",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -45,8 +45,8 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@react-spring/web": "^9.7.5",
-    "@splunk/react-icons": "5.0.0-beta.4",
-    "@splunk/themes": "1.0.0-beta.4",
+    "@splunk/react-icons": "5.0.0-beta.5",
+    "@splunk/themes": "1.0.0-beta.5",
     "@splunk/ui-utils": "^1.8.0",
     "decimal.js-light": "^2.2.3",
     "lodash": "^4.17.14",
@@ -61,9 +61,9 @@
     "@babel/core": "^7.2.0",
     "@babel/plugin-transform-runtime": "^7.18.6",
     "@splunk/babel-preset": "^4.0.0",
-    "@splunk/docs-gen": "1.0.0-beta.14.v5.2",
+    "@splunk/docs-gen": "1.0.0-beta.14.v5.3",
     "@splunk/eslint-config": "^5.0.0",
-    "@splunk/react-docs": "1.0.0-beta.21.v5.2",
+    "@splunk/react-docs": "1.0.0-beta.22.v5",
     "@splunk/stylelint-config": "^5.0.0",
     "@splunk/test-runner-utils": "^0.4.1",
     "@splunk/webpack-configs": "^7.0.2",

package/stubs-splunkui.d.ts

@@ -90,10 +90,6 @@ declare module '@splunk/ui-utils/style' {
     function toClassName(...args: ClassNameArg[]): string;
 }
 
-declare module '@splunk/ui-utils/userAgent' {
-    function isIE11(): boolean;
-}
-
 declare module '@splunk/react-docs/DocExample' {
     function getDependencyVersions(
         packageJSON: Record<string, unknown>,

package/types/src/Card/Card.d.ts

@@ -46,7 +46,7 @@ interface CardPropsBase {
     to?: string;
     /** Returns a value on click. Use when composing or if you have more than one selectable `Card`. */
     value?: any;
-    /** Overrides the HTML tag for the Card component. Defaults to `article`. */
+    /** Overrides the HTML tag for the Card component. Defaults to `article`. Ignored if `to` or `onClick` are present. */
     tag?: 'article' | 'div' | 'aside' | 'section';
 }
 interface CardPropsBaseNonClickable extends CardPropsBase {
@@ -60,12 +60,14 @@ interface CardPropsBaseOnClickClickable extends CardPropsBase {
     onClick: CardClickHandler;
     selected?: boolean;
     to?: string;
+    tag?: never;
 }
 interface CardPropsBaseClickable extends CardPropsBase {
     elementRef?: React.Ref<HTMLAnchorElement | HTMLButtonElement>;
     onClick?: CardClickHandler;
     selected?: never;
     to?: string;
+    tag?: never;
 }
 type CardNonClickableProps = ComponentProps<CardPropsBaseNonClickable, 'div' | 'article'>;
 type CardClickableButtonProps = ComponentProps<CardPropsBaseOnClickClickable | CardPropsBaseClickable, 'button'>;

package/types/src/Card/Header.d.ts

@@ -20,6 +20,8 @@ interface HeaderPropsBase {
      */
     actionsSecondary?: React.ReactNode;
     /**
+     * @deprecated This prop is deprecated and will be removed in the next major version.
+     *
      * Make the title an anchor so it can be bookmarked with a fragment.
      */
     anchor?: string;

package/types/src/Card/docs/examples/HeadingTitle.d.ts

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

package/types/src/Clickable/Clickable.d.ts

@@ -37,13 +37,21 @@ interface ClickablePropsBase {
      */
     navigationLabel?: string;
     /**
-     * A URL for a link. If set and not disabled, an `a` element is used instead
+     * @private
+     */
+    tag?: 'a' | 'button';
+    /**
+     * A URL for a link. If set, an `a` element is used instead
      * of a `button` element (link mode).
      */
     to?: string;
 }
-type ClickableButtonProps = ComponentProps<ClickablePropsBase, 'button'>;
-type ClickableLinkProps = ComponentProps<ClickablePropsBase, 'a', 'href'>;
+type ClickableButtonProps = ComponentProps<ClickablePropsBase & {
+    to?: never;
+}, 'button'>;
+type ClickableLinkProps = ComponentProps<ClickablePropsBase & {
+    to: string;
+}, 'a', 'href'>;
 type ClickableProps = ClickableButtonProps | ClickableLinkProps;
 /**
  * `Clickable` renders as a `button` element, or as an `a` element if the `to` prop is set

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

@@ -31,6 +31,10 @@ interface LinkPropsBase {
      * The URL or path to link to.
      */
     to?: string;
+    /**
+     * @private
+     */
+    tag?: 'a' | 'button';
 }
 type LinkLinkProps = ComponentProps<LinkPropsBase, 'a', 'href'>;
 type LinkButtonProps = ComponentProps<LinkPropsBase, 'button'>;

package/types/src/Message/Message.d.ts

@@ -21,7 +21,7 @@ interface MessagePropsBase {
     type?: 'info' | 'warning' | 'error' | 'success';
 }
 type MessageProps = ComponentProps<MessagePropsBase, 'div'>;
-declare function Message({ appearance, children, type, onRequestRemove, ...otherProps }: MessageProps): React.JSX.Element;
+declare function Message({ appearance, children, elementRef, onRequestRemove, type, ...otherProps }: MessageProps): React.JSX.Element;
 declare namespace Message {
     var propTypes: {
         appearance: PropTypes.Requireable<string>;

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

@@ -13,7 +13,7 @@ interface MessageBarPropsBase {
     /**
      * Includes a close button. Always consider including a close button.
      */
-    onRequestClose?: React.MouseEventHandler<HTMLButtonElement>;
+    onRequestClose?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
     /**
      * Sets the severity of this `MessageBar`.
      * */

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

@@ -161,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.
@@ -204,7 +198,7 @@ interface MultiselectPropsBaseCompact extends MultiselectPropsBase {
 type MultiselectNormalProps = ComponentProps<(MultiselectPropsBaseControlled | MultiselectPropsBaseUncontrolled) & MultiselectPropsBaseNormal, 'div'>;
 type MultiselectCompactProps = ComponentProps<(MultiselectPropsBaseControlled | MultiselectPropsBaseUncontrolled) & MultiselectPropsBaseCompact, 'button'>;
 type MultiselectProps = MultiselectNormalProps | MultiselectCompactProps;
-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 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;
@@ -244,7 +238,6 @@ declare namespace Multiselect {
         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>;

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

@@ -115,11 +115,6 @@ 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.
@@ -128,7 +123,7 @@ interface NormalPropsBase {
 }
 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 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>;
@@ -162,7 +157,6 @@ declare namespace Normal {
         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;

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<object, {
-    values: (string | number | boolean)[];
-}> {
-    constructor(props: object);
-    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<object, {
-    values: (string | number | boolean)[];
-}> {
-    constructor(props: object);
-    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<object, {
-    values: (string | number | boolean)[];
-}> {
-    constructor(props: object);
-    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<object, {
-    values: (string | number | boolean)[];
-}> {
-    constructor(props: object);
-    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<object, {
-    values: (string | number | boolean)[];
-}> {
-    constructor(props: object);
-    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<object, ExampleState> {
-    private fetchOptions;
-    constructor(props: object);
-    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<object, ExampleState> {
-    private fetchOptions;
-    constructor(props: object);
-    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<object, {
-    values: (string | number | boolean)[];
-}> {
-    constructor(props: object);
-    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<object, {
-    values: (string | number | boolean)[];
-}> {
-    constructor(props: object);
-    handleChange: MultiselectChangeHandler;
-    render(): React.JSX.Element;
-}
+import React from 'react';
+declare function TabInput(): React.JSX.Element;
 export default TabInput;

package/types/src/ResultsMenu/ResultsMenu.d.ts

@@ -1,6 +1,6 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { ClassComponentProps } from '../utils/types';
+import { ComponentProps } from '../utils/types';
 type ResultsMenuScrollBottomHandler = (event: React.UIEvent<HTMLDivElement> | null) => void;
 interface ResultsMenuPropsBase {
     /**
@@ -29,6 +29,7 @@ interface ResultsMenuPropsBase {
      * - `roving`: Does not retain focus inside the menu. One tab stop. Uses up/down arrow keys to navigate and loop inside the menu.
      */
     focusMode?: 'roving' | 'normal' | 'never';
+    footerMessage?: React.ReactNode;
     /**
      * Whether or not to show the loading message and/or wait spinner. It's not recommended to
      * pass old children when loading new children. The loading animation will show below any
@@ -36,6 +37,7 @@ interface ResultsMenuPropsBase {
      */
     isLoading?: boolean;
     loadingMessage?: React.ReactNode;
+    menuId?: string;
     noOptionsMessage?: React.ReactNode;
     onScroll?: React.UIEventHandler<Element>;
     /**
@@ -47,8 +49,6 @@ interface ResultsMenuPropsBase {
      */
     onScrollBottom?: ResultsMenuScrollBottomHandler;
     placement?: string;
-    footerMessage?: React.ReactNode;
-    menuId?: string;
 }
 declare const propTypes: {
     animateLoading: PropTypes.Requireable<boolean>;
@@ -59,41 +59,30 @@ declare const propTypes: {
     footerMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     isLoading: PropTypes.Requireable<boolean>;
     loadingMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    menuId: PropTypes.Requireable<string>;
     noOptionsMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     onScroll: PropTypes.Requireable<(...args: any[]) => any>;
     onScrollBottom: PropTypes.Requireable<(...args: any[]) => any>;
     placement: PropTypes.Requireable<string>;
-    menuId: PropTypes.Requireable<string>;
 };
-declare const defaultProps: Required<Pick<ResultsMenuPropsBase, 'animateLoading' | 'isLoading' | 'loadingMessage' | 'noOptionsMessage'>>;
-type ResultsMenuProps = ClassComponentProps<ResultsMenuPropsBase, typeof defaultProps, 'div'>;
-interface ResultsMenuState {
-    childrenCount?: number;
-    containerEl: HTMLDivElement | null;
-    menuEl: HTMLDivElement | null;
-    numberOfItemsLoaded: number;
-    windowTop: number;
-    scrollBottomTriggered: boolean;
-}
-declare class ResultsMenu extends Component<ResultsMenuProps, ResultsMenuState> {
-    private scrollBottomOffset;
-    private itemMinHeight;
-    static propTypes: React.WeakValidationMap<ResultsMenuProps>;
-    static defaultProps: Required<Pick<ResultsMenuPropsBase, "animateLoading" | "isLoading" | "loadingMessage" | "noOptionsMessage">>;
-    constructor(props: Readonly<ResultsMenuProps>);
-    componentDidUpdate(): void;
-    private handleMenuMount;
-    private handleMount;
-    private handleMouseEnter;
-    private handleMouseLeave;
-    private handleScroll;
-    private handleWheelMenu;
-    private handleScrollBottomOnFullMenu;
-    private handleScrollBottom;
-    private checkFullHeight;
-    private renderFooterMessage;
-    private createMenuContextValue;
-    render(): React.JSX.Element;
+type ResultsMenuProps = ComponentProps<ResultsMenuPropsBase, 'div'>;
+declare function ResultsMenu({ animateLoading, 'aria-multiselectable': ariaMultiselectable, children, childrenStart, elementRef, focusMode, footerMessage, isLoading, loadingMessage, menuId, noOptionsMessage, onScroll, onScrollBottom, placement, style, tabIndex, ...otherProps }: ResultsMenuProps): React.JSX.Element;
+declare namespace ResultsMenu {
+    var propTypes: {
+        animateLoading: PropTypes.Requireable<boolean>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        childrenStart: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        elementRef: PropTypes.Requireable<object>;
+        focusMode: PropTypes.Requireable<string>;
+        footerMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        isLoading: PropTypes.Requireable<boolean>;
+        loadingMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        menuId: PropTypes.Requireable<string>;
+        noOptionsMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        onScroll: PropTypes.Requireable<(...args: any[]) => any>;
+        onScrollBottom: PropTypes.Requireable<(...args: any[]) => any>;
+        placement: PropTypes.Requireable<string>;
+    };
 }
 export default ResultsMenu;
 export { propTypes };