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

package/TransitionOpen.js

@@ -78,8 +78,8 @@
     const s = require("@splunk/ui-utils/focus");
     // CONCATENATED MODULE: external "@splunk/ui-utils/style"
     const c = require("@splunk/ui-utils/style");
-    // CONCATENATED MODULE: external "react-spring"
-    const f = require("react-spring");
+    // CONCATENATED MODULE: external "@react-spring/web"
+    const f = require("@react-spring/web");
     // CONCATENATED MODULE: external "styled-components"
     const d = require("styled-components");
     var m =  e.n(d);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "5.0.0-beta.3",
+  "version": "5.0.0-beta.4",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -44,16 +44,15 @@
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@splunk/react-icons": "5.0.0-beta.3",
-    "@splunk/themes": "1.0.0-beta.3",
+    "@react-spring/web": "^9.7.5",
+    "@splunk/react-icons": "5.0.0-beta.4",
+    "@splunk/themes": "1.0.0-beta.4",
     "@splunk/ui-utils": "^1.8.0",
     "decimal.js-light": "^2.2.3",
     "lodash": "^4.17.14",
     "moment": "^2.29.4",
     "prop-types": "^15.6.2",
     "react-markdown": "^8.0.7",
-    "react-resize-detector": "^3.2.1",
-    "react-spring": "9.2.4",
     "remark-gfm": "^1.0.0",
     "tinycolor2": "^1.4.1",
     "use-typed-event-listener": "^3.0.0"
@@ -86,14 +85,13 @@
     "@types/prismjs": "^1.26.3",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
-    "@types/react-resize-detector": "^3.1.1",
     "@types/sinon": "^4.3.3",
     "@types/styled-components": "^5.1.0",
     "@types/tinycolor2": "^1.4.2",
     "@types/webdriverio": "^5.0.0",
     "@types/webpack-env": "^1.15.2",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
+    "@typescript-eslint/eslint-plugin": "^8.29.1",
+    "@typescript-eslint/parser": "^8.29.1",
     "axe-html-reporter": "^2.2.3",
     "axe-playwright": "^1.1.11",
     "babel-loader": "^8.3.0",
@@ -139,7 +137,7 @@
     "storybook": "^7.6.17",
     "styled-components": "^5.3.10",
     "stylelint": "^15.11.0",
-    "typescript": "^4.9.5",
+    "typescript": "^5.8.3",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1",

package/types/src/Accordion/Accordion.d.ts

@@ -1,6 +1,7 @@
-import React, { Component } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import Panel from './Panel';
-import { ClassComponentProps } from '../utils/types';
+import { ComponentProps } from '../utils/types';
 /** @public */
 type AccordionChangeHandler = (event: React.MouseEvent<HTMLButtonElement>, data: {
     event: React.MouseEvent<HTMLButtonElement>;
@@ -47,30 +48,22 @@ interface AccordionUncontrolledProps extends AccordionPropsBase {
     defaultOpenPanelId?: string | number;
     openPanelId?: never;
 }
-declare const defaultProps: {
-    inset: boolean;
-};
-type AccordionProps = ClassComponentProps<AccordionControlledProps | AccordionUncontrolledProps, typeof defaultProps, 'div'>;
-interface AccordionState {
-    openPanelId?: string | number;
-}
+type AccordionProps = ComponentProps<AccordionControlledProps | AccordionUncontrolledProps, 'div'>;
 /**
  * @deprecated
  * Accordion has been deprecated and will be removed in a future major version. Use Collapsible Panel's SingleOpenPanelGroup API instead.
  */
-declare class Accordion extends Component<AccordionProps, AccordionState> {
-    private controlledExternally;
-    static propTypes: React.WeakValidationMap<AccordionProps>;
-    static defaultProps: {
-        inset: boolean;
+declare function Accordion({ children, defaultOpenPanelId, elementRef, inset, onChange, openPanelId: openPanelIdProp, ...otherProps }: AccordionProps): React.JSX.Element;
+declare namespace Accordion {
+    var propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        defaultOpenPanelId: PropTypes.Requireable<any>;
+        elementRef: PropTypes.Requireable<object>;
+        inset: PropTypes.Requireable<boolean>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        openPanelId: PropTypes.Requireable<any>;
     };
-    static Panel: typeof Panel;
-    constructor(props: Readonly<AccordionProps>);
-    componentDidUpdate(prevProps: Readonly<AccordionProps>): void;
-    private getCurrentOpenPanel;
-    private handleChange;
-    private isControlled;
-    render(): React.JSX.Element;
+    var Panel: typeof import("./Panel").default;
 }
 export default Accordion;
 export { AccordionChangeHandler, Panel };

package/types/src/Accordion/AccordionContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CollapsiblePanelChangeHandler } from '@splunk/react-ui/CollapsiblePanel';
 export interface AccordionContext {
     onChange?: CollapsiblePanelChangeHandler;

package/types/src/Animation/Animation.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="react" />
-import { SpringComponentProps as RSSpringComponentProps, TransitionComponentProps as RSTransitionComponentProps, UseSpringProps as RSUseSpringProps, UseTransitionProps as RSUseTransitionProps } from 'react-spring';
+import { SpringComponentProps as RSSpringComponentProps, TransitionComponentProps as RSTransitionComponentProps, UseSpringProps as RSUseSpringProps, UseTransitionProps as RSUseTransitionProps } from '@react-spring/web';
 declare function useAnimation({ immediate, ...otherProps }: RSUseSpringProps): {
     [x: string]: any;
     [x: number]: any;
 };
-declare function useAnimationTransition(items: any, { immediate, ...otherProps }: RSUseTransitionProps): import("react-spring").TransitionFn<any, {
+declare function useAnimationTransition(items: any, { immediate, ...otherProps }: RSUseTransitionProps): import("@react-spring/core").TransitionFn<any, {
     [x: string]: any;
     [x: number]: any;
     [Symbol.hasInstance]: (value: any) => boolean;

package/types/src/AnimationToggle/docs/examples/Provider.d.ts

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
-declare class Provider extends Component<{}, {
+declare class Provider extends Component<object, {
     animatedTransitions: boolean;
     open: boolean;
 }> {
-    constructor(props: {});
+    constructor(props: object);
     handleButtonClick: () => void;
     handleSwitchClick: () => void;
     render(): React.JSX.Element;

package/types/src/AnimationToggle/docs/examples/ToggleComponent.d.ts

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
-declare class ToggleComponent extends Component<{}, {
+declare class ToggleComponent extends Component<object, {
     animatedTransitions: boolean;
 }> {
-    constructor(props: {});
+    constructor(props: object);
     handleSwitchClick: () => void;
     render(): React.JSX.Element;
 }

package/types/src/AnimationToggle/useAnimationToggle.d.ts

@@ -6,5 +6,5 @@
  * and the user prefers reduced motion, `'reduced'` is returned, `'on'` otherwise.
  * @public
  */
-declare const useAnimationToggle: () => 'on' | 'off' | 'reduced';
+declare const useAnimationToggle: () => "on" | "off" | "reduced";
 export { useAnimationToggle };

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

@@ -12,7 +12,7 @@ interface ButtonPropsBase {
     action?: string;
     /** Changes the style of the button.
      */
-    appearance?: 'default' | 'secondary' | 'primary' | 'destructive' | 'destructiveSecondary' | 'subtle';
+    appearance?: 'default' | 'secondary' | 'primary' | 'destructive' | 'destructiveSecondary' | 'standalone' | 'subtle';
     /** Removes the right border and border-radius of the button so you can
      * append other elements to it. */
     append?: boolean;

package/types/src/ButtonGroup/ButtonGroupContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface ButtonGroupContext {
     inline?: boolean;
     role?: string;

package/types/src/ButtonSimple/ButtonSimple.d.ts

@@ -2,14 +2,12 @@ import React from 'react';
 import { ButtonVariant } from './ButtonSimpleStyles';
 import buttonMixin from './mixin';
 import { ComponentProps } from '../utils/types';
-declare const appearances: readonly ["default", "secondary", "primary", "destructive", "destructiveSecondary", "subtle"];
-type Appearance = typeof appearances[number];
 interface ButtonSimplePropsBase {
     /** Returns a value on click. Use when composing or testing. */
     action?: string;
     /** Changes the style of the button.
      */
-    appearance?: Appearance;
+    appearance?: 'default' | 'secondary' | 'primary' | 'destructive' | 'destructiveSecondary' | 'subtle' | 'standalone';
     /** Removes the right border and border-radius of the button so you can
      * append things to it. */
     append?: boolean;

package/types/src/ButtonSimple/mixin.d.ts

@@ -1,5 +1,5 @@
 import { AnyTheme, Interpolation, InterpolationResult, ThemedProps } from '@splunk/themes';
-declare const buttonVariants: readonly ["primary", "secondary", "destructive", "destructiveSecondary", "subtle"];
+declare const buttonVariants: readonly ["primary", "secondary", "destructive", "destructiveSecondary", "subtle", "standalone"];
 type ButtonVariant = typeof buttonVariants[number];
 type ButtonStyleProps = ThemedProps & Partial<{
     $append: boolean;

package/types/src/Calendar/Calendar.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { DateTableChangeHandler } from './DateTable';
+import { DateGridChangeHandler } from './DateGrid';
 import { ComponentProps } from '../utils/types';
-type CalendarChangeHandler = DateTableChangeHandler;
+type CalendarChangeHandler = DateGridChangeHandler;
 declare const calendarActiveSelector = "[data-active-day=\"true\"]";
 interface CalendarPropsBase {
     /**

package/types/src/Calendar/{DateTable.d.ts → DateGrid.d.ts}

@@ -1,22 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ComponentProps } from '../utils/types';
-type DateTableChangeHandler = (event: React.MouseEvent<HTMLTableCellElement> | React.KeyboardEvent<HTMLTableCellElement>, data: {
+type DateGridChangeHandler = (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, data: {
     value: string;
 }) => void;
-interface DateTablePropsBase {
+interface DateGridPropsBase {
     displayValue: string;
     highlightToday?: boolean;
     labelledBy?: string;
     locale?: string;
-    onChange?: DateTableChangeHandler;
-    onInternalChange?: DateTableChangeHandler;
+    onChange?: DateGridChangeHandler;
+    onInternalChange?: DateGridChangeHandler;
     selectedValue: string;
     todayValue?: string;
 }
-type DateTableProps = ComponentProps<DateTablePropsBase, 'table'>;
-declare function DateTable({ displayValue, highlightToday, labelledBy, locale, onChange, onInternalChange, selectedValue, todayValue, ...otherProps }: DateTableProps): React.JSX.Element;
-declare namespace DateTable {
+type DateGridProps = ComponentProps<DateGridPropsBase, 'div'>;
+declare function DateGrid({ displayValue, highlightToday, labelledBy, locale, onChange, onInternalChange, selectedValue, todayValue, ...otherProps }: DateGridProps): React.JSX.Element;
+declare namespace DateGrid {
     var propTypes: {
         displayValue: PropTypes.Validator<string>;
         highlightToday: PropTypes.Requireable<boolean>;
@@ -28,5 +28,5 @@ declare namespace DateTable {
         todayValue: PropTypes.Requireable<string>;
     };
 }
-export default DateTable;
-export { DateTableChangeHandler };
+export default DateGrid;
+export { DateGridChangeHandler };

package/types/src/Calendar/Day.d.ts

@@ -1,15 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ComponentProps } from '../utils/types';
-type DayClickHandler = (event: React.MouseEvent<HTMLTableCellElement>, data: {
+type DayClickHandler = (event: React.MouseEvent<HTMLDivElement>, data: {
     value: string;
 }) => void;
-type DayKeyDownHandler = (event: React.KeyboardEvent<HTMLTableCellElement>, data: {
+type DayKeyDownHandler = (event: React.KeyboardEvent<HTMLDivElement>, data: {
     value: string;
 }) => void;
 interface DayPropsBase {
     /** Whether or not this day has the active cursor. */
     active?: boolean;
+    /** @private */
+    dayOfWeek?: number;
     /** Locale set by language and localization specifiers. */
     locale?: string;
     /** Callback for click */
@@ -23,11 +25,13 @@ interface DayPropsBase {
     /** Day number to be displayed */
     value: string;
 }
-type DayProps = ComponentProps<DayPropsBase, 'td'>;
-declare function Day({ active, locale, onClick, onKeyDown, selected, today, value, ...otherProps }: DayProps): React.JSX.Element;
+type DayProps = ComponentProps<DayPropsBase, 'div'>;
+declare function Day({ active, dayOfWeek, locale, onClick, onKeyDown, selected, today, value, ...otherProps }: DayProps): React.JSX.Element;
 declare namespace Day {
     var propTypes: {
         active: PropTypes.Requireable<boolean>;
+        /** @private. */
+        dayOfWeek: PropTypes.Requireable<number>;
         locale: PropTypes.Requireable<string>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
         onKeydown: PropTypes.Requireable<(...args: any[]) => any>;

package/types/src/CardLayout/CardLayoutContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface CardLayoutContext {
     minWidth?: number | string;
     maxWidth?: number | string;

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

@@ -11,8 +11,8 @@ interface InteractiveState {
     setAsWidth: boolean;
     hasMaxWidth: boolean;
 }
-declare class Interactive extends Component<{}, InteractiveState> {
-    constructor(props: {});
+declare class Interactive extends Component<object, InteractiveState> {
+    constructor(props: object);
     handleChangeAmount: NumberChangeHandler;
     handleChangeMinWidth: NumberChangeHandler;
     handleChangeMaxWidth: NumberChangeHandler;

package/types/src/Clickable/Clickable.d.ts

@@ -51,4 +51,4 @@ type ClickableProps = ClickableButtonProps | ClickableLinkProps;
  */
 declare const Clickable: React.ForwardRefExoticComponent<ClickableProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 export default Clickable;
-export { ClickableProps };
+export { ClickableButtonProps, ClickableLinkProps, ClickableProps, ClickablePropsBase };

package/types/src/CollapsiblePanel/SingleOpenPanelGroupContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CollapsiblePanelChangeHandler } from '@splunk/react-ui/CollapsiblePanel';
 export interface SingleOpenPanelGroupContext {
     onChange?: CollapsiblePanelChangeHandler;

package/types/src/ComboBox/ComboBox.d.ts

@@ -137,8 +137,8 @@ type ComboBoxProps = ComponentProps<ComboBoxPropsBaseControlled | ComboBoxPropsB
  */
 declare function ComboBox({ animateLoading, append, children, controlledFilter, defaultPlacement, defaultValue, describedBy, disabled, elementRef, error, footerMessage, inline, inputId, inputRef, isLoadingOptions, labelledBy, loadingMessage, menuStyle, name, noOptionsMessage, onBlur, onChange, onClose, onFocus, onKeyDown, onOpen, onScroll, onScrollBottom, onSelect, placeholder, prepend, value: valueProp, virtualization, ...otherProps }: ComboBoxProps): React.JSX.Element;
 declare namespace ComboBox {
-    var Divider: typeof import("../Menu/Divider").default;
-    var Heading: typeof import("../Menu/Heading").default;
+    var Divider: typeof import("@splunk/react-ui/Menu").Divider;
+    var Heading: typeof import("@splunk/react-ui/Menu").Heading;
     var Option: typeof import("./Option").default;
     var propTypes: {
         animateLoading: PropTypes.Requireable<boolean>;
@@ -178,4 +178,4 @@ declare namespace ComboBox {
     };
 }
 export default ComboBox;
-export { ComboBoxBlurHandler, ComboBoxChangeHandler, ComboBoxFocusHandler, ComboBoxProps, Option, Divider, Heading, };
+export { ComboBoxBlurHandler, ComboBoxChangeHandler, ComboBoxFocusHandler, ComboBoxProps, ComboBoxScrollBottomHandler, Option, Divider, Heading, };

package/types/src/ControlGroup/docs/examples/CustomizedLabelTarget.d.ts

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import { SwitchClickHandler } from '@splunk/react-ui/Switch';
-declare class CustomizedLabelTarget extends Component<{}, {
+declare class CustomizedLabelTarget extends Component<object, {
     values: number[];
 }> {
-    constructor(props: {});
+    constructor(props: object);
     handleClick: SwitchClickHandler;
     render(): React.JSX.Element;
 }

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

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import { DateChangeHandler } from '@splunk/react-ui/Date';
-declare class Controlled extends Component<{}, {
+declare class Controlled extends Component<object, {
     value: string;
 }> {
-    constructor(props: {});
+    constructor(props: object);
     handleChange: DateChangeHandler;
     render(): React.JSX.Element;
 }

package/types/src/Date/docs/examples/HighlightToday.d.ts

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import { DateChangeHandler } from '@splunk/react-ui/Date';
-declare class HighlightToday extends Component<{}, {
+declare class HighlightToday extends Component<object, {
     value: string;
 }> {
-    constructor(props: {});
+    constructor(props: object);
     handleChange: DateChangeHandler;
     render(): React.JSX.Element;
 }

package/types/src/DefinitionList/DefinitionListContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface DefinitionListContextValue {
     separatorCharacter?: '.' | string;
     termWidth?: string;

package/types/src/DualListbox/DualListbox.d.ts

@@ -53,6 +53,10 @@ interface DualListboxPropsBase {
      * When true, `Options`'s `listName` and `selected` state props are fully controlled.
      */
     controlled?: boolean;
+    /**
+     * A React ref which is set to the DOM element when the component mounts, and null when it unmounts.
+     */
+    elementRef?: React.Ref<HTMLDivElement>;
     /**
      * When true, fill height and width of the relative parent container.
      */
@@ -78,7 +82,7 @@ interface DualListboxPropsBase {
     onSelect?: DualListboxSelectHandler;
 }
 type DualListboxProps = ComponentProps<DualListboxPropsBase, 'div'>;
-declare function DualListbox({ children, controlled, fill, inline, onChange, onSelect, lists, ...otherProps }: DualListboxProps): React.JSX.Element;
+declare function DualListbox({ children, controlled, elementRef, fill, inline, onChange, onSelect, lists, ...otherProps }: DualListboxProps): React.JSX.Element;
 declare namespace DualListbox {
     var propTypes: React.WeakValidationMap<DualListboxPropsBase>;
     var Option: typeof import("./Option").default;

package/types/src/File/File.d.ts

@@ -9,22 +9,22 @@ type FileRequestAddHandler = (files: globalThis.File[], data: {
 /** @public */
 type FileRequestRemoveHandler = (data: {
     event: {
-        itemId?: any;
+        itemId?: string;
         name: string;
     };
     filename: string;
     index: number;
-    itemId?: any;
+    itemId?: string;
     name?: string;
 }) => void;
 type FileRequestRetryHandler = (data: {
     event: {
-        itemId?: any;
+        itemId?: string;
         name: string;
     };
     filename: string;
     index: number;
-    itemId?: any;
+    itemId?: string;
     name?: string;
 }) => void;
 interface FilePropsBase {

package/types/src/File/FileContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ItemClickHandler } from './Item';
 export interface FileContext {
     disabled: boolean;

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

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { ComponentProps } from '../utils/types';
 type ItemClickHandler = (data: {
-    itemId?: any;
+    itemId?: string;
     name: string;
     index: number;
 }) => void;
@@ -14,8 +14,14 @@ interface ItemPropsBase {
     elementRef?: React.Ref<HTMLDivElement>;
     /** Show the Item in an error state. */
     error?: boolean;
+    /**
+     * The icon or thumbnail image to show before the label.
+     * If not passed this will be generated from the filename extension.
+     * @private
+     */
+    icon?: React.ReactNode;
     /** A unique for this file. */
-    itemId?: any;
+    itemId?: string;
     /** The name is displayed on the item. */
     name: string;
     /** @private */
@@ -25,13 +31,15 @@ interface ItemPropsBase {
     uploadPercentage?: number;
 }
 type ItemProps = ComponentProps<ItemPropsBase, 'div'>;
-declare function Item({ disabled, elementRef, error, itemId, name, index, uploadPercentage, ...otherProps }: ItemProps): React.JSX.Element;
+declare function Item({ disabled, elementRef, error, icon, itemId, name, index, uploadPercentage, ...otherProps }: ItemProps): React.JSX.Element;
 declare namespace Item {
     var propTypes: {
         disabled: PropTypes.Requireable<boolean>;
         elementRef: PropTypes.Requireable<object>;
         error: PropTypes.Requireable<boolean>;
         /** @private */
+        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /** @private */
         index: PropTypes.Requireable<number>;
         itemId: PropTypes.Requireable<any>;
         name: PropTypes.Validator<string>;

package/types/src/File/ItemIcon.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 interface ItemIconProps {
     name: string;
+    icon?: React.ReactNode;
 }
-declare const ItemIcon: ({ name }: ItemIconProps) => React.JSX.Element;
+declare const ItemIcon: ({ name, icon }: ItemIconProps) => React.JSX.Element;
 export default ItemIcon;

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

@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import { FileRequestAddHandler } from '@splunk/react-ui/File';
-declare class Disabled extends Component<{}, {
+declare class Disabled extends Component<object, {
     filename?: string;
 }> {
     private fileReader;
-    constructor(props: {});
+    constructor(props: object);
     handleAddFiles: FileRequestAddHandler;
     handleRemoveFile: () => void;
     render(): React.JSX.Element;

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

@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
 import { FileRequestAddHandler } from '@splunk/react-ui/File';
-declare class DropAnywhere extends Component<{}, {
+declare class DropAnywhere extends Component<object, {
     filename?: string;
     open: boolean;
 }> {
     private fileReader;
-    constructor(props: {});
+    constructor(props: object);
     handleAddFiles: FileRequestAddHandler;
     handleRemoveFile: () => void;
     handleOpen: () => void;

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

@@ -4,11 +4,11 @@ interface FileItem {
     name: string;
     value?: string | ArrayBuffer | null;
 }
-declare class Multi extends Component<{}, {
+declare class Multi extends Component<object, {
     files: FileItem[];
 }> {
     static loadFile(file: globalThis.File): FileItem;
-    constructor(props: {});
+    constructor(props: object);
     handleAddFiles: FileRequestAddHandler;
     handleRemoveFile: FileRequestRemoveHandler;
     render(): React.JSX.Element;

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

@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import { FileRequestAddHandler } from '@splunk/react-ui/File';
-declare class Single extends Component<{}, {
+declare class Single extends Component<object, {
     filename?: string;
 }> {
     private fileReader;
-    constructor(props: {});
+    constructor(props: object);
     handleAddFiles: FileRequestAddHandler;
     handleRemoveFile: () => void;
     render(): React.JSX.Element;

package/types/src/FormRows/FormRows.d.ts

@@ -29,7 +29,7 @@ interface FormRowsPropsBase {
     onRequestMove?: FormRowsRequestMoveHandler;
 }
 type FormRowsProps = ComponentProps<FormRowsPropsBase, 'div'>;
-declare function FormRows({ addLabel, children, disabled, header, menu, onRequestAdd, onRequestMove, ...otherProps }: FormRowsProps): React.JSX.Element;
+declare function FormRows({ addLabel, children, disabled, elementRef, header, menu, onRequestAdd, onRequestMove, ...otherProps }: FormRowsProps): React.JSX.Element;
 declare namespace FormRows {
     var propTypes: {
         addLabel: PropTypes.Requireable<string>;
@@ -42,9 +42,9 @@ declare namespace FormRows {
         onRequestMove: PropTypes.Requireable<(...args: any[]) => any>;
     };
     var Row: typeof import("./Row").default;
-    var addRow: (element: React.ReactElement<any, string | React.JSXElementConstructor<any>>, items: React.ReactElement<any, string | React.JSXElementConstructor<any>>[]) => React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
-    var moveRow: (fromIndex: number, toIndex: number, items: React.ReactElement<any, string | React.JSXElementConstructor<any>>[]) => React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
-    var removeRow: (index: number, items: React.ReactElement<any, string | React.JSXElementConstructor<any>>[]) => React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
+    var addRow: (element: React.ReactElement, items: React.ReactElement[]) => React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
+    var moveRow: (fromIndex: number, toIndex: number, items: React.ReactElement[]) => React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
+    var removeRow: (index: number, items: React.ReactElement[]) => React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
 }
 export default FormRows;
 export { Row };

package/types/src/FormRows/FormRowsContext.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 import { RowKeyDownHandler } from './Row';
 export interface FormRowsContext {
-    disabledDeleteButton: boolean | undefined;
+    disabledRemoveButton: boolean | undefined;
     onKeyDown?: RowKeyDownHandler;
     hasOnRequestAdd?: boolean;
     sortable: boolean;

package/types/src/FormRows/SortableRow.d.ts

@@ -8,7 +8,7 @@ type RowRequestRemoveHandler = (event: React.MouseEvent<HTMLButtonElement>, data
 }) => void;
 interface RowPropsBase {
     children?: React.ReactNode;
-    /** Index of the row. */
+    /** Index of the row. This is required if the rows are sortable. */
     index?: number;
     /** Callback when Remove button is clicked. */
     onRequestRemove?: RowRequestRemoveHandler;

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

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import { FormRowsRequestMoveHandler, RowRequestRemoveHandler } from '@splunk/react-ui/FormRows';
-declare class Basic extends Component<{}, {
+declare class Basic extends Component<object, {
     items: React.ReactElement[];
 }> {
-    constructor(props: {});
+    constructor(props: object);
     handleRequestAdd: () => void;
     handleRequestMove: FormRowsRequestMoveHandler;
     handleRequestRemove: RowRequestRemoveHandler;

package/types/src/FormRows/docs/examples/Header.d.ts

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import { FormRowsRequestMoveHandler, RowRequestRemoveHandler } from '@splunk/react-ui/FormRows';
-declare class Header extends Component<{}, {
+declare class Header extends Component<object, {
     items: React.ReactElement[];
 }> {
-    constructor(props: {});
+    constructor(props: object);
     handleRequestAdd: () => void;
     handleRequestMove: FormRowsRequestMoveHandler;
     handleRequestRemove: RowRequestRemoveHandler;