@splunk/react-ui 4.42.0 → 5.0.0-beta.2

package/stubs-splunkui.d.ts

@@ -10,9 +10,14 @@ declare module '__FONTS_IMPORT__/*' {
 
 declare module '@splunk/ui-utils/color' {
     function expandShortHandHex<T extends string | null | undefined>(arg: T): T;
-    function isValidHexColor(value: string): boolean;
+    function hexToRgb(hex: string): [number, number, number] | null;
     function isCSSColor(value: string): boolean;
+    function isValidHexColor(value: string): boolean;
+    function isValidRgb(value: string): boolean;
+    function namedColorToHex(colorName: string): string | undefined;
+
     const extendedColorKeywords: string[];
+    const extendedColorKeywordsToHex: { string: string };
 }
 
 declare module '@splunk/ui-utils/filter' {

package/types/src/Accordion/Accordion.d.ts

@@ -54,6 +54,10 @@ type AccordionProps = ClassComponentProps<AccordionControlledProps | AccordionUn
 interface AccordionState {
     openPanelId?: string | number;
 }
+/**
+ * @deprecated
+ * Accordion has been deprecated and will be removed in a future major version. Use Collapsible Panel's SingleOpenPanelGroup API instead.
+ */
 declare class Accordion extends Component<AccordionProps, AccordionState> {
     private controlledExternally;
     static propTypes: React.WeakValidationMap<AccordionProps>;
@@ -66,7 +70,7 @@ declare class Accordion extends Component<AccordionProps, AccordionState> {
     private getCurrentOpenPanel;
     private handleChange;
     private isControlled;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export default Accordion;
 export { AccordionChangeHandler, Panel };

package/types/src/Accordion/Panel.d.ts

@@ -11,7 +11,6 @@ interface AccordionPanelPropsBase {
     /**
      * When `true` renders the Panel with padding.
      * When `false` render the Panel without padding.
-     * Note: in `v5` this will default to `true`. SUI-2559
      */
     inset?: boolean;
     /**
@@ -28,7 +27,7 @@ type AccordionPanelProps = ComponentProps<AccordionPanelPropsBase, 'div'>;
 /**
  * `Accordion.Panel` operates as a container component for content in an `Accordion`.
  */
-declare function Panel({ panelId, inset, ...otherProps }: AccordionPanelProps): JSX.Element;
+declare function Panel({ panelId, inset: insetProp, ...otherProps }: AccordionPanelProps): React.JSX.Element;
 declare namespace Panel {
     var propTypes: {
         description: PropTypes.Requireable<string>;

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

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

package/types/src/Accordion/docs/examples/Inset.d.ts

@@ -1,2 +1,3 @@
-declare const Inset: () => JSX.Element;
+import React from 'react';
+declare const Inset: () => React.JSX.Element;
 export default Inset;

package/types/src/Accordion/docs/examples/Uncontrolled.d.ts

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

package/types/src/Anchor/Anchor.d.ts

@@ -16,7 +16,7 @@ type AnchorProps = ComponentProps<AnchorPropsBase, 'a', 'href'>;
 /**
  * `Anchor` is a utility component used to add a fragment link to an element.
  */
-declare function Anchor({ children, elementRef, name, ...otherProps }: AnchorProps): JSX.Element;
+declare function Anchor({ children, elementRef, name, ...otherProps }: AnchorProps): React.JSX.Element;
 declare namespace Anchor {
     var propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;

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

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

package/types/src/Animation/Animation.d.ts

@@ -1,8 +1,18 @@
-import { SpringComponentProps as RSSpringComponentProps, TransitionComponentProps as RSTransitionComponentProps } from 'react-spring';
+/// <reference types="react" />
+import { SpringComponentProps as RSSpringComponentProps, TransitionComponentProps as RSTransitionComponentProps, UseSpringProps as RSUseSpringProps, UseTransitionProps as RSUseTransitionProps } from 'react-spring';
+declare function useAnimation({ immediate, ...otherProps }: RSUseSpringProps): {
+    [x: string]: any;
+    [x: number]: any;
+};
+declare function useAnimationTransition(items: any, { immediate, ...otherProps }: RSUseTransitionProps): import("react-spring").TransitionFn<any, {
+    [x: string]: any;
+    [x: number]: any;
+    [Symbol.hasInstance]: (value: any) => boolean;
+}>;
 /**
  * Wrappers to use in place of `Spring` and `Transition` from `react-spring`.
  * Uses `useAnimationToggle` to offer animation control.
  */
 declare function Spring({ children, immediate, ...otherProps }: RSSpringComponentProps): JSX.Element | null;
 declare function Transition({ items, children, immediate, ...otherProps }: RSTransitionComponentProps<any>): JSX.Element;
-export { Spring, Transition };
+export { Spring, Transition, useAnimation, useAnimationTransition };

package/types/src/AnimationToggle/AnimationToggleProvider.d.ts

@@ -11,7 +11,7 @@ interface AnimationToggleProviderProps {
  * Used to provide a setting to enable or disable animation.
  */
 declare const AnimationToggleProvider: {
-    ({ children, enabled }: AnimationToggleProviderProps): JSX.Element;
+    ({ children, enabled }: AnimationToggleProviderProps): React.JSX.Element;
     propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         enabled: PropTypes.Requireable<boolean>;

package/types/src/AnimationToggle/docs/examples/Provider.d.ts

@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import React, { Component } from 'react';
 declare class Provider extends Component<{}, {
     animatedTransitions: boolean;
     open: boolean;
@@ -6,6 +6,6 @@ declare class Provider extends Component<{}, {
     constructor(props: {});
     handleButtonClick: () => void;
     handleSwitchClick: () => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export default Provider;

package/types/src/AnimationToggle/docs/examples/ReducedMotionComponent.d.ts

@@ -1,2 +1,3 @@
-declare const ReducedMotionComponent: () => JSX.Element;
+import React from 'react';
+declare const ReducedMotionComponent: () => React.JSX.Element;
 export default ReducedMotionComponent;

package/types/src/AnimationToggle/docs/examples/ReducedMotionHook.d.ts

@@ -1,2 +1,3 @@
-declare const ReducedMotionHook: () => JSX.Element;
+import React from 'react';
+declare const ReducedMotionHook: () => React.JSX.Element;
 export default ReducedMotionHook;

package/types/src/AnimationToggle/docs/examples/ToggleComponent.d.ts

@@ -1,9 +1,9 @@
-import { Component } from 'react';
+import React, { Component } from 'react';
 declare class ToggleComponent extends Component<{}, {
     animatedTransitions: boolean;
 }> {
     constructor(props: {});
     handleSwitchClick: () => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export default ToggleComponent;

package/types/src/AnimationToggle/docs/examples/ToggleHook.d.ts

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

package/types/src/Avatar/Avatar.d.ts

@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Enterprise, Interpolation, OptionalThemedProps, Prisma } from '@splunk/themes';
+import getInitials from './getInitials';
+import { ComponentProps } from '../utils/types';
+/** @public */
+type AvatarClickHandler = (event: React.MouseEvent<HTMLButtonElement>, data: {
+    value?: string;
+}) => void;
+interface AvatarPropsBase {
+    /**
+     * All CSS color definitions are supported, such as `#223344` or `red`.
+     * Using `theme` enables the theme default.
+     */
+    backgroundColor?: string | Interpolation<Enterprise, OptionalThemedProps<Enterprise>> | Interpolation<Prisma, OptionalThemedProps<Prisma>>;
+    /** A React ref which is set to the DOM element when the component mounts and `null` when it unmounts. */
+    elementRef?: React.Ref<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>;
+    /** The image to be displayed inside this `Avatar`, for example an `<img>` or `<svg>`. */
+    image?: React.ReactNode;
+    /** The contents of this `Avatar` if the `image` prop is not set or the provided image is not valid. Must not exceed three characters in length. */
+    initials: string;
+    /** Text to describe what this Avatar represents. */
+    label: string;
+    /** Enables interactive mode. */
+    onClick?: AvatarClickHandler;
+    /** Adjusts the size of the `Avatar`. */
+    size?: 'small' | 'medium' | 'large' | string;
+    /** If set, the component will be rendered as an `<a>` tag with `href` equal to this prop rather than a `<button>` tag. */
+    to?: string;
+    /** @private */
+    textColor?: 'auto' | string | Interpolation<Enterprise, OptionalThemedProps<Enterprise>> | Interpolation<Prisma, OptionalThemedProps<Prisma>>;
+    /**
+     * The value returned with `onClick` events, which can be used to identify the
+     * control when multiple controls share an `onClick` callback. Not to be confused with `initials`.
+     */
+    value?: string;
+}
+type AvatarInteractiveProps = ComponentProps<AvatarPropsBase, 'button'> & {
+    elementRef?: React.Ref<HTMLButtonElement | HTMLAnchorElement>;
+    onClick?: AvatarClickHandler;
+    to?: string;
+};
+type AvatarNonInteractiveProps = ComponentProps<AvatarPropsBase, 'div'> & {
+    elementRef?: React.Ref<HTMLDivElement>;
+    onClick?: never;
+};
+type AvatarProps = AvatarInteractiveProps | AvatarNonInteractiveProps;
+declare function Avatar({ backgroundColor, textColor, initials, image, size, ...otherProps }: AvatarProps): React.JSX.Element;
+declare namespace Avatar {
+    var propTypes: {
+        backgroundColor: PropTypes.Requireable<NonNullable<string | ((...args: any[]) => any) | null | undefined>>;
+        elementRef: PropTypes.Requireable<object>;
+        image: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        initials: PropTypes.Validator<string>;
+        label: PropTypes.Validator<string>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        size: PropTypes.Requireable<string>;
+        to: PropTypes.Requireable<string>;
+        /** @private */
+        textColor: PropTypes.Requireable<NonNullable<string | ((...args: any[]) => any) | null | undefined>>;
+        value: PropTypes.Requireable<string>;
+    };
+}
+export default Avatar;
+export { getInitials, AvatarClickHandler };

package/types/src/Avatar/docs/examples/BackgroundColor.d.ts

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

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

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

package/types/src/Avatar/docs/examples/Image.d.ts

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

package/types/src/Avatar/docs/examples/Interactive.d.ts

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

package/types/src/Avatar/docs/examples/Size.d.ts

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

package/types/src/Avatar/getInitials.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Returns a suitable set of initials for a name. Uses the first character of each
+ * name segment and omits middle segments if the segment count is greater than three.
+ * @param {string} name - The full name.
+ * @returns {string} Limited to three characters. Empty if `name` is empty.
+ * @public
+ */
+declare function getInitials(name: string): string;
+export default getInitials;

package/types/src/Avatar/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Avatar';
+export * from './Avatar';

package/types/src/Box/Box.d.ts

@@ -15,7 +15,7 @@ type BoxProps = ComponentProps<BoxPropsBase, 'div'>;
 /**
  * Box is a utility component to normalize and abstract common layout styles.
  */
-declare function Box({ children, elementRef, flex, tag, inline, ...otherProps }: BoxProps): JSX.Element;
+declare function Box({ children, elementRef, flex, tag, inline, ...otherProps }: BoxProps): React.JSX.Element;
 declare namespace Box {
     var propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;

package/types/src/Breadcrumbs/Breadcrumbs.d.ts

@@ -32,7 +32,7 @@ type BreadcrumbsContextValue = {
     prefix?: string;
 };
 declare const BreadcrumbsContext: React.Context<BreadcrumbsContextValue>;
-declare function Breadcrumbs({ children, elementRef, enableCurrentPage, onClick, ...otherProps }: BreadcrumbsProps): JSX.Element;
+declare function Breadcrumbs({ children, elementRef, enableCurrentPage, onClick, ...otherProps }: BreadcrumbsProps): React.JSX.Element;
 declare namespace Breadcrumbs {
     var propTypes: {
         children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;

package/types/src/Breadcrumbs/Item.d.ts

@@ -37,7 +37,7 @@ interface ItemPropsBase {
     to: string;
 }
 type ItemProps = ComponentProps<ItemPropsBase, 'a'>;
-declare function Item({ enableCurrentPage, endAdornment, isCurrent, label, onClick, startAdornment, to, ...otherProps }: ItemProps): JSX.Element;
+declare function Item({ enableCurrentPage, endAdornment, isCurrent, label, onClick, startAdornment, to, ...otherProps }: ItemProps): React.JSX.Element;
 declare namespace Item {
     var propTypes: {
         elementRef: PropTypes.Requireable<object>;

package/types/src/Breadcrumbs/docs/examples/Adornments.d.ts

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

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

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

package/types/src/Breadcrumbs/docs/examples/CustomizedClick.d.ts

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

package/types/src/Button/Button.d.ts

@@ -1,6 +1,5 @@
-import React, { Component } from 'react';
-import { legacyRefMode } from '@splunk/react-ui/Dropdown';
-import { ClassComponentProps } from '../utils/types';
+import React from 'react';
+import { ComponentProps } from '../utils/types';
 /** @public */
 type ButtonClickHandler = (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>, data: {
     action?: string;
@@ -12,25 +11,29 @@ interface ButtonPropsBase {
     /** Returns a value on click. Use when composing or testing. */
     action?: string;
     /** Changes the style of the button.
-     * @themeNotes The `pill` appearance is deprecated and only supported in Enterprise themes. The `flat` and `toggle` appearances are deprecated and only supported in Prisma themes.
      */
-    appearance?: 'default' | 'secondary' | 'primary' | 'destructive' | 'pill' | 'toggle' | 'flat' | 'subtle';
+    appearance?: 'default' | 'secondary' | 'primary' | 'destructive' | 'destructiveSecondary' | 'subtle';
     /** Removes the right border and border-radius of the button so you can
      * append other elements to it. */
     append?: boolean;
     children?: React.ReactNode;
     /** @private An additional className to add to the button. */
     classNamePrivate?: string;
-    /** Prevents user from clicking the button. If set to `dimmed`, the button
-     * does not respond to mouse events but can still receive focus, and
-     * `aria-disabled` is set to `true`. */
-    disabled?: boolean | 'dimmed';
+    /**
+     * Prevents user from activating the button and adds disabled styling.
+     *
+     * If set to `dimmed`, the component is able to receive focus.
+     * If set to `disabled`, the component is unable to receive focus (as a result of setting the html `disabled` attribute).
+     *
+     * The default behavior when `disabled={true}` is `dimmed`.
+     */
+    disabled?: boolean | 'dimmed' | 'disabled';
     /**
      * A React ref which is set to the DOM element when the component mounts and null when it unmounts.
      */
     elementRef?: React.Ref<HTMLAnchorElement | HTMLButtonElement>;
     /**
-     * @deprecated
+     * @private
      * Turns the button red. If you use this prop, apply other error
      * indicators, such as an error message, to meet accessibility
      * requirements.
@@ -54,7 +57,9 @@ interface ButtonPropsBase {
      * If `Dropdown` is not used, this prop should be used together with `aria-controls` and `aria-expanded`.
      */
     isMenu?: boolean;
-    /** Prevents callback when the button is disabled. */
+    /**
+     * Called when the user activates the button.
+     * */
     onClick?: ButtonClickHandler;
     /**
      * Open the "to" link in a new context, which is usually a new tab or window based on browser settings.
@@ -67,35 +72,16 @@ interface ButtonPropsBase {
     /** Removes the left border and border-radius of the button so you can
      * prepend elements to it. */
     prepend?: boolean;
-    /**
-     * @deprecated This prop is deprecated and will be removed in the next major version.
-     *
-     * Adds the style to make the button appear selected.
-     */
-    selected?: boolean;
     /** Identifies the URL for a link. If set, Splunk UI applies an <a> tag
      * instead of a <button> tag. */
     to?: string;
     /** Returns a value on click. Use when composing or testing. */
     value?: any;
 }
-declare const defaultProps: Required<Pick<ButtonPropsBase, 'appearance' | 'append' | 'disabled' | 'error' | 'inline' | 'isMenu' | 'openInNewContext' | 'prepend'>>;
-type ButtonButtonProps = ClassComponentProps<ButtonPropsBase, typeof defaultProps, 'button'>;
-type ButtonLinkProps = ClassComponentProps<ButtonPropsBase, typeof defaultProps, 'a', 'href'>;
+type ButtonButtonProps = ComponentProps<ButtonPropsBase, 'button'>;
+type ButtonLinkProps = ComponentProps<ButtonPropsBase, 'a', 'href'>;
 type ButtonProps = ButtonButtonProps | ButtonLinkProps;
-declare class Button extends Component<ButtonProps> {
-    private component;
-    static propTypes: React.WeakValidationMap<ButtonProps>;
-    static defaultProps: Required<Pick<ButtonPropsBase, "disabled" | "appearance" | "inline" | "error" | "openInNewContext" | "append" | "prepend" | "isMenu">>;
-    static [legacyRefMode]: boolean;
-    constructor(props: Readonly<ButtonProps>);
-    private handleClick;
-    private handleMount;
-    /**
-     * Places focus on the button.
-     */
-    focus(): void;
-    render(): JSX.Element;
-}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 export default Button;
 export { ButtonClickHandler };
+export type { ButtonPropsBase };

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

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

package/types/src/Button/docs/examples/Block.d.ts

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

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

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

package/types/src/Button/docs/examples/Icons.d.ts

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

package/types/src/Button/docs/examples/Menus.d.ts

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

package/types/src/Button/docs/examples/To.d.ts

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

package/types/src/Button/docs/examples/Truncated.d.ts

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

package/types/src/ButtonGroup/ButtonGroup.d.ts

@@ -12,7 +12,7 @@ interface ButtonGroupPropsBase {
     elementRef?: React.Ref<HTMLDivElement>;
 }
 type ButtonGroupProps = ComponentProps<ButtonGroupPropsBase, 'div'>;
-declare function ButtonGroup({ children, ...otherProps }: ButtonGroupProps): JSX.Element;
+declare function ButtonGroup({ children, elementRef, ...otherProps }: ButtonGroupProps): React.JSX.Element;
 declare namespace ButtonGroup {
     var propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;

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

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