@splunk/react-ui 4.45.0 → 4.47.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "4.45.0",
+  "version": "4.47.0",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -45,7 +45,7 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@splunk/react-icons": "^4.14.0",
-    "@splunk/themes": "^0.24.0",
+    "@splunk/themes": "^0.25.0",
     "@splunk/ui-utils": "^1.8.0",
     "commonmark": "^0.30.0",
     "commonmark-react-renderer": "^4.3.2",

package/types/src/Code/Code.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ComponentProps } from '../utils/types';
-type CodeSupportedLanguages = 'bash' | 'clike' | 'css' | 'html' | 'json' | 'javascript' | 'js' | 'jsx' | 'typescript' | 'ts' | 'tsx' | 'markup' | 'mathml' | 'plain' | 'plaintext' | 'splunk-spl' | 'svg' | 'text' | 'txt' | 'xml' | 'yaml' | 'yml';
+type CodeSupportedLanguages = 'bash' | 'clike' | 'css' | 'html' | 'json' | 'javascript' | 'js' | 'jsx' | 'typescript' | 'ts' | 'tsx' | 'markup' | 'mathml' | 'plain' | 'plaintext' | 'splunk-spl' | 'sql' | 'svg' | 'text' | 'txt' | 'xml' | 'yaml' | 'yml';
 interface CodePropsBase {
     /**
      * A React ref which is set to the DOM element when the component mounts and null when it unmounts.

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

@@ -3,7 +3,10 @@ import PropTypes from 'prop-types';
 import { JSONElement } from './JSONTree';
 import { TreeItemPropsBase } from '../Tree';
 import { ComponentProps } from '../utils/types';
-export type ExpandLinkHandler = (data: {
+export type ExpandLinkRenderer = (params: {
+    onToggleExpansion: (event: React.KeyboardEvent<HTMLLIElement> | React.MouseEvent<HTMLSpanElement>, data?: {
+        treeItemId?: string;
+    }) => void;
     open: boolean;
     withTooltip: boolean;
     expandLinkRef: React.RefObject<HTMLButtonElement>;
@@ -20,7 +23,7 @@ interface JSONTreeItemPropsBase extends TreeItemPropsBase {
     properties?: string[];
     propertyDataPath: string;
     propertyElement?: JSX.Element | undefined;
-    renderExpandLink?: ExpandLinkHandler;
+    renderExpandLink?: ExpandLinkRenderer;
     representation?: JSX.Element | JSX.Element[];
     value?: JSONElement;
 }

package/types/src/Table/HeadCell.d.ts

@@ -71,6 +71,10 @@ interface HeadCellPropsBase {
      * The `sortKey` is passed in the data object to the `onSort` callback, if provided.
      */
     sortKey?: string;
+    /**
+     * Content to show in a tooltip.
+     */
+    tooltip?: React.ReactNode;
     /**
      * Truncate the text in the label. `truncate=false` is not compatible with `Table`'s
      * `onRequestResize`.

package/types/src/Table/HeadInner.d.ts

@@ -12,6 +12,7 @@ interface HeadInnerPropsBase {
     elementRef?: React.Ref<HTMLButtonElement | HTMLDivElement>;
     focusWithin?: boolean;
     hasActionsHead?: boolean;
+    hasTooltip?: boolean;
     id?: string;
     index?: number;
     isMenu?: boolean;
@@ -27,7 +28,7 @@ interface HeadInnerPropsBase {
     variant?: 'toggleAll' | 'info' | 'actions';
 }
 type HeadInnerProps = ComponentProps<HeadInnerPropsBase, 'span'>;
-declare function HeadInner({ index, clickable, columnId, elementRef, focusWithin, id, width: widthProp, onDragEnd, onAutosizeColumn, align, label, hasActionsHead, isMenu, onDragStart, onRequestResize, resizable, sortDir, truncate, variant, ...otherProps }: HeadInnerProps): JSX.Element;
+declare function HeadInner({ index, clickable, columnId, elementRef, focusWithin, id, width: widthProp, onDragEnd, onAutosizeColumn, align, label, hasActionsHead, hasTooltip, isMenu, onDragStart, onRequestResize, resizable, sortDir, truncate, variant, ...otherProps }: HeadInnerProps): JSX.Element;
 declare namespace HeadInner {
     var propTypes: {
         align: PropTypes.Requireable<string>;
@@ -36,6 +37,7 @@ declare namespace HeadInner {
         elementRef: PropTypes.Requireable<object>;
         focusWithin: PropTypes.Requireable<boolean>;
         hasActionsHead: PropTypes.Requireable<boolean>;
+        hasTooltip: PropTypes.Requireable<boolean>;
         id: PropTypes.Requireable<string>;
         index: PropTypes.Requireable<number>;
         isMenu: PropTypes.Requireable<boolean>;

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ComponentProps } from '../utils/types';
+interface TreeItemPropsBase {
+    /** A unique `id` for this item and used by `Tree` to keep track of the focused item. */
+    id: string;
+    /** Should contain `Tree.Item`s, can also include other elements to display in between tree items. */
+    children?: React.ReactNode;
+    /** Content to show on the `Tree.Item`. */
+    content?: React.ReactNode;
+    /**
+     * @private Custom indent to show before `Tree.Item` content.
+     */
+    customIndent?: React.ReactNode;
+    /**
+     * A React ref which is set to the DOM element when the component mounts and null when it unmounts.
+     */
+    elementRef?: React.Ref<HTMLLIElement>;
+    /**
+     * @private Used only by JSONTree - artifact from before Tree was public.
+     * Conventional `endAdornment` in all other cases would instead be just done by including the desired element in `content`.
+     * Left in for JSONTree because the need to support the endAdornment conditionally going to the end of the unordered list of children in the expanded view.
+     * This is required in JSONTree to handle closing bracket/braces but does not have a known use case for other Tree uses.
+     */
+    endAdornment?: React.ReactNode;
+    /** Expansion state of the `Tree.Item`. */
+    expanded?: boolean;
+    onFocus?: React.FocusEventHandler<HTMLLIElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLLIElement>;
+    /** Called on expansion state change of the `Tree.Item` and should be used to maintain `expanded`. For proper keyboard accessibility this is required when a `Tree.Item` has children. */
+    onToggleExpansion?: TreeItemToggleExpansionHandler;
+    /** Called on selection state change of the `Tree.Item` and can be used to maintain optional external `Tree.Item` selection state. */
+    onToggleSelection?: TreeItemToggleSelectionHandler;
+}
+type TreeItemProps = ComponentProps<TreeItemPropsBase, 'li'>;
+type TreeItemClickHandler = (event: React.MouseEvent<HTMLSpanElement>, id: string) => void;
+type TreeItemKeyDownHandler = (event: React.KeyboardEvent<HTMLLIElement>, id: string, isExpanded: boolean | undefined, childrenCleaned: React.ReactElement[] | undefined | null, handleToggleExpansion: TreeItemToggleExpansionHandler) => void;
+/** @public */
+type TreeItemToggleExpansionHandler = (event: React.KeyboardEvent<HTMLLIElement> | React.MouseEvent<HTMLSpanElement>, data?: {
+    treeItemId?: string;
+}) => void;
+/** @public */
+type TreeItemToggleSelectionHandler = (event: React.KeyboardEvent<HTMLLIElement> | React.MouseEvent<HTMLSpanElement>, data?: {
+    treeItemId?: string;
+}) => void;
+declare function Item({ id, children, content, customIndent, elementRef, endAdornment, expanded, onFocus, onKeyDown, onToggleExpansion, onToggleSelection, ...otherProps }: TreeItemProps): JSX.Element;
+declare namespace Item {
+    var propTypes: {
+        id: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        customIndent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        elementRef: PropTypes.Requireable<object>;
+        endAdornment: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        expanded: PropTypes.Requireable<boolean>;
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+        onToggleSelection: PropTypes.Requireable<(...args: any[]) => any>;
+        onToggleExpansion: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+}
+export default Item;
+export { TreeItemClickHandler, TreeItemKeyDownHandler, TreeItemPropsBase, TreeItemToggleExpansionHandler, TreeItemToggleSelectionHandler, };

package/types/src/Tree/Tree.d.ts

@@ -1,24 +1,31 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ComponentProps } from '../utils/types';
-import TreeItem from './TreeItem';
+import Item from './Item';
 type RemoveNodeHandler = (id: string) => void;
 type SetNodeHandler = (id: string, path?: string) => void;
 interface TreePropsBase {
-    /** Should contain TreeItems, can also include other elements to display in between tree items. */
+    /** Should contain `Tree.Item`s, can also include other elements to display in between tree items. */
     children?: React.ReactNode;
     /** Removes default indent from list styles if set to false. */
     defaultIndent?: boolean;
+    /**
+     * A React ref which is set to the DOM element when the component mounts and null when it unmounts.
+     */
+    elementRef?: React.Ref<HTMLUListElement>;
 }
 type TreeProps = ComponentProps<TreePropsBase, 'ul'>;
-declare function Tree({ children, defaultIndent, ...otherProps }: TreeProps): JSX.Element;
+/**
+ * Used to present a hierarchical list.
+ */
+declare function Tree({ children, defaultIndent, elementRef, ...otherProps }: TreeProps): JSX.Element;
 declare namespace Tree {
     var propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         defaultIndent: PropTypes.Requireable<boolean>;
+        elementRef: PropTypes.Requireable<object>;
     };
-    var TreeItem: typeof import("./TreeItem").default;
+    var Item: typeof import("./Item").default;
 }
 export default Tree;
-export { TreeItem };
-export { RemoveNodeHandler, SetNodeHandler };
+export { RemoveNodeHandler, SetNodeHandler, Item };

package/types/src/Tree/TreeContext.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { RemoveNodeHandler, SetNodeHandler } from './Tree';
-import { TreeItemClickHandler, TreeItemKeyDownHandler } from './TreeItem';
+import { TreeItemClickHandler, TreeItemKeyDownHandler } from './Item';
 export interface TreeContext {
     defaultIndent?: boolean;
     onItemKeyDown?: TreeItemKeyDownHandler;

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

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

package/types/src/Tree/docs/examples/ClickableExpansion.d.ts

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

package/types/src/Tree/docs/examples/ClickableExpansionWithSelection.d.ts

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

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

@@ -1,3 +1,3 @@
 export { default } from './Tree';
 export * from './Tree';
-export * from './TreeItem';
+export * from './Item';

package/types/src/Tree/TreeItem.d.ts

@@ -1,44 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { ComponentProps } from '../utils/types';
-interface TreeItemPropsBase {
-    /** A unique `id` for this item and used by `Tree` to keep track of the focused item. */
-    id: string;
-    /** Should contain `TreeItems`, can also include other elements to display in between tree items. */
-    children?: React.ReactNode;
-    /** Content to show on the TreeItem. */
-    content?: React.ReactNode;
-    /** Custom indent to show before TreeItem content. */
-    customIndent?: React.ReactNode;
-    endAdornment?: React.ReactNode;
-    labelledBy?: string;
-    onFocus?: React.FocusEventHandler<HTMLLIElement>;
-    onKeyDown?: React.KeyboardEventHandler<HTMLLIElement>;
-    onToggle?: TreeItemToggleHandler;
-    /** Default open state of the node. */
-    open?: boolean;
-    /** Toggle to pass that opens/closes the node on click. */
-    toggle?: React.ReactElement;
-}
-type TreeItemProps = ComponentProps<TreeItemPropsBase, 'li'>;
-type TreeItemClickHandler = (event: React.MouseEvent<HTMLSpanElement>, id: string) => void;
-type TreeItemKeyDownHandler = (event: React.KeyboardEvent<HTMLLIElement>, id: string, showChildren: boolean | undefined, childrenCleaned: React.ReactElement[] | undefined | null, handleToggle: TreeItemToggleHandler) => void;
-type TreeItemToggleHandler = (isOpen: boolean, event?: React.KeyboardEvent<HTMLLIElement> | React.MouseEvent<HTMLSpanElement>) => void;
-declare function TreeItem({ id, children, content, customIndent, endAdornment, labelledBy, onFocus, onKeyDown, onToggle, open, toggle, ...otherProps }: TreeItemProps): JSX.Element;
-declare namespace TreeItem {
-    var propTypes: {
-        id: PropTypes.Requireable<string>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        customIndent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        endAdornment: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        labelledBy: PropTypes.Requireable<string>;
-        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
-        onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
-        onToggle: PropTypes.Requireable<(...args: any[]) => any>;
-        open: PropTypes.Requireable<boolean>;
-        toggle: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    };
-}
-export default TreeItem;
-export { TreeItemClickHandler, TreeItemKeyDownHandler, TreeItemPropsBase, TreeItemToggleHandler };