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

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

@@ -1,131 +1,122 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Options } from 'react-markdown';
 import { ComponentProps } from '../utils/types';
-import { MarkdownBlockquote, MarkdownCodeBlock, MarkdownCode, MarkdownHeading, MarkdownAnchorHeading, MarkdownImage, MarkdownItem, MarkdownLink, MarkdownList, MarkdownParagraph } from './renderers';
+import { MarkdownAnchorHeading, MarkdownBlockquote, MarkdownCodeBlock, MarkdownCode, MarkdownHeading, MarkdownImage, MarkdownItem, MarkdownLink, MarkdownList, MarkdownParagraph } from './renderers';
 /** @public */
-type AnchorHeadingRenderer = (data: {
+type RemarkReturn = React.ReactElement<any, any> | null;
+/** @public */
+type AnchorHeadingRenderer = (props: {
     children: React.ReactNode[];
-    level: 1 | 2 | 3 | 4 | 5 | 6;
-    nodeKey: string;
-}) => React.ReactNode;
+    level: number;
+}) => RemarkReturn;
 /** @public */
-type BlockquoteRenderer = (data: {
+type BlockquoteRenderer = (props: {
     children: React.ReactNode[];
-    nodeKey: string;
-}) => React.ReactNode;
+}) => RemarkReturn;
 /** @public */
-type CodeRenderer = (data: {
-    inline: true;
-    literal: string;
-    nodeKey: string;
-}) => React.ReactNode;
+type CodeRenderer = (props: {
+    children: React.ReactNode[];
+}) => RemarkReturn;
 /** @public */
-type CodeBlockRenderer = (data: {
+type CodeBlockRenderer = (props: {
     language?: string;
-    literal: string;
-    nodeKey: string;
-}) => React.ReactNode;
+    children: React.ReactNode[];
+}) => RemarkReturn;
 /** @public */
-type HeadingRenderer = (data: {
+type HeadingRenderer = (props: {
     children: React.ReactNode[];
-    level: 1 | 2 | 3 | 4 | 5 | 6;
-    nodeKey: string;
-}) => React.ReactNode;
+    level: number;
+}) => RemarkReturn;
 /** @public */
-type ImageRenderer = (data: {
-    alt: string;
-    nodeKey: string;
-    src: string;
+type ImageRenderer = (props: {
+    alt?: string;
+    src?: string;
     title?: string;
-}) => React.ReactNode;
+}) => RemarkReturn;
 /** @public */
-type ItemRenderer = (data: {
+type ItemRenderer = (props: {
     children: React.ReactNode[];
-    nodeKey: string;
-}) => React.ReactNode;
+}) => RemarkReturn;
 /** @public */
-type LinkRenderer = (data: {
+type LinkRenderer = (props: {
     children: React.ReactNode[];
-    href: string;
-    nodeKey: string;
+    href?: string;
     title?: string;
-}) => React.ReactNode;
+}) => RemarkReturn;
 /** @public */
-type ListRenderer = (data: {
+type ListRenderer = (props: {
     children: React.ReactNode[];
-    nodeKey: string;
-    start: number | null;
-    tight: boolean;
-    type: 'bullet' | 'ordered';
+    depth: number;
     ordered: boolean;
-}) => React.ReactNode;
+}) => RemarkReturn;
 /** @public */
-type ParagraphRenderer = (data: {
+type ParagraphRenderer = (props: {
     children: React.ReactNode[];
-    nodeKey: string;
-}) => React.ReactNode;
+}) => RemarkReturn;
 interface MarkdownPropsBase {
     /**
-     * A custom blockquote renderer. The function is passed an object containing `children` and `nodeKey`.
+     * A custom blockquote renderer. The function is passed an object containing `children`.
      */
     blockquoteRenderer?: BlockquoteRenderer;
     /**
-     * A custom code literal renderer. The function is passed an object containing `literal`,
-     * `inline`, and `nodeKey`.
+     * A custom code literal renderer. The function is passed an object containing `children`.
      */
     codeRenderer?: CodeRenderer;
     /**
      * A custom code block renderer. The function is passed an object containing `language`,
-     * `literal`, and `nodeKey`. It supports the same languages as used in the `Code` component.
+     * and `children`. It supports the same languages as the `Code` component.
      */
     codeBlockRenderer?: CodeBlockRenderer;
     /**
      * 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>;
     /**
      * A custom heading renderer. The function is passed an object containing `level` from 1 to
-     * 6, `children`, and `nodeKey`.
+     * 6 and `children`.
      */
     headingRenderer?: HeadingRenderer | AnchorHeadingRenderer;
     /**
      * A custom image renderer. The function is passed an object containing `src`, `title`,
-     * `alt`, and `nodeKey`.
+     * and `alt`.
      */
     imageRenderer?: ImageRenderer;
     /**
      * A custom link renderer. This is useful for single-page apps that need to handle links
-     * internally. The function is passed an object containing `href`, `title`, `children`, and `nodeKey`.
+     * internally. The function is passed an object containing `href`, `title`, and `children`.
      */
     linkRenderer?: LinkRenderer;
     /**
-     * A custom list renderer. The function is passed an object containing `start`,
-     * `type` ('bullet' or 'ordered'), `tight`, and `nodeKey`.
+     * A custom list renderer. The function is passed an object containing `ordered`, `depth`, and `children`.
      */
     listRenderer?: ListRenderer;
     /**
-     * A custom list item renderer. The function is passed an object containing `children` and `nodeKey`.
+     * A custom list item renderer. The function is passed an object containing `children`.
      */
     itemRenderer?: ItemRenderer;
     /**
-     * A custom paragraph renderer. The function is passed an object containing `children` and `nodeKey`.
+     * A custom paragraph renderer. The function is passed an object containing `children`.
      */
     paragraphRenderer?: ParagraphRenderer;
     /** The content to be parsed and rendered. */
     text: string;
     /**
      * @private
-     * Object of type RendererOptions that can use used to override the props for ReactCommonmarkRenderer.
+     * Object of type ReactMarkdown.Options that can be used to override the props for ReactMarkdown.
+     *
+     * Note that the `ReactMarkdown.Options` `children` type is omitted in `renderOptions` since that
+     * prop is superseded by `Markdown`'s `text` prop.
      */
-    rendererOptions?: object;
+    rendererOptions?: Omit<Options, 'children'>;
 }
-type MarkdownProps = ComponentProps<MarkdownPropsBase, 'div'>;
+type MarkdownProps = ComponentProps<MarkdownPropsBase, 'section'>;
 /**
  * The `Markdown` component renders the given Markdown text as a React component.
  * The component prefers @splunk/react-ui components over plain HTML components. For example
  * links are rendered as the `@splunk/react-ui/Link` component instead of plain `<a>` tag.
  */
-declare function Markdown({ blockquoteRenderer, codeBlockRenderer, codeRenderer, elementRef, headingRenderer, imageRenderer, itemRenderer, linkRenderer, listRenderer, paragraphRenderer, text, rendererOptions: rendererOptionsOverride, ...otherProps }: MarkdownProps): JSX.Element;
+declare function Markdown({ blockquoteRenderer, codeBlockRenderer, codeRenderer, elementRef, headingRenderer, imageRenderer, itemRenderer, linkRenderer, listRenderer, paragraphRenderer, text, rendererOptions, ...otherProps }: MarkdownProps): React.JSX.Element;
 declare namespace Markdown {
     var propTypes: {
         blockquoteRenderer: PropTypes.Requireable<(...args: any[]) => any>;
@@ -143,4 +134,4 @@ declare namespace Markdown {
     };
 }
 export default Markdown;
-export { MarkdownBlockquote, MarkdownCodeBlock, MarkdownCode, MarkdownHeading, MarkdownAnchorHeading, MarkdownImage, MarkdownItem, MarkdownLink, MarkdownList, MarkdownParagraph, BlockquoteRenderer, CodeBlockRenderer, CodeRenderer, HeadingRenderer, ImageRenderer, ItemRenderer, LinkRenderer, ListRenderer, ParagraphRenderer, };
+export { MarkdownAnchorHeading, MarkdownBlockquote, MarkdownCodeBlock, MarkdownCode, MarkdownHeading, MarkdownImage, MarkdownItem, MarkdownLink, MarkdownList, MarkdownParagraph, BlockquoteRenderer, CodeBlockRenderer, CodeRenderer, HeadingRenderer, ImageRenderer, ItemRenderer, LinkRenderer, ListRenderer, ParagraphRenderer, };

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

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

package/types/src/Markdown/docs/examples/I18n.d.ts

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

package/types/src/Markdown/docs/examples/RenderProps.d.ts

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

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

@@ -1,15 +1,9 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { ComponentProps } from '../../utils/types';
 interface MarkdownAnchorHeadingPropsBase {
     children: React.ReactNode[];
-    level: 1 | 2 | 3 | 4 | 5 | 6;
+    level: number;
 }
 type MarkdownAnchorHeadingProps = ComponentProps<MarkdownAnchorHeadingPropsBase, 'h1'>;
-declare function MarkdownAnchorHeading({ level, children, ...otherProps }: MarkdownAnchorHeadingProps): JSX.Element;
-declare namespace MarkdownAnchorHeading {
-    var propTypes: {
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    };
-}
+declare function MarkdownAnchorHeading({ level, children, ...otherProps }: MarkdownAnchorHeadingProps): React.JSX.Element;
 export default MarkdownAnchorHeading;

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

@@ -1,14 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { StyledHint } from '../MarkdownStyles';
 import { ComponentProps } from '../../utils/types';
 interface MarkdownBlockquotePropsBase {
     children: React.ReactNode[];
 }
 type MarkdownBlockquoteProps = ComponentProps<MarkdownBlockquotePropsBase, 'blockquote'>;
-declare function MarkdownBlockquote({ children, ...otherProps }: MarkdownBlockquoteProps): JSX.Element;
-declare namespace MarkdownBlockquote {
-    var propTypes: {
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    };
-}
+declare function MarkdownBlockquote({ children, ...otherProps }: MarkdownBlockquoteProps): React.JSX.Element;
 export default MarkdownBlockquote;
+export { StyledHint };

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

@@ -1,14 +1,8 @@
-import PropTypes from 'prop-types';
+import React from 'react';
 import { ComponentProps } from '../../utils/types';
 interface MarkdownCodePropsBase {
-    inline: true;
-    literal: string;
+    children?: React.ReactNode;
 }
 type MarkdownCodeProps = ComponentProps<MarkdownCodePropsBase, 'code'>;
-declare function MarkdownCode({ literal, ...otherProps }: MarkdownCodeProps): JSX.Element;
-declare namespace MarkdownCode {
-    var propTypes: {
-        literal: PropTypes.Requireable<string>;
-    };
-}
+declare function MarkdownCode({ children, ...otherProps }: MarkdownCodeProps): React.JSX.Element;
 export default MarkdownCode;

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

@@ -1,15 +1,11 @@
-import PropTypes from 'prop-types';
+import React from 'react';
+import { StyledCodeBlock } from '../MarkdownStyles';
 import { ComponentProps } from '../../utils/types';
 interface MarkdownCodeBlockPropsBase {
+    children: React.ReactNode[];
     language?: string;
-    literal: string;
 }
 type MarkdownCodeBlockProps = ComponentProps<MarkdownCodeBlockPropsBase, 'div'>;
-declare function MarkdownCodeBlock({ literal, language, ...otherProps }: MarkdownCodeBlockProps): JSX.Element;
-declare namespace MarkdownCodeBlock {
-    var propTypes: {
-        literal: PropTypes.Requireable<string>;
-        language: PropTypes.Requireable<string>;
-    };
-}
+declare function MarkdownCodeBlock({ children, language, ...otherProps }: MarkdownCodeBlockProps): React.JSX.Element;
 export default MarkdownCodeBlock;
+export { StyledCodeBlock };

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

@@ -1,15 +1,9 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { ComponentProps } from '../../utils/types';
 interface MarkdownHeadingPropsBase {
-    children: React.ReactNode | React.ReactNode[];
-    level: 1 | 2 | 3 | 4 | 5 | 6;
+    children: React.ReactNode[] | React.ReactNode;
+    level: number;
 }
 type MarkdownHeadingProps = ComponentProps<MarkdownHeadingPropsBase, 'h1'>;
-declare function MarkdownHeading({ level, children, ...otherProps }: MarkdownHeadingProps): JSX.Element;
-declare namespace MarkdownHeading {
-    var propTypes: {
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    };
-}
+declare function MarkdownHeading({ level, children, ...otherProps }: MarkdownHeadingProps): React.JSX.Element;
 export default MarkdownHeading;

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

@@ -1,17 +1,10 @@
-import PropTypes from 'prop-types';
+import React from 'react';
 import { ComponentProps } from '../../utils/types';
 interface MarkdownImagePropsBase {
-    alt: string;
-    src: string;
+    alt?: string;
+    src?: string;
     title?: string;
 }
 type MarkdownImageProps = ComponentProps<MarkdownImagePropsBase, 'img'>;
-declare function MarkdownImage({ src, title, alt, ...otherProps }: MarkdownImageProps): JSX.Element;
-declare namespace MarkdownImage {
-    var propTypes: {
-        alt: PropTypes.Requireable<string>;
-        src: PropTypes.Requireable<string>;
-        title: PropTypes.Requireable<string>;
-    };
-}
+declare function MarkdownImage({ src, title, alt, ...otherProps }: MarkdownImageProps): React.JSX.Element;
 export default MarkdownImage;

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

@@ -1,14 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { ComponentProps } from '../../utils/types';
 interface MarkdownItemPropsBase {
-    children: React.ReactNode[];
+    children?: React.ReactNode;
+    index: number;
+    ordered: boolean;
 }
 type MarkdownItemProps = ComponentProps<MarkdownItemPropsBase, 'li'>;
-declare function MarkdownItem({ children, ...otherProps }: MarkdownItemProps): JSX.Element;
-declare namespace MarkdownItem {
-    var propTypes: {
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    };
-}
+declare function MarkdownItem({ children, ...otherProps }: MarkdownItemProps): React.JSX.Element;
 export default MarkdownItem;

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

@@ -1,18 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { ComponentProps } from '../../utils/types';
 interface MarkdownLinkPropsBase {
-    children: React.ReactNode[];
-    href: string;
+    children?: React.ReactNode;
+    href?: string;
     title?: string;
 }
 type MarkdownLinkProps = ComponentProps<MarkdownLinkPropsBase, 'a'>;
-declare function MarkdownLink({ children, href, ...otherProps }: MarkdownLinkProps): JSX.Element;
-declare namespace MarkdownLink {
-    var propTypes: {
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        href: PropTypes.Requireable<string>;
-        title: PropTypes.Requireable<string>;
-    };
-}
+declare function MarkdownLink({ children, href, ...otherProps }: MarkdownLinkProps): React.JSX.Element;
 export default MarkdownLink;

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

@@ -1,28 +1,12 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { ComponentProps } from '../../utils/types';
 interface MarkdownListPropsBase {
-    children: React.ReactNode[];
-    start: number | null;
-    tight: boolean;
-    type: 'bullet' | 'ordered';
-    ordered: boolean;
+    children?: React.ReactNode;
+    depth: number;
+    ordered?: boolean;
 }
-interface MarkdownListOrderedPropsBase extends MarkdownListPropsBase {
-    type: 'ordered';
-    ordered: boolean;
-}
-interface MarkdownListUnorderedPropsBase extends MarkdownListPropsBase {
-    type: 'bullet';
-}
-type MarkdownListOrderedProps = ComponentProps<MarkdownListOrderedPropsBase, 'ol'>;
-type MarkdownListUnorderedProps = ComponentProps<MarkdownListUnorderedPropsBase, 'ul'>;
+type MarkdownListOrderedProps = ComponentProps<MarkdownListPropsBase, 'ol'>;
+type MarkdownListUnorderedProps = ComponentProps<MarkdownListPropsBase, 'ul'>;
 type MarkdownListProps = MarkdownListOrderedProps | MarkdownListUnorderedProps;
-declare function MarkdownList({ children, type, ...otherProps }: MarkdownListProps): JSX.Element;
-declare namespace MarkdownList {
-    var propTypes: {
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        type: PropTypes.Requireable<string>;
-    };
-}
+declare function MarkdownList({ children, ordered, ...otherProps }: MarkdownListProps): React.JSX.Element;
 export default MarkdownList;

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

@@ -1,14 +1,8 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { ComponentProps } from '../../utils/types';
 interface MarkdownParagraphPropsBase {
     children: React.ReactNode[];
 }
 type MarkdownParagraphProps = ComponentProps<MarkdownParagraphPropsBase, 'p'>;
-declare function MarkdownParagraph({ children, ...otherProps }: MarkdownParagraphProps): JSX.Element;
-declare namespace MarkdownParagraph {
-    var propTypes: {
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    };
-}
+declare function MarkdownParagraph({ children, ...otherProps }: MarkdownParagraphProps): React.JSX.Element;
 export default MarkdownParagraph;

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

@@ -0,0 +1,40 @@
+import React from 'react';
+declare function MarkdownTable({ children, ...otherProps }: {
+    children: React.ReactNode[];
+}): React.JSX.Element;
+declare namespace MarkdownTable {
+    var splunkUiType: string;
+}
+declare function MarkdownTableBody({ children, ...otherProps }: {
+    children: React.ReactNode[];
+}): React.JSX.Element;
+declare namespace MarkdownTableBody {
+    var splunkUiType: string;
+}
+declare function MarkdownTableCell({ children, style, ...otherProps }: {
+    children: React.ReactNode[];
+    style?: React.CSSProperties & Record<string, unknown>;
+}): React.JSX.Element;
+declare namespace MarkdownTableCell {
+    var splunkUiType: string;
+}
+declare function MarkdownTableHead({ children, ...otherProps }: {
+    children: React.ReactNode[];
+}): React.JSX.Element;
+declare namespace MarkdownTableHead {
+    var splunkUiType: string;
+}
+declare function MarkdownTableHeadCell({ children, style, ...otherProps }: {
+    children: React.ReactNode[];
+    style?: React.CSSProperties & Record<string, unknown>;
+}): React.JSX.Element;
+declare namespace MarkdownTableHeadCell {
+    var splunkUiType: string;
+}
+declare function MarkdownTableRow({ children, ...otherProps }: {
+    children: React.ReactNode[];
+}): React.JSX.Element;
+declare namespace MarkdownTableRow {
+    var splunkUiType: string;
+}
+export { MarkdownTable, MarkdownTableBody, MarkdownTableCell, MarkdownTableHead, MarkdownTableHeadCell, MarkdownTableRow, };

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

@@ -1,11 +1,12 @@
-import MarkdownBlockquote from './MarkdownBlockquote';
+import MarkdownAnchorHeading from './MarkdownAnchorHeading';
+import MarkdownBlockquote, { StyledHint } from './MarkdownBlockquote';
 import MarkdownCode from './MarkdownCode';
-import MarkdownCodeBlock from './MarkdownCodeBlock';
+import MarkdownCodeBlock, { StyledCodeBlock } from './MarkdownCodeBlock';
 import MarkdownHeading from './MarkdownHeading';
-import MarkdownAnchorHeading from './MarkdownAnchorHeading';
 import MarkdownImage from './MarkdownImage';
 import MarkdownLink from './MarkdownLink';
 import MarkdownList from './MarkdownList';
 import MarkdownItem from './MarkdownItem';
 import MarkdownParagraph from './MarkdownParagraph';
-export { MarkdownBlockquote, MarkdownCodeBlock, MarkdownCode, MarkdownHeading, MarkdownAnchorHeading, MarkdownImage, MarkdownItem, MarkdownLink, MarkdownList, MarkdownParagraph, };
+import { MarkdownTable, MarkdownTableHeadCell, MarkdownTableCell, MarkdownTableRow, MarkdownTableBody, MarkdownTableHead } from './MarkdownTable';
+export { MarkdownAnchorHeading, MarkdownBlockquote, MarkdownCodeBlock, MarkdownCode, MarkdownHeading, MarkdownImage, MarkdownItem, MarkdownLink, MarkdownList, MarkdownParagraph, MarkdownTable, MarkdownTableBody, MarkdownTableCell, MarkdownTableHead, MarkdownTableHeadCell, MarkdownTableRow, StyledCodeBlock, StyledHint, };

package/types/src/Menu/Divider.d.ts

@@ -1,9 +1,10 @@
+import React from 'react';
 import { ComponentProps } from '../utils/types';
 type DividerProps = ComponentProps<{}, 'div'>;
 /**
  * A non-interactive menu item used to visually separate groups of items in the menu.
  */
-declare function Divider({ ...otherProps }: DividerProps): JSX.Element;
+declare function Divider({ ...otherProps }: DividerProps): React.JSX.Element;
 declare namespace Divider {
     var propTypes: {};
     var filterFirst: boolean;

package/types/src/Menu/Heading.d.ts

@@ -4,8 +4,8 @@ import { ComponentProps } from '../utils/types';
 interface HeadingPropsBase {
     children?: React.ReactNode;
     /**
-     * Renders this heading as the `Menu` title. As a best practice, enable this
-     * only for the first heading in a `Menu`.
+     * Renders this heading as a title to describe the whole `Menu`, which should only
+     * be enabled for the first heading in a `Menu`.
      */
     title?: boolean;
     outerStyle?: React.CSSProperties;
@@ -14,7 +14,7 @@ type HeadingProps = ComponentProps<HeadingPropsBase, 'div'>;
 /**
  * A non-interactive `Menu` item used to separate and label groups of `Menu` items.
  */
-declare function Heading({ children, outerStyle, title, ...otherProps }: HeadingProps): JSX.Element;
+declare function Heading({ children, outerStyle, title, ...otherProps }: HeadingProps): React.JSX.Element;
 declare namespace Heading {
     var propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;