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

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

@@ -8,17 +8,13 @@ interface HeaderPropsBase {
      */
     children?: React.ReactNode;
     /**
-     * The icon to show before the title.
+     * Hide the closeButton in the Header if `onRequestClose` is provided to `Modal`.
      */
-    icon?: React.ReactNode;
+    hideCloseButton?: boolean;
     /**
-     * If an `onRequestClose` function is provided, the header includes a close
-     * button, which invokes the `onRequestClose` callback when clicked.
-     *
-     * If `Modal`'s `returnFocus` prop isn't used, this callback *must* return focus to the invoking element
-     * or other element that follows the logical flow of the application.
+     * The icon to show before the title.
      */
-    onRequestClose?: React.MouseEventHandler<HTMLButtonElement>;
+    icon?: React.ReactNode;
     /**
      * Used as the main heading.
      */
@@ -32,14 +28,14 @@ type HeaderProps = ComponentProps<HeaderPropsBase, 'div'>;
 /**
  * A styled container for `Modal` header content.
  */
-declare function Header({ children, icon, onRequestClose, subtitle, title, ...otherProps }: HeaderProps): JSX.Element;
+declare function Header({ children, icon, hideCloseButton, title, subtitle, ...otherProps }: HeaderProps): React.JSX.Element;
 declare namespace Header {
     var propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        onRequestClose: PropTypes.Requireable<(...args: any[]) => any>;
-        subtitle: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        hideCloseButton: PropTypes.Requireable<boolean>;
         title: PropTypes.Requireable<string>;
+        subtitle: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     };
 }
 export default Header;

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

@@ -1,12 +1,13 @@
-import React, { Component } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import Body from './Body';
 import Footer from './Footer';
 import Header from './Header';
-import { ClassComponentProps } from '../utils/types';
+import { ComponentProps } from '../utils/types';
 /** @public */
 type ModalRequestCloseHandler = (data: {
-    event: React.MouseEvent<HTMLDivElement> | MouseEvent | KeyboardEvent | TouchEvent;
-    reason: 'clickAway' | 'escapeKey';
+    event: React.MouseEvent<HTMLDivElement | HTMLAnchorElement | HTMLButtonElement> | MouseEvent | KeyboardEvent | TouchEvent;
+    reason: 'clickAway' | 'escapeKey' | 'clickCloseButton';
 }) => void;
 type ModalInitialFocus = 'first' | 'container' | (React.Component & {
     focus: () => void;
@@ -39,7 +40,10 @@ interface ModalPropsBase {
     initialFocus?: ModalInitialFocus;
     /**
      * Called when a close event occurs. The callback is passed the event
-     * and a reason, which is either 'escapeKey' or 'clickAway'.
+     * and a reason, which is 'escapeKey', 'clickAway', or 'clickCloseButton'.
+     *
+     * When `Modal` includes this prop, a close button is displayed by default in the `Modal.Header`.
+     * To hide the close button, pass the `hideCloseButton` prop to `Modal.Header`.
      *
      * Generally, use this callback to toggle the `open` prop.
      */
@@ -53,36 +57,26 @@ interface ModalPropsBase {
      * to the invoking element on `Modal` close. If using a ref is not possible, you *must* pass a function that sets focus to the appropriate element.
      * This function will be called after `onRequestClose`.
      */
-    returnFocus?: React.MutableRefObject<(React.Component & {
+    returnFocus: React.MutableRefObject<(React.Component & {
         focus: () => void;
     }) | HTMLElement | null> | (() => void);
 }
-declare const defaultProps: Required<Pick<ModalPropsBase, 'closeOnClickAway' | 'divider' | 'initialFocus' | 'open'>>;
-type ModalProps = ClassComponentProps<ModalPropsBase, typeof defaultProps, 'div'>;
-declare class Modal extends Component<ModalProps> {
-    private el;
-    private initialFocusTimeoutId;
-    private initialFocus;
-    private headerTitleId;
-    private headerSubtitleId;
-    static propTypes: React.WeakValidationMap<ModalProps>;
-    static defaultProps: Required<Pick<ModalPropsBase, "open" | "divider" | "closeOnClickAway" | "initialFocus">>;
-    static Header: typeof Header;
-    static Body: typeof Body;
-    static Footer: typeof Footer;
-    constructor(props: Readonly<ModalProps>);
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: ModalProps): void;
-    private getDefaultMotionStyle;
-    private getMotionStyle;
-    private handleFocus;
-    private handleModalMount;
-    private handleModalKeyDown;
-    private handleRequestClose;
-    private getProviderValue;
-    private getModalStyles;
-    private renderModal;
-    render(): JSX.Element;
+type ModalProps = ComponentProps<ModalPropsBase, 'div'>;
+declare function Modal({ children, closeOnClickAway, elementRef, divider, initialFocus, onRequestClose, open, returnFocus, style, ...otherProps }: ModalProps): React.JSX.Element;
+declare namespace Modal {
+    var propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        closeOnClickAway: PropTypes.Requireable<boolean>;
+        divider: PropTypes.Requireable<string>;
+        elementRef: PropTypes.Requireable<object>;
+        initialFocus: PropTypes.Requireable<NonNullable<string | object | null | undefined>>;
+        onRequestClose: PropTypes.Requireable<(...args: any[]) => any>;
+        open: PropTypes.Requireable<boolean>;
+        returnFocus: PropTypes.Validator<object>;
+    };
+    var Header: typeof import("./Header").default;
+    var Footer: typeof import("./Footer").default;
+    var Body: typeof import("./Body").default;
 }
 export default Modal;
 export { Body, Header, Footer, ModalRequestCloseHandler };

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

@@ -1,8 +1,10 @@
 /// <reference types="react" />
+import { ModalRequestCloseHandler } from './Modal';
 export interface ModalContext {
     divider?: 'header' | 'footer' | 'both' | 'none';
     titleId?: string;
     subtitleId?: string;
+    onRequestClose?: ModalRequestCloseHandler;
 }
 export declare const ModalContext: import("react").Context<ModalContext>;
 export default ModalContext;

package/types/src/Modal/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/Modal/docs/examples/InitialFocus.d.ts

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

package/types/src/Modal/docs/examples/TypicalUsage.d.ts

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

package/types/src/Modal/docs/examples/Undismissable.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/ModalLayer/ModalLayer.d.ts

@@ -61,7 +61,7 @@ declare class ModalLayer extends Component<ModalLayerProps, ModalLayerState> {
     private handleClickAway;
     private handleAnimationEnd;
     private renderLayer;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export default ModalLayer;
 export { ModalLayerRequestCloseHandler, ModalLayerRenderModalHandler };

package/types/src/Monogram/Monogram.d.ts

@@ -5,7 +5,7 @@ import { ComponentProps } from '../utils/types';
 type MonogramClickHandler = (event: React.MouseEvent<HTMLButtonElement>, data: {
     name?: string;
 }) => void;
-type MonogramSize = 'small' | 'medium' | 'large' | 'xlarge' | number;
+type MonogramSize = 'small' | 'medium' | 'large' | number;
 interface MonogramPropsBase {
     /**
      * All CSS color definitions are supported, such as `#223344` or `red`.
@@ -24,11 +24,7 @@ interface MonogramPropsBase {
     name?: string;
     /** Enables interactive mode. */
     onClick?: MonogramClickHandler;
-    /**
-     *  @deprecated The `xlarge` option has been marked for deprecation and will be removed in a future major version.
-     *
-     * Adjusts the size of the `Monogram`.
-     */
+    /** Adjusts the size of the `Monogram`. */
     size?: MonogramSize;
 }
 type MonogramInteractiveProps = ComponentProps<MonogramPropsBase, 'button'> & {
@@ -48,7 +44,7 @@ type MonogramProps = MonogramInteractiveProps | MonogramNonInteractiveProps;
  * @public
  */
 declare function getInitials(name: string): string;
-declare function Monogram({ backgroundColor, initials, size, ...otherProps }: MonogramProps): JSX.Element;
+declare function Monogram({ backgroundColor, initials, size, ...otherProps }: MonogramProps): React.JSX.Element;
 declare namespace Monogram {
     var propTypes: {
         backgroundColor: PropTypes.Requireable<string>;

package/types/src/Monogram/docs/examples/BackgroundAuto.d.ts

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

package/types/src/Monogram/docs/examples/BackgroundCustom.d.ts

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

package/types/src/Monogram/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;

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

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

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

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

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

@@ -164,7 +164,7 @@ declare class Compact extends Component<CompactProps, CompactState> {
     static Option: typeof Option;
     static Divider: typeof Divider;
     static Heading: typeof Heading;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export default Compact;
 export { CompactPropsBase };

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

@@ -5,7 +5,7 @@ import { CompactPropsBase } from './Compact';
 import Option from './Option';
 import { ClassComponentProps } from '../utils/types';
 /** @public */
-type MultiselectFilterChangeHandler = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | React.FocusEvent<HTMLInputElement> | React.MouseEvent<HTMLSpanElement> | React.KeyboardEvent, data: {
+type MultiselectFilterChangeHandler = (event: React.ChangeEvent<HTMLInputElement> | React.FocusEvent<HTMLInputElement> | React.MouseEvent<HTMLSpanElement> | React.KeyboardEvent, data: {
     keyword: string;
 }) => void;
 /** @public */
@@ -206,7 +206,7 @@ declare class Multiselect extends Component<MultiselectProps, {}> {
     static Option: typeof Option;
     static Heading: typeof Heading;
     static Divider: typeof Divider;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export default Multiselect;
 export { Divider, Heading, MultiselectChangeHandler, MultiselectFilterChangeHandler, MultiselectScrollBottomHandler, Option, };

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

@@ -178,6 +178,6 @@ declare class Normal extends Component<NormalProps, NormalState> {
     private renderButtons;
     private renderMenu;
     private getSelectedItemsContent;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export default Normal;

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

@@ -94,7 +94,7 @@ declare class Option extends PureComponent<OptionProps, {}> {
      * Place focus on the button.
      */
     focus(): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export default Option;
 export { OptionClickHandler };

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

@@ -1,10 +1,10 @@
-import { Component } from 'react';
+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(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export default Children;

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

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

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

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

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

@@ -1,10 +1,10 @@
-import { Component } from 'react';
+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(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export default Controlled;

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

@@ -1,10 +1,10 @@
-import { Component } from 'react';
+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(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export default CustomizeSelected;

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

@@ -1,10 +1,10 @@
-import { Component } from 'react';
+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(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export default Disabled;

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

@@ -1,10 +1,10 @@
-import { Component } from 'react';
+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(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export default MultiselectError;

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

@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import React, { Component } from 'react';
 import { MultiselectChangeHandler, MultiselectFilterChangeHandler } from '@splunk/react-ui/Multiselect';
 import { Movie, MovieOption } from '@splunk/react-ui/fixtures/FetchOptions';
 interface ExampleState {
@@ -15,9 +15,9 @@ declare class Fetching extends Component<{}, ExampleState> {
     handleChange: MultiselectChangeHandler;
     handleFetch: (keyword?: string) => void;
     handleFilterChange: MultiselectFilterChangeHandler;
-    createOption: (movie: Movie | MovieOption, isSelected?: boolean) => JSX.Element;
-    generateOptions: () => JSX.Element[];
+    createOption: (movie: Movie | MovieOption, isSelected?: boolean) => React.JSX.Element;
+    generateOptions: () => React.JSX.Element[];
     footerMessage: () => string | null;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export default Fetching;

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

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

package/types/src/Multiselect/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/Multiselect/docs/examples/LoadMoreOnScrollBottom.d.ts

@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import React, { Component } from 'react';
 import { MultiselectChangeHandler, MultiselectFilterChangeHandler } from '@splunk/react-ui/Multiselect';
 import { Movie, MovieOption } from '@splunk/react-ui/fixtures/FetchOptions';
 interface ExampleState {
@@ -18,9 +18,9 @@ declare class LoadMoreOnScrollBottom extends Component<{}, ExampleState> {
     handleFetchMore: (currentOptions: MovieOption[]) => void;
     handleFilterChange: MultiselectFilterChangeHandler;
     handleScrollBottom: () => void;
-    createOption: (movie: Movie | MovieOption, isSelected?: boolean) => JSX.Element;
-    generateOptions: () => JSX.Element[];
+    createOption: (movie: Movie | MovieOption, isSelected?: boolean) => React.JSX.Element;
+    generateOptions: () => React.JSX.Element[];
     footerMessage: () => string;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export default LoadMoreOnScrollBottom;

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

@@ -1,10 +1,10 @@
-import { Component } from 'react';
+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(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export default NewValues;

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

@@ -1,10 +1,10 @@
-import { Component } from 'react';
+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(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export default TabInput;

package/types/src/Multiselect/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/NonInteractiveCheckbox/NonInteractiveCheckbox.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ComponentProps } from '../utils/types';
+interface NonInteractiveCheckboxPropsBase {
+    disabled?: boolean | 'dimmed';
+    selected?: boolean | 'some';
+}
+type NonInteractiveCheckboxProps = ComponentProps<NonInteractiveCheckboxPropsBase, 'div'>;
+/**
+ * NonInteractiveCheckbox is a private component that replaces our internal usage of Switch's interactive={false}
+ * with react-icons instead in 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>>;
+        selected: PropTypes.Requireable<NonNullable<string | boolean | null | undefined>>;
+    };
+}
+export default NonInteractiveCheckbox;

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

@@ -0,0 +1 @@
+export { default } from './NonInteractiveCheckbox';