@splunk/react-ui 4.27.0 → 4.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "4.27.0",
+  "version": "4.28.0",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",

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

@@ -6,7 +6,8 @@ interface BoxPropsBase {
     /**
      * A React ref which is set to the DOM element when the component mounts and null when it unmounts.
      */
-    elementRef?: React.Ref<HTMLDivElement>;
+    elementRef?: React.Ref<HTMLElement>;
+    tag?: keyof JSX.IntrinsicElements;
     flex?: boolean;
     inline?: boolean;
 }
@@ -14,7 +15,7 @@ declare type BoxProps = ComponentProps<BoxPropsBase, 'div'>;
 /**
  * Box is a utility component to normalize and abstract common layout styles.
  */
-declare function Box({ children, elementRef, flex, inline, ...otherProps }: BoxProps): JSX.Element;
+declare function Box({ children, elementRef, flex, tag, inline, ...otherProps }: BoxProps): JSX.Element;
 declare namespace Box {
     var propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;

package/types/src/File/docs/examples/FullScreen.d.ts

@@ -1,15 +1,2 @@
-import { Component } from 'react';
-import { FileRequestAddHandler } from '@splunk/react-ui/File';
-declare class Fullscreen extends Component<{}, {
-    filename?: string;
-    open: boolean;
-}> {
-    private fileReader;
-    constructor(props: {});
-    handleAddFiles: FileRequestAddHandler;
-    handleRemoveFile: () => void;
-    handleOpen: () => void;
-    handleClose: () => void;
-    render(): JSX.Element;
-}
+declare function Fullscreen(): JSX.Element;
 export default Fullscreen;

package/types/src/JSONTree/JSONTreeItem.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { JSONElement } from './JSONTree';
+import { TreeItemPropsBase } from '../Tree';
+import { ComponentProps } from '../utils/types';
+declare type ExpandLinkHandler = (data: {
+    open: boolean;
+    withTooltip: boolean;
+}) => {
+    expandLink: JSX.Element;
+    expandLinkRef: React.RefObject<HTMLButtonElement>;
+};
+interface JSONTreeItemPropsBase extends TreeItemPropsBase {
+    clickableKeyRef?: React.RefObject<HTMLButtonElement> | undefined;
+    clickableValRef?: React.RefObject<HTMLButtonElement> | undefined;
+    hasChildren?: boolean;
+    indentArray?: string[];
+    index: number;
+    initialOpenState: boolean;
+    properties?: string[];
+    propertyDataPath: string;
+    propertyElement?: JSX.Element | undefined;
+    renderExpandLink?: ExpandLinkHandler;
+    representation?: JSX.Element | JSX.Element[];
+    value?: JSONElement;
+}
+declare type JSONTreeItemProps = ComponentProps<JSONTreeItemPropsBase, 'li'>;
+export declare function JSONTreeItem({ clickableKeyRef, clickableValRef, hasChildren, indentArray, index, initialOpenState, onFocus, properties, propertyDataPath, propertyElement, renderExpandLink, representation, value, ...otherProps }: JSONTreeItemProps): JSX.Element;
+export declare namespace JSONTreeItem {
+    var propTypes: {
+        clickableKeyRef: PropTypes.Requireable<object>;
+        clickableValRef: PropTypes.Requireable<object>;
+        hasChildren: PropTypes.Requireable<boolean>;
+        indentArray: PropTypes.Requireable<(string | null | undefined)[]>;
+        index: PropTypes.Requireable<number>;
+        initialOpenState: PropTypes.Requireable<boolean>;
+        properties: PropTypes.Requireable<(string | null | undefined)[]>;
+        propertyDataPath: PropTypes.Requireable<string>;
+        propertyElement: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        renderExpandLink: PropTypes.Requireable<(...args: any[]) => any>;
+        representation: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        value: PropTypes.Requireable<string | number | boolean | object>;
+    };
+}
+export {};

package/types/src/JSONTree/renderTreeItems.d.ts

@@ -0,0 +1,17 @@
+import { JSONElement, JSONTreeClickKeyHandler, JSONTreeClickValueHandler } from './JSONTree';
+declare type renderTreeItemsProps = {
+    defaultOpen?: boolean;
+    expandChildren?: boolean | 'withShiftModifier';
+    expandChildrenOnShiftKey?: boolean;
+    indent?: number;
+    indentLevel?: number;
+    obj: JSONElement;
+    onClickKey?: JSONTreeClickKeyHandler;
+    onClickValue?: JSONTreeClickValueHandler;
+    overflow?: 'wrap' | 'scroll';
+    path?: (string | number)[];
+    shift?: boolean;
+    updateShift: ((newShift: boolean) => void) | undefined;
+};
+export declare function renderTreeItems({ defaultOpen, expandChildren, expandChildrenOnShiftKey, indent, indentLevel, obj, onClickKey, onClickValue, overflow, path, shift, updateShift, }: renderTreeItemsProps): JSX.Element | JSX.Element[];
+export {};

package/types/src/Markdown/renderers/MarkdownAnchorHeading.d.ts

@@ -6,7 +6,7 @@ interface MarkdownAnchorHeadingPropsBase {
     level: 1 | 2 | 3 | 4 | 5 | 6;
 }
 declare type MarkdownAnchorHeadingProps = ComponentProps<MarkdownAnchorHeadingPropsBase, 'h1'>;
-declare function MarkdownAnchorHeading({ level, children }: MarkdownAnchorHeadingProps): JSX.Element;
+declare function MarkdownAnchorHeading({ level, children, ...otherProps }: MarkdownAnchorHeadingProps): JSX.Element;
 declare namespace MarkdownAnchorHeading {
     var propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;

package/types/src/Markdown/renderers/MarkdownBlockquote.d.ts

@@ -5,7 +5,7 @@ interface MarkdownBlockquotePropsBase {
     children: React.ReactNode[];
 }
 declare type MarkdownBlockquoteProps = ComponentProps<MarkdownBlockquotePropsBase, 'blockquote'>;
-declare function MarkdownBlockquote({ children }: MarkdownBlockquoteProps): JSX.Element;
+declare function MarkdownBlockquote({ children, ...otherProps }: MarkdownBlockquoteProps): JSX.Element;
 declare namespace MarkdownBlockquote {
     var propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;

package/types/src/Markdown/renderers/MarkdownCode.d.ts

@@ -5,7 +5,7 @@ interface MarkdownCodePropsBase {
     literal: string;
 }
 declare type MarkdownCodeProps = ComponentProps<MarkdownCodePropsBase, 'code'>;
-declare function MarkdownCode({ literal }: MarkdownCodeProps): JSX.Element;
+declare function MarkdownCode({ literal, ...otherProps }: MarkdownCodeProps): JSX.Element;
 declare namespace MarkdownCode {
     var propTypes: {
         literal: PropTypes.Requireable<string>;

package/types/src/Markdown/renderers/MarkdownCodeBlock.d.ts

@@ -5,7 +5,7 @@ interface MarkdownCodeBlockPropsBase {
     literal: string;
 }
 declare type MarkdownCodeBlockProps = ComponentProps<MarkdownCodeBlockPropsBase, 'div'>;
-declare function MarkdownCodeBlock({ literal, language }: MarkdownCodeBlockProps): JSX.Element;
+declare function MarkdownCodeBlock({ literal, language, ...otherProps }: MarkdownCodeBlockProps): JSX.Element;
 declare namespace MarkdownCodeBlock {
     var propTypes: {
         literal: PropTypes.Requireable<string>;

package/types/src/Markdown/renderers/MarkdownHeading.d.ts

@@ -6,7 +6,7 @@ interface MarkdownHeadingPropsBase {
     level: 1 | 2 | 3 | 4 | 5 | 6;
 }
 declare type MarkdownHeadingProps = ComponentProps<MarkdownHeadingPropsBase, 'h1'>;
-declare function MarkdownHeading({ level, children }: MarkdownHeadingProps): JSX.Element;
+declare function MarkdownHeading({ level, children, ...otherProps }: MarkdownHeadingProps): JSX.Element;
 declare namespace MarkdownHeading {
     var propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;

package/types/src/Markdown/renderers/MarkdownImage.d.ts

@@ -6,7 +6,7 @@ interface MarkdownImagePropsBase {
     title?: string;
 }
 declare type MarkdownImageProps = ComponentProps<MarkdownImagePropsBase, 'img'>;
-declare function MarkdownImage({ src, title, alt }: MarkdownImageProps): JSX.Element;
+declare function MarkdownImage({ src, title, alt, ...otherProps }: MarkdownImageProps): JSX.Element;
 declare namespace MarkdownImage {
     var propTypes: {
         alt: PropTypes.Requireable<string>;

package/types/src/Markdown/renderers/MarkdownItem.d.ts

@@ -5,7 +5,7 @@ interface MarkdownItemPropsBase {
     children: React.ReactNode[];
 }
 declare type MarkdownItemProps = ComponentProps<MarkdownItemPropsBase, 'li'>;
-declare function MarkdownItem({ children }: MarkdownItemProps): JSX.Element;
+declare function MarkdownItem({ children, ...otherProps }: MarkdownItemProps): JSX.Element;
 declare namespace MarkdownItem {
     var propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;

package/types/src/Markdown/renderers/MarkdownList.d.ts

@@ -18,7 +18,7 @@ interface MarkdownListUnorderedPropsBase extends MarkdownListPropsBase {
 declare type MarkdownListOrderedProps = ComponentProps<MarkdownListOrderedPropsBase, 'ol'>;
 declare type MarkdownListUnorderedProps = ComponentProps<MarkdownListUnorderedPropsBase, 'ul'>;
 declare type MarkdownListProps = MarkdownListOrderedProps | MarkdownListUnorderedProps;
-declare function MarkdownList({ children, type }: MarkdownListProps): JSX.Element;
+declare function MarkdownList({ children, type, ...otherProps }: MarkdownListProps): JSX.Element;
 declare namespace MarkdownList {
     var propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;

package/types/src/Markdown/renderers/MarkdownParagraph.d.ts

@@ -5,7 +5,7 @@ interface MarkdownParagraphPropsBase {
     children: React.ReactNode[];
 }
 declare type MarkdownParagraphProps = ComponentProps<MarkdownParagraphPropsBase, 'p'>;
-declare function MarkdownParagraph({ children }: MarkdownParagraphProps): JSX.Element;
+declare function MarkdownParagraph({ children, ...otherProps }: MarkdownParagraphProps): JSX.Element;
 declare namespace MarkdownParagraph {
     var propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;

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

@@ -37,8 +37,6 @@ interface ModalPropsBase {
      * and a reason, which is either 'escapeKey' or 'clickAway'.
      *
      * Generally, use this callback to toggle the `open` prop.
-     *
-     * This callback must return focus to the invoking element or other element that follows the logical flow of the application.
      */
     onRequestClose?: ModalRequestCloseHandler;
     /**
@@ -46,12 +44,13 @@ interface ModalPropsBase {
      */
     open?: boolean;
     /**
-     * Ref of the invoking element (or other element that follows the logical flow of the application) to be focused after the `Modal` is closed.
-     * If you are not using this prop, then you *must* manually return focus to the invoking element in `onRequestClose`.
+     * Pass the ref of the invoking element (or other element that follows the logical flow of the application) to automatically move focus
+     * 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 & {
         focus: () => void;
-    }) | HTMLElement | null>;
+    }) | HTMLElement | null> | (() => void);
 }
 declare const defaultProps: Required<Pick<ModalPropsBase, 'initialFocus' | 'open' | 'divider'>>;
 declare type ModalProps = ClassComponentProps<ModalPropsBase, typeof defaultProps, 'div'>;

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

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

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

@@ -1,10 +1,14 @@
 import React, { Component } from 'react';
-import { PaginatorChangeHandler } from './Paginator';
 import { ClassComponentProps } from '../utils/types';
-declare type PaginatorButtonClickHandler = PaginatorChangeHandler;
+declare type PaginatorButtonClickHandler = (event: React.MouseEvent<HTMLButtonElement>, data: {
+    page?: number;
+}) => void;
 interface PaginatorButtonPropsBase {
     children?: React.ReactNode;
-    label?: React.ReactNode;
+    /** 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';
     /** Callback for button click event */
     onClick?: PaginatorButtonClickHandler;
     /** Index of page */
@@ -21,3 +25,4 @@ declare class PaginatorButton extends Component<PaginatorButtonProps, {}> {
     render(): JSX.Element;
 }
 export default PaginatorButton;
+export { PaginatorButtonClickHandler };

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ComponentProps } from '../utils/types';
+/** @public */
+declare type PaginatorCompactChangeHandler = (event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLInputElement>, data: {
+    direction: 'prev' | 'next';
+    page?: number;
+}) => void;
+/** @public */
+declare type PaginatorCompactRenderLabelCallback = (data: {
+    current?: number;
+    totalPages?: number;
+}) => React.ReactNode;
+interface PaginatorCompactPropsBase {
+    /**
+     * The current page number. If not provided, the component will not keep track of the page number and will not provide it in the callback.
+     */
+    current?: number;
+    /**
+     * A React ref which is set to the DOM element when the component mounts and null when it unmounts.
+     */
+    elementRef?: React.Ref<HTMLElement>;
+    /**
+     * Callback to handle page change.
+     */
+    onChange?: PaginatorCompactChangeHandler;
+    /**
+     * If true, renders the a label for the current and total pages.
+     * Can be passed a function to render a custom label that receives an object with current and totalPages as an argument.
+     */
+    renderLabel?: boolean | PaginatorCompactRenderLabelCallback;
+    /**
+     * The total number of pages.
+     * If not provided, the component will operate in indeterminate mode and will not prevent the current page number from exceeding any values.
+     */
+    totalPages?: number;
+}
+declare type PageButtonProps = ComponentProps<PaginatorCompactPropsBase, 'nav'>;
+declare function Compact({ onChange, current, renderLabel, totalPages, ...otherProps }: PageButtonProps): JSX.Element;
+declare namespace Compact {
+    var propTypes: {
+        current: PropTypes.Requireable<number>;
+        elementRef: PropTypes.Requireable<object>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        renderLabel: PropTypes.Requireable<boolean | ((...args: any[]) => any)>;
+        totalPages: PropTypes.Requireable<number>;
+    };
+}
+export default Compact;
+export type { PaginatorCompactChangeHandler, PaginatorCompactRenderLabelCallback };

package/types/src/Paginator/PageControl.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ComponentProps } from '../utils/types';
+/** @public */
+declare type PaginatorPageControlChangeHandler = (event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLInputElement>, data: {
+    page: number;
+}) => void;
+interface PaginatorPageControlPropsBase {
+    /**
+     * Currently selected page.
+     */
+    current?: number;
+    /**
+     * A React ref which is set to the DOM element when the component mounts and null when it unmounts.
+     */
+    elementRef?: React.Ref<HTMLElement>;
+    /**
+     * Callback to handle page change.
+     */
+    onChange?: PaginatorPageControlChangeHandler;
+    /**
+     * The total number of pages.
+     */
+    totalPages: number;
+}
+declare type PageControlProps = ComponentProps<PaginatorPageControlPropsBase, 'nav'>;
+declare function PageControl({ onChange, current, totalPages, ...otherProps }: PageControlProps): JSX.Element;
+declare namespace PageControl {
+    var propTypes: {
+        elementRef: PropTypes.Requireable<object>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        current: PropTypes.Requireable<number>;
+        totalPages: PropTypes.Requireable<number>;
+    };
+}
+export default PageControl;
+export type { PaginatorPageControlChangeHandler };

package/types/src/Paginator/PageSelect.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ComponentProps } from '../utils/types';
+/** @public */
+declare type PaginatorPageSelectChangeHandler = (event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLInputElement>, data: {
+    page: number;
+}) => void;
+interface PaginatorPageSelectPropsBase {
+    /**
+     * Currently selected page.
+     */
+    current: number;
+    /**
+     * Callback to handle page change.
+     */
+    onChange?: PaginatorPageSelectChangeHandler;
+    /**
+     * The total number of pages.
+     */
+    totalPages: number;
+}
+declare type PageControlProps = ComponentProps<PaginatorPageSelectPropsBase, 'div'>;
+declare function PageSelect({ onChange, current, totalPages, ...otherProps }: PageControlProps): JSX.Element;
+declare namespace PageSelect {
+    var propTypes: {
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        current: PropTypes.Requireable<number>;
+        totalPages: PropTypes.Requireable<number>;
+    };
+}
+export default PageSelect;
+export type { PaginatorPageSelectChangeHandler };

package/types/src/Paginator/Paginator.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Compact, { PaginatorCompactChangeHandler } from './Compact';
+import PageControl, { PaginatorPageControlChangeHandler } from './PageControl';
 import { ComponentProps } from '../utils/types';
 /** @public */
 declare type PaginatorChangeHandler = (event: React.MouseEvent<HTMLButtonElement>, data: {
@@ -13,19 +15,21 @@ interface PaginatorPropsBase {
     /**
      * A React ref which is set to the DOM element when the component mounts and null when it unmounts.
      */
-    elementRef?: React.Ref<HTMLDivElement>;
+    elementRef?: React.Ref<HTMLElement>;
     /**
      * Number of pages to display. If greater than `totalPages`, `totalPages` is used instead.
      */
     numPageLinks?: number;
     /** Callback to handle page change. */
     onChange?: PaginatorChangeHandler;
-    /** Total number of pages in collection. This can change as collection populates. */
+    /** The total number of pages. */
     totalPages: number;
 }
-declare type PaginatorProps = ComponentProps<PaginatorPropsBase, 'div'>;
+declare type PaginatorProps = ComponentProps<PaginatorPropsBase, 'nav'>;
 declare function Paginator({ onChange, current, alwaysShowLastPageLink, numPageLinks, totalPages, ...otherProps }: PaginatorProps): JSX.Element | null;
 declare namespace Paginator {
+    var Compact: typeof import("./Compact").default;
+    var PageControl: typeof import("./PageControl").default;
     var propTypes: {
         alwaysShowLastPageLink: PropTypes.Requireable<boolean>;
         current: PropTypes.Requireable<number>;
@@ -36,4 +40,5 @@ declare namespace Paginator {
     };
 }
 export default Paginator;
-export type { PaginatorChangeHandler };
+export { Compact, PageControl };
+export type { PaginatorCompactChangeHandler, PaginatorChangeHandler, PaginatorPageControlChangeHandler, };

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

@@ -0,0 +1,2 @@
+declare function Compact(): JSX.Element;
+export default Compact;

package/types/src/Paginator/docs/examples/CompactCustomLabel.d.ts

@@ -0,0 +1,2 @@
+declare function CompactCustomLabel(): JSX.Element;
+export default CompactCustomLabel;

package/types/src/Paginator/docs/examples/CompactWithLabel.d.ts

@@ -0,0 +1,2 @@
+declare function CompactWithLabel(): JSX.Element;
+export default CompactWithLabel;

package/types/src/Paginator/docs/examples/Labelled.d.ts

@@ -0,0 +1,2 @@
+declare function Labelled(): JSX.Element;
+export default Labelled;

package/types/src/Paginator/docs/examples/PageControl.d.ts

@@ -0,0 +1,2 @@
+declare function PageControl(): JSX.Element;
+export default PageControl;

package/types/src/Paginator/icons/ChevronLeft.d.ts

@@ -0,0 +1,5 @@
+interface ChevronLeftProps {
+    className?: string;
+}
+declare function ChevronLeft({ className }: ChevronLeftProps): JSX.Element;
+export default ChevronLeft;

package/types/src/Paginator/icons/ChevronRight.d.ts

@@ -0,0 +1,5 @@
+interface ChevronRightProps {
+    className?: string;
+}
+declare function ChevronRight({ className }: ChevronRightProps): JSX.Element;
+export default ChevronRight;

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

@@ -1,14 +1,2 @@
-import { Component } from 'react';
-declare class ModalExample extends Component<{}, {
-    activePanelId: string;
-    modalOpen: boolean;
-    transition: 'forward' | 'backward';
-}> {
-    constructor(props: {});
-    goBack: () => void;
-    goForward: () => void;
-    open: () => void;
-    close: () => void;
-    render(): JSX.Element;
-}
+declare function ModalExample(): JSX.Element;
 export default ModalExample;