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

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

@@ -1,18 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { UniqueIdentifier } from '@dnd-kit/core';
 import { HeadAutosizeColumnHandler, HeadRequestMoveColumnHandler, HeadRequestResizeColumnHandler } from './Head';
 import { ComponentProps } from '../utils/types';
 type HeadCellAutosizeColumnHandler = HeadAutosizeColumnHandler;
-type HeadCellDragStartHandler = (index: number | undefined, columnId: any) => void;
-type HeadCellKeyDownHandler = (event: React.KeyboardEvent<HTMLTableCellElement>, data: {
-    columnId: any;
+type HeadCellKeyDownHandler = (event: React.KeyboardEvent<HTMLButtonElement | HTMLDivElement>, data: {
+    columnId?: string;
     index: number;
 }) => void;
 type HeadCellRequestMoveColumnHandler = HeadRequestMoveColumnHandler;
 /** @public */
 type HeadCellSortDir = 'asc' | 'desc' | 'none';
-type HeadCellSortHandler = (event: React.MouseEvent<HTMLTableCellElement> | React.KeyboardEvent<HTMLTableCellElement>, data: {
-    columnId: any;
+/** @public */
+type HeadCellSortHandler = (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement> | React.KeyboardEvent<HTMLButtonElement | HTMLDivElement>, data: {
+    columnId?: string;
     id?: string;
     index: number;
     sortDir: HeadCellSortDir;
@@ -26,13 +27,22 @@ interface HeadCellPropsBase {
     appearClickable?: boolean;
     children?: React.ReactNode;
     /**
-     * An `id` that is returned in the draggable, sort, and resize events.
+     * An id that is passed to the `onSort` callback and as `Table`'s `onRequestResizeColumn` callback.
      */
-    columnId?: any;
+    columnId?: string;
+    /** @private. */
+    dragId?: UniqueIdentifier;
     /**
      * A React ref which is set to the DOM element when the component mounts and null when it unmounts.
      */
     elementRef?: React.Ref<HTMLTableCellElement>;
+    /**
+     * A string used to generate the `aria-label` for the head cell during column reordering.
+     *
+     * When the `children` prop is not a string, providing `headCellScreenReaderText` is recommended
+     * to improve the screen reader announcements during the reordering interaction.
+     */
+    headCellScreenReaderText?: string;
     /** @private The index of the cell, skipping the info column. */
     index?: number;
     /** @private. */
@@ -42,8 +52,6 @@ interface HeadCellPropsBase {
      * sortable and renders the appropriate user interface.
      */
     onSort?: HeadCellSortHandler;
-    /** @private. */
-    onDragStart?: HeadCellDragStartHandler;
     /**
      * @private. Passed through and works as expected.
      */
@@ -59,8 +67,6 @@ interface HeadCellPropsBase {
      * resizable to `false` to prevent some columns for resizing.
      */
     resizable?: boolean;
-    /** @private. */
-    showGuideline?: 'none' | 'before' | 'after';
     /**
      * The current sort direction of this column.
      */
@@ -86,30 +92,26 @@ interface HeadCellPropsBase {
     width?: number | 'auto';
     /** @private. */
     variant?: 'toggleAll' | 'info' | 'actions';
-    /**
-     * @private
-     * Used internally to manage overlapping head cell elements, i.e. drag handle
-     */
-    zIndex?: number;
 }
 type HeadCellProps = ComponentProps<HeadCellPropsBase, 'th'>;
-declare function HeadCell({ align, appearClickable, children, columnId, elementRef, id, index, onAutosizeColumn, onClick, onDragStart, onKeyDown, onRequestMoveColumn, onRequestResize, onSort, resizable, showGuideline, sortDir, sortKey, style, truncate: truncateProp, variant, visible, width, zIndex, ...otherProps }: HeadCellProps): React.JSX.Element;
+declare function HeadCell({ align, appearClickable, children, columnId, elementRef, dragId, headCellScreenReaderText, id, index, onAutosizeColumn, onClick, onKeyDown, onRequestMoveColumn, onRequestResize, onSort, resizable, sortDir, sortKey, style, truncate: truncateProp, variant, visible, width, ...otherProps }: HeadCellProps): React.JSX.Element;
 declare namespace HeadCell {
     var propTypes: {
         align: PropTypes.Requireable<string>;
         /** @private Used to set the $clickable appearance without an onClick */
         appearClickable: PropTypes.Requireable<boolean>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        columnId: PropTypes.Requireable<any>;
+        columnId: PropTypes.Requireable<string>;
+        /** @private. */
+        dragId: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
         elementRef: PropTypes.Requireable<object>;
+        headCellScreenReaderText: PropTypes.Requireable<string>;
         /** @private The index of the cell, skipping the info column. */
         index: PropTypes.Requireable<number>;
         /** @private. */
         onAutosizeColumn: PropTypes.Requireable<(...args: any[]) => any>;
         /** @private. */
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
-        /** @private. */
-        onDragStart: PropTypes.Requireable<(...args: any[]) => any>;
         /**
          * @private. Passed through and works as expected.
          */
@@ -120,8 +122,6 @@ declare namespace HeadCell {
         onRequestResize: PropTypes.Requireable<(...args: any[]) => any>;
         onSort: PropTypes.Requireable<(...args: any[]) => any>;
         resizable: PropTypes.Requireable<boolean>;
-        /** @private. */
-        showGuideline: PropTypes.Requireable<string>;
         sortDir: PropTypes.Requireable<string>;
         sortKey: PropTypes.Requireable<string>;
         truncate: PropTypes.Requireable<boolean>;
@@ -134,10 +134,8 @@ declare namespace HeadCell {
          */
         visible: PropTypes.Requireable<boolean>;
         width: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-        /** @private. */
-        zIndex: PropTypes.Requireable<number>;
     };
     var splunkUiType: string;
 }
 export default HeadCell;
-export { HeadCellDragStartHandler, HeadCellKeyDownHandler, HeadCellRequestMoveColumnHandler, HeadCellSortDir, HeadCellSortHandler, };
+export { HeadCellKeyDownHandler, HeadCellRequestMoveColumnHandler, HeadCellSortDir, HeadCellSortHandler, };

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

@@ -1,23 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { UniqueIdentifier } from '@dnd-kit/core';
 import { HeadAutosizeColumnHandler, HeadRequestMoveColumnHandler, HeadRequestResizeColumnHandler } from './Head';
-import { HeadCellDragStartHandler, HeadCellKeyDownHandler } from './HeadCell';
+import { HeadCellKeyDownHandler } from './HeadCell';
 import { ComponentProps } from '../utils/types';
 /** @public */
 type HeadDropdownCellPossibleCloseReason = 'clickAway' | 'contentClick' | 'escapeKey' | 'offScreen' | 'tabKey' | 'toggleClick';
 type HeadDropdownCellAutosizeColumnHandler = HeadAutosizeColumnHandler;
-type HeadDropdownCellDragStartHandler = HeadCellDragStartHandler;
 type HeadDropdownCellKeyDownHandler = HeadCellKeyDownHandler;
 /** @public */
-type HeadDropdownCellRequestCloseHandler = (event: React.MouseEvent<HTMLTableHeaderCellElement | HTMLDivElement> | React.KeyboardEvent<HTMLTableHeaderCellElement> | MouseEvent | KeyboardEvent | TouchEvent | undefined, data: {
-    columnId: any;
+type HeadDropdownCellRequestCloseHandler = (event: React.MouseEvent<HTMLDivElement | HTMLButtonElement> | React.KeyboardEvent<HTMLDivElement | HTMLButtonElement> | MouseEvent | KeyboardEvent | TouchEvent | undefined, data: {
+    columnId?: string;
     index: number;
     reason: HeadDropdownCellPossibleCloseReason;
 }) => void;
 type HeadDropdownCellRequestMoveColumnHandler = HeadRequestMoveColumnHandler;
 /** @public */
-type HeadDropdownCellRequestOpenHandler = (event: React.MouseEvent<HTMLTableHeaderCellElement> | React.KeyboardEvent<HTMLTableHeaderCellElement>, data: {
-    columnId: any;
+type HeadDropdownCellRequestOpenHandler = (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement> | React.KeyboardEvent<HTMLButtonElement | HTMLDivElement>, data: {
+    columnId?: string;
     index: number;
     reason: 'toggleClick';
 }) => void;
@@ -40,13 +40,22 @@ interface HeadDropdownCellPropsBase {
      */
     closeReasons?: HeadDropdownCellPossibleCloseReason[];
     /**
-     * An id that will be returned in the draggable, open, close and resize events.
+     * An id that is passed to the `onSort` callback and as `Table`'s `onRequestResizeColumn` callback.
      */
-    columnId?: any;
+    columnId?: string;
+    /** @private. */
+    dragId?: UniqueIdentifier;
     /**
      * A React ref which is set to the DOM element when the component mounts and null when it unmounts.
      */
     elementRef?: React.Ref<HTMLTableCellElement>;
+    /**
+     * A string used to generate the `aria-label` for the head cell during column reordering.
+     *
+     * When the `label` prop is not a string, providing `headCellScreenReaderText` is recommended
+     * to improve the screen reader announcements during the reordering interaction.
+     */
+    headCellScreenReaderText?: string;
     /**
      * An array of reasons for which to set focus on the toggle. Only subset of `closeReasons`
      * will be honored. When Menu.Items open a Modal or other dialog, it may be necessary to
@@ -62,8 +71,6 @@ interface HeadDropdownCellPropsBase {
     label?: React.ReactNode;
     /** @private. */
     onAutosizeColumn?: HeadDropdownCellAutosizeColumnHandler;
-    /** @private. */
-    onDragStart?: HeadDropdownCellDragStartHandler;
     /**
      * @private. This will be passed through, and will work as expected.
      */
@@ -103,8 +110,6 @@ interface HeadDropdownCellPropsBase {
      * so this is only necessary when the popover contains other types of content.
      */
     retainFocus?: boolean;
-    /** @private. */
-    showGuideline?: 'none' | 'before' | 'after';
     /**
      * When true, the Popover will automatically take focus when 'open' changes to true.
      * Disable this for a Popover that has shows on hover, such as a tooltip.
@@ -127,14 +132,9 @@ interface HeadDropdownCellPropsBase {
      * The width of the column in pixels.
      */
     width?: number;
-    /**
-     * @private
-     * Used internally to manage overlapping head cell elements, i.e. drag handle
-     */
-    zIndex?: number;
 }
 type HeadDropdownCellProps = ComponentProps<HeadDropdownCellPropsBase, 'th'>;
-declare function HeadDropdownCell({ align, canCoverHead, children, closeReasons, columnId, elementRef, focusToggleReasons, id, index, buttonRef, label, onAutosizeColumn, onDragStart, onKeyDown, onRequestClose, onRequestMoveColumn, onRequestOpen, onRequestResize, open, repositionMode, resizable, retainFocus, showGuideline, style, takeFocus, truncate, variant, visible, width, zIndex, ...otherProps }: HeadDropdownCellProps): React.JSX.Element;
+declare function HeadDropdownCell({ align, buttonRef, canCoverHead, children, closeReasons, columnId, dragId, elementRef, headCellScreenReaderText, focusToggleReasons, id, index, label, onAutosizeColumn, onKeyDown, onRequestClose, onRequestMoveColumn, onRequestOpen, onRequestResize, open, repositionMode, resizable, retainFocus, style, takeFocus, truncate, variant, visible, width, ...otherProps }: HeadDropdownCellProps): React.JSX.Element;
 declare namespace HeadDropdownCell {
     var propTypes: {
         align: PropTypes.Requireable<string>;
@@ -142,16 +142,17 @@ declare namespace HeadDropdownCell {
         canCoverHead: PropTypes.Requireable<boolean>;
         children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
         closeReasons: PropTypes.Requireable<(HeadDropdownCellPossibleCloseReason | null | undefined)[]>;
-        columnId: PropTypes.Requireable<any>;
+        columnId: PropTypes.Requireable<string>;
+        /** @private. */
+        dragId: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
         elementRef: PropTypes.Requireable<object>;
+        headCellScreenReaderText: PropTypes.Requireable<string>;
         focusToggleReasons: PropTypes.Requireable<(HeadDropdownCellPossibleCloseReason | null | undefined)[]>;
         /** @private The index of the cell, skipping the info column. */
         index: PropTypes.Requireable<number>;
         label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         /** @private. */
         onAutosizeColumn: PropTypes.Requireable<(...args: any[]) => any>;
-        /** @private. */
-        onDragStart: PropTypes.Requireable<(...args: any[]) => any>;
         /**
          * @private. This will be passed through, and will work as expected.
          */
@@ -166,8 +167,6 @@ declare namespace HeadDropdownCell {
         repositionMode: PropTypes.Requireable<string>;
         resizable: PropTypes.Requireable<boolean>;
         retainFocus: PropTypes.Requireable<boolean>;
-        /** @private. */
-        showGuideline: PropTypes.Requireable<string>;
         takeFocus: PropTypes.Requireable<boolean>;
         truncate: PropTypes.Requireable<boolean>;
         /**
@@ -179,11 +178,9 @@ declare namespace HeadDropdownCell {
         width: PropTypes.Requireable<number>;
         /** @private. */
         variant: PropTypes.Requireable<string>;
-        /** @private. */
-        zIndex: PropTypes.Requireable<number>;
     };
     var splunkUiType: string;
     var possibleCloseReasons: HeadDropdownCellPossibleCloseReason[];
 }
 export default HeadDropdownCell;
-export { HeadDropdownCellDragStartHandler, HeadDropdownCellPossibleCloseReason, HeadDropdownCellRequestCloseHandler, HeadDropdownCellRequestMoveColumnHandler, HeadDropdownCellRequestOpenHandler, };
+export { HeadDropdownCellPossibleCloseReason, HeadDropdownCellRequestCloseHandler, HeadDropdownCellRequestMoveColumnHandler, HeadDropdownCellRequestOpenHandler, };

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

@@ -3,12 +3,11 @@ import PropTypes from 'prop-types';
 import { ComponentProps } from '../utils/types';
 import { HeadAutosizeColumnHandler, HeadRequestResizeColumnHandler } from './Head';
 type HeadInnerAutosizeColumnHandler = HeadAutosizeColumnHandler;
-type HeadInnerDragStartHandler = (index: number | undefined, columnId: any) => void;
 type HeadInnerRequestResizeHandler = HeadRequestResizeColumnHandler;
 interface HeadInnerPropsBase {
     align?: 'left' | 'center' | 'right';
     clickable?: boolean;
-    columnId?: any;
+    columnId?: string;
     elementRef?: React.Ref<HTMLButtonElement | HTMLDivElement>;
     focusWithin?: boolean;
     id?: string;
@@ -16,8 +15,6 @@ interface HeadInnerPropsBase {
     isMenu?: boolean;
     label?: React.ReactNode;
     onAutosizeColumn?: HeadInnerAutosizeColumnHandler;
-    onDragEnd?: () => void;
-    onDragStart?: HeadInnerDragStartHandler;
     onRequestResize?: HeadInnerRequestResizeHandler;
     resizable?: boolean;
     sortDir?: 'none' | 'asc' | 'desc';
@@ -25,13 +22,13 @@ interface HeadInnerPropsBase {
     width?: number | 'auto';
     variant?: 'toggleAll' | 'info' | 'actions';
 }
-type HeadInnerProps = ComponentProps<HeadInnerPropsBase, 'span'>;
-declare function HeadInner({ index, clickable, columnId, elementRef, focusWithin, id, width: widthProp, onDragEnd, onAutosizeColumn, align, label, isMenu, onDragStart, onRequestResize, resizable, sortDir, truncate, variant, ...otherProps }: HeadInnerProps): React.JSX.Element;
+type HeadInnerProps = ComponentProps<HeadInnerPropsBase, 'div'>;
+declare function HeadInner({ align, clickable, columnId, elementRef, focusWithin, id, index, isMenu, label, onAutosizeColumn, onRequestResize, resizable, sortDir, truncate, variant, width: widthProp, ...otherProps }: HeadInnerProps): React.JSX.Element;
 declare namespace HeadInner {
     var propTypes: {
         align: PropTypes.Requireable<string>;
         clickable: PropTypes.Requireable<boolean>;
-        columnId: PropTypes.Requireable<any>;
+        columnId: PropTypes.Requireable<string>;
         elementRef: PropTypes.Requireable<object>;
         focusWithin: PropTypes.Requireable<boolean>;
         id: PropTypes.Requireable<string>;
@@ -39,8 +36,6 @@ declare namespace HeadInner {
         isMenu: PropTypes.Requireable<boolean>;
         label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         onAutosizeColumn: PropTypes.Requireable<(...args: any[]) => any>;
-        onDragEnd: PropTypes.Requireable<(...args: any[]) => any>;
-        onDragStart: PropTypes.Requireable<(...args: any[]) => any>;
         onRequestResize: PropTypes.Requireable<(...args: any[]) => any>;
         resizable: PropTypes.Requireable<boolean>;
         sortDir: PropTypes.Requireable<string>;
@@ -50,4 +45,3 @@ declare namespace HeadInner {
     };
 }
 export default HeadInner;
-export { HeadInnerDragStartHandler };

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

@@ -33,12 +33,12 @@ interface RowPropsBase {
     children?: React.ReactNode;
     /** This data is returned with the onClick and toggle events as the second argument. */
     data?: any;
-    /** @private. Generally passed by Table rather than added directly. */
-    dataId?: string | number;
     /** Indicates whether the row selection is disabled. */
     disabled?: boolean;
     /** @private. Generally passed by Table rather than added directly. */
-    draggable?: boolean;
+    isDraggable?: boolean;
+    /** @private. Generally passed by Table rather than added directly. */
+    dragId?: string | number;
     /**
      * A React ref which is set to the DOM element when the component mounts and null when it unmounts.
      */
@@ -103,11 +103,11 @@ declare namespace Row {
         actionsSecondary: PropTypes.Requireable<PropTypes.ReactElementLike>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         data: PropTypes.Requireable<any>;
-        /** @private. Generally passed by Table rather than added directly. */
-        dataId: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
         disabled: PropTypes.Requireable<boolean>;
         /** @private. Generally passed by Table rather than added directly. */
-        draggable: PropTypes.Requireable<boolean>;
+        isDraggable: PropTypes.Requireable<boolean>;
+        /** @private. Generally passed by Table rather than added directly. */
+        dragId: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
         elementRef: PropTypes.Requireable<object>;
         /** @private. */
         expandable: PropTypes.Requireable<boolean>;

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

@@ -10,19 +10,17 @@ import Row, { RowActionPrimaryClickHandler, RowActionSecondaryClickHandler, RowC
 import { ComponentProps } from '../utils/types';
 /** @public */
 type TableRequestMoveColumnHandler = (data: {
-    columnId: any;
     fromIndex: number;
     toIndex: number;
 }) => void;
 /** @public */
 type TableRequestMoveRowHandler = (data: {
-    dataId?: string | number;
     fromIndex: number;
     toIndex: number;
 }) => void;
 /** @public */
 type TableRequestResizeColumnHandler = (event: React.MouseEvent<HTMLHRElement> | React.KeyboardEvent<HTMLHRElement> | MouseEvent, data: {
-    columnId: any;
+    columnId?: string;
     id?: string;
     index: number;
     width: number;
@@ -87,7 +85,7 @@ interface TablePropsBase {
      *
      * * `single`: Only one row can be expanded at a time. If another expansion button is
      * clicked, the currently expanded row closes and the new one opens.
-     * * `multi`: Allows mulitple rows to be expanded at the same time.
+     * * `multi`: Allows multiple rows to be expanded at the same time.
      * * `controlled`: Allows the expanded state to be externally managed by `expanded` prop of `Row`.
      * * `none`: The default with no row expansion.
      */
@@ -115,10 +113,7 @@ interface TablePropsBase {
     onRequestMoveColumn?: TableRequestMoveColumnHandler;
     /**
      * An event handler to handle the reorder rows action of Table. The function is passed an
-     * options object with `dataId`, `fromIndex` and `toIndex`.
-     *
-     * This property requires a unique `key` to be passed to `Table.Row`.
-     * Using the row index as the `key` will lead to issues with animations and focus restoration.
+     * options object with `fromIndex` and `toIndex`.
      */
     onRequestMoveRow?: TableRequestMoveRowHandler;
     /**

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface TableContext {
     headType?: 'docked' | 'fixed' | 'inline';
     resizableFillLayout?: boolean;

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

@@ -7,7 +7,7 @@ interface TogglePropsBase {
     selected?: boolean | 'some';
 }
 type ToggleProps = ComponentProps<TogglePropsBase, 'button'>;
-declare function Toggle({ disabled, onClick, selected, ...otherProps }: ToggleProps): React.JSX.Element;
+declare function Toggle({ disabled: disabledProp, onClick, selected, ...otherProps }: ToggleProps): React.JSX.Element;
 declare namespace Toggle {
     var propTypes: {
         disabled: PropTypes.Requireable<boolean>;

package/types/src/Text/Text.d.ts

@@ -107,6 +107,8 @@ interface TextPropsBase {
     onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
     /** A callback for when the text selection or cursor position changes. */
     onSelect?: React.ReactEventHandler<HTMLInputElement>;
+    /** @private. */
+    placeholder?: string;
     /** Prepend removes rounded borders from the left side. */
     prepend?: boolean;
     /** @private. */
@@ -172,6 +174,8 @@ declare namespace Text {
         onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
         onSelect: PropTypes.Requireable<(...args: any[]) => any>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        /** @private. */
+        placeholder: PropTypes.Requireable<string>;
         prepend: PropTypes.Requireable<boolean>;
         /** @private. */
         required: PropTypes.Requireable<boolean>;
@@ -188,4 +192,4 @@ declare namespace Text {
 }
 export default Text;
 export { TextBlurHandler, TextChangeHandler, TextFocusHandler };
-export type { TextPropsBase, TextPropsBaseControlled, TextPropsBaseUncontrolled };
+export type { TextProps, TextPropsBase, TextPropsBaseControlled, TextPropsBaseUncontrolled };

package/types/src/Tooltip/Tooltip.d.ts

@@ -1,7 +1,7 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { AnyTheme } from '@splunk/themes';
-import { ClassComponentProps } from '../utils/types';
+import { PopoverPossibleCloseReason } from '@splunk/react-ui/Popover';
+import { ComponentProps } from '../utils/types';
 /** @public */
 type openReasons = 'focusToggle' | 'mouseEnterPopover' | 'mouseEnterToggle' | 'mouseEnterHitArea';
 /** @public */
@@ -116,66 +116,34 @@ interface TooltipPropsBase {
      * @param {function} props.elementRef
      */
     renderAnchor?: (props: AnchorProps) => React.ReactNode;
-    /** @private */
-    splunkTheme: AnyTheme;
-}
-type TooltipProps = ClassComponentProps<TooltipPropsBase, typeof defaultProps, 'span'>;
-declare const defaultProps: Required<Pick<TooltipPropsBase, 'closeDelay' | 'closeWhen' | 'defaultPlacement' | 'inline' | 'openDelay'>>;
-interface TooltipState {
-    open: boolean;
-    anchorEl: HTMLSpanElement | null;
-    hitAreaEl: SVGElement | null;
-    popoverEl: HTMLDivElement | null;
-    popoverOuterEl: HTMLDivElement | null;
 }
+declare const closeReasons: PopoverPossibleCloseReason[];
+type TooltipProps = ComponentProps<TooltipPropsBase, 'span'>;
 /**
  * The Tooltip component wraps arbitrary content to be displayed when the target element is hovered
  * or focused.
  */
-declare class Tooltip extends Component<TooltipProps, TooltipState> {
-    private ariaId;
-    private controlledExternally;
-    private popoverId;
-    private timeout?;
-    static propTypes: React.WeakValidationMap<TooltipProps>;
-    static defaultProps: Required<Pick<TooltipPropsBase, "inline" | "defaultPlacement" | "closeDelay" | "closeWhen" | "openDelay">>;
-    constructor(props: Readonly<TooltipProps>);
-    componentDidUpdate(): void;
-    componentWillUnmount(): void;
-    private handleMount;
-    private handlePopoverMount;
-    private handlePopoverOuterMount;
-    private handleHitAreaMount;
-    private handleMouseEnter;
-    private handleMouseEnterPopover;
-    private handleMouseEnterHitArea;
-    private handleMouseLeave;
-    private handleMouseLeavePopover;
-    private handleMouseLeaveHitArea;
-    private handleMouseMoveHitAreaImpl;
-    private handleMouseMoveHitArea;
-    private handleClick;
-    private handleFocus;
-    private handleBlur;
-    private handlePopoverOnRequestClose;
-    private handleRequestClose;
-    private handleRequestOpen;
-    private isControlled;
-    private isOpen;
-    private handleRenderPropAnchorMount;
-    private createAnchor;
-    render(): React.JSX.Element;
+declare function Tooltip({ appearance, children, closeDelay, closeWhen, content, contentRelationship, defaultPlacement, elementRef, inline, onRequestClose, onRequestOpen, open: openProp, openDelay, renderAnchor, ...otherProps }: TooltipProps): React.JSX.Element;
+declare namespace Tooltip {
+    var propTypes: {
+        /** @private */
+        appearance: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        closeDelay: PropTypes.Requireable<number>;
+        /** @private */
+        closeWhen: PropTypes.Requireable<string>;
+        content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        contentRelationship: PropTypes.Requireable<string>;
+        defaultPlacement: PropTypes.Requireable<string>;
+        elementRef: PropTypes.Requireable<object>;
+        inline: PropTypes.Requireable<boolean>;
+        onRequestClose: PropTypes.Requireable<(...args: any[]) => any>;
+        onRequestOpen: PropTypes.Requireable<(...args: any[]) => any>;
+        open: PropTypes.Requireable<boolean>;
+        openDelay: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        renderAnchor: PropTypes.Requireable<(...args: any[]) => any>;
+    };
 }
-declare const TooltipWithTheme: React.ForwardRefExoticComponent<Omit<Pick<Pick<TooltipProps, "slot" | "style" | "title" | "onChange" | "onPause" | "className" | "color" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "nonce" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | keyof TooltipPropsBase> & Pick<PropTypes.InferProps<React.WeakValidationMap<TooltipProps>>, "inlist"> & Pick<TooltipProps, never>, "slot" | "style" | "title" | "children" | "elementRef" | "onChange" | "onPause" | "className" | "color" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "nonce" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "open" | "appearance" | "onRequestClose" | "onRequestOpen" | "splunkTheme" | "contentRelationship" | "renderAnchor"> & {
-    inline?: boolean | undefined;
-    defaultPlacement?: "left" | "right" | "above" | "below" | undefined;
-    closeDelay?: number | undefined;
-    closeWhen?: "default" | "notOnClick" | undefined;
-    openDelay?: number | "primary" | "secondary" | undefined;
-} & {} & {
-    ref?: React.Ref<Tooltip> | undefined;
-}, "splunkTheme">>;
-export default TooltipWithTheme;
-export type { Tooltip as TooltipWithoutTheme };
+export default Tooltip;
 export { TooltipRequestCloseHandler, TooltipRequestOpenHandler };
 export type { TooltipPropsBase };

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

@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import { TooltipRequestCloseHandler, TooltipRequestOpenHandler } from '@splunk/react-ui/Tooltip';
-declare class Controlled extends Component<{}, {
+declare class Controlled extends Component<object, {
     open: boolean;
     reason: string;
 }> {
-    constructor(props: {});
+    constructor(props: object);
     handleRequestOpen: TooltipRequestOpenHandler;
     handleRequestClose: TooltipRequestCloseHandler;
     render(): React.JSX.Element;

package/types/src/TransitionOpen/TransitionOpen.d.ts

@@ -7,6 +7,10 @@ interface TransitionOpenPropsBase {
     children?: React.ReactNode;
     /** @private */
     className?: string;
+    /**
+     * A React ref which is set to the DOM element when the component mounts and null when it unmounts.
+     */
+    elementRef?: React.Ref<HTMLDivElement>;
     /** The `id` of the inner container. */
     id?: string;
     /** An additional className to inner container. */
@@ -34,12 +38,13 @@ interface TransitionOpenPropsBase {
     takeFocus?: boolean;
 }
 type TransitionOpenProps = ComponentProps<TransitionOpenPropsBase, 'div'>;
-declare function TransitionOpen({ animation, animateOnMount, children, className, id, innerClassName, innerStyle, onAnimationEnd, open, outerClassName, outerId, outerStyle, renderChildrenWhenCollapsed, retainFocus, takeFocus: takeFocusProp, ...otherProps }: TransitionOpenProps): React.JSX.Element;
+declare function TransitionOpen({ animation, animateOnMount, children, className, elementRef, id, innerClassName, innerStyle, onAnimationEnd, open, outerClassName, outerId, outerStyle, renderChildrenWhenCollapsed, retainFocus, takeFocus: takeFocusProp, ...otherProps }: TransitionOpenProps): React.JSX.Element;
 declare namespace TransitionOpen {
     var propTypes: {
         animation: PropTypes.Requireable<string>;
         animateOnMount: PropTypes.Requireable<boolean>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        elementRef: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         id: PropTypes.Requireable<string>;
         innerClassName: PropTypes.Requireable<string>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { RemoveNodeHandler, SetNodeHandler } from './Tree';
 import { TreeItemClickHandler, TreeItemKeyDownHandler } from './TreeItem';
 export interface TreeContext {

package/types/src/useForceUpdate/useForceUpdate.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * This is a private component not intended for use outside @splunk/react-ui
  *

package/types/src/useResizeObserver/useResizeObserver.d.ts

@@ -3,10 +3,11 @@ type Dimensions = {
     width: number;
     height: number;
 };
+type ResizeHandler = (data: Dimensions) => void;
 /**
  * Watches a React ref element for changes in size.
  *
  * @param ref - The React ref to observe size changes on
  */
-declare const useResizeObserver: (ref: React.MutableRefObject<HTMLElement | null>) => Dimensions;
+declare const useResizeObserver: (ref: React.MutableRefObject<HTMLElement | null>, onResize?: ResizeHandler) => Dimensions;
 export default useResizeObserver;

package/types/src/utils/types.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
-type ClassComponentProps<P extends {}, D extends {}, I extends keyof JSX.IntrinsicElements, B extends keyof P | keyof JSX.IntrinsicElements[I] = never> = P & D & Omit<JSX.IntrinsicElements[I], keyof P | B | 'ref' | 'css'>;
-type ComponentProps<P extends {}, I extends keyof JSX.IntrinsicElements, B extends keyof P | keyof JSX.IntrinsicElements[I] = never> = P & Omit<JSX.IntrinsicElements[I], keyof P | B | 'ref' | 'css'>;
+type ClassComponentProps<P extends object, D extends object, I extends keyof JSX.IntrinsicElements, B extends keyof P | keyof JSX.IntrinsicElements[I] = never> = P & D & Omit<JSX.IntrinsicElements[I], keyof P | B | 'ref' | 'css'>;
+type ComponentProps<P extends object, I extends keyof JSX.IntrinsicElements, B extends keyof P | keyof JSX.IntrinsicElements[I] = never> = P & Omit<JSX.IntrinsicElements[I], keyof P | B | 'ref' | 'css'>;
 type ObjKeys = <T>(o: T) => Extract<keyof T, string>[];
 type Writable<T> = {
     -readonly [P in keyof T]: T[P];