@splunk/react-ui 5.2.0 → 5.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "5.2.0",
+  "version": "5.4.0",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -11,7 +11,7 @@
     "docs:publish:external": "eval $(splunk-docs-package docs-external --suffix=public) && artifact-ci publish generic $DOCS_GEN_OUTPUT_NAME $DOCS_GEN_REMOTE_PATH",
     "docs:start": "INTERNAL=true webpack serve --config docs.gen.webpack.config.js",
     "docs:start:external": "webpack serve --config docs.gen.webpack.config.js",
-    "eslint": "eslint src .storybook --ext \".ts,.tsx,.js,.jsx\"",
+    "eslint": "eslint --rulesdir ../../infra/eslint/rules src .storybook --ext \".ts,.tsx,.js,.jsx\"",
     "eslint:fix": "yarn run eslint --fix",
     "eslint:ci": "yarn run eslint -f junit -o test-reports/lint-results.xml",
     "lint": "yarn run eslint && yarn run stylelint",
@@ -29,8 +29,8 @@
     "test:watch": "jest --watch",
     "test:cypress": "yarn cypress open --component",
     "test:cypress:ci": "yarn cypress run --component",
-    "types:build": "yarn types:build:cypress && tsc --emitDeclarationOnly --declaration --declarationDir ./types && node ./scripts/pruneTypes.js",
-    "types:build:cypress": "tsc --p cypress/tsconfig.cypress.json",
+    "types:build": "yarn types:noemit && yarn tsc --emitDeclarationOnly --declaration --declarationDir ./types && node ./scripts/pruneTypes.js",
+    "types:noemit": "tsc --p cypress/tsconfig.check-cypress.json && tsc --p tsconfig.check-docs.json",
     "types:start": "yarn types:build --watch"
   },
   "peerDependencies": {
@@ -44,10 +44,10 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@react-spring/web": "^9.7.5",
-    "@splunk/react-icons": "^5.2.0",
-    "@splunk/themes": "^1.2.0",
-    "@splunk/ui-utils": "^1.10.0",
-    "decimal.js-light": "^2.2.3",
+    "@splunk/react-icons": "^5.4.0",
+    "@splunk/themes": "^1.3.0",
+    "@splunk/ui-utils": "^1.11.0",
+    "decimal.js-light": "^2.5.1",
     "lodash": "^4.17.14",
     "moment": "^2.29.4",
     "prop-types": "^15.6.2",
@@ -60,9 +60,9 @@
     "@babel/core": "^7.28.0",
     "@babel/plugin-transform-runtime": "^7.28.0",
     "@splunk/babel-preset": "^4.0.0",
-    "@splunk/docs-gen": "^1.1.0",
+    "@splunk/docs-gen": "^1.2.0",
     "@splunk/eslint-config": "^5.0.0",
-    "@splunk/react-docs": "^1.2.0",
+    "@splunk/react-docs": "^1.4.0",
     "@splunk/stylelint-config": "^5.0.0",
     "@splunk/test-runner-utils": "^0.4.1",
     "@splunk/webpack-configs": "^7.0.2",
@@ -74,12 +74,12 @@
     "@storybook/react-webpack5": "^7.6.20",
     "@storybook/test-runner": "0.16.0",
     "@testing-library/cypress": "^9.0.0",
-    "@testing-library/dom": "^10.4.0",
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.6.1",
-    "@types/jest": "^29.5.14",
+    "@types/jest": "^30.0.0",
     "@types/lodash": "^4.14.156",
     "@types/node": "^18.16.0",
     "@types/prismjs": "^1.26.3",
@@ -87,14 +87,13 @@
     "@types/react-dom": "^18.2.0",
     "@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": "^8.29.1",
     "@typescript-eslint/parser": "^8.29.1",
     "axe-html-reporter": "^2.2.11",
     "axe-playwright": "^1.1.11",
     "babel-loader": "^8.3.0",
-    "babel-plugin-istanbul": "^5.1.0",
+    "babel-plugin-istanbul": "^5.2.0",
     "babel-plugin-styled-components": "^1.10.7",
     "babel-plugin-transform-imports": "^2.0.0",
     "babel-plugin-transform-require-context": "^0.1.1",
@@ -119,8 +118,8 @@
     "fs-readdir-recursive": "^1.0.0",
     "glob": "^7.1.6",
     "http-server": "^14.1.1",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
+    "jest": "^30.1.3",
+    "jest-environment-jsdom": "^30.1.2",
     "jest-image-snapshot": "^5.1.0",
     "jest-junit": "^10.0.0",
     "jest-stare": "^2.4.1",

package/tsconfig.check-docs.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true
+  },
+  "include": ["stubs-*.d.ts", "src/docs/**/*"],
+  "exclude": []
+}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 /**
  * @name Basic
- * @description An Avatar can show one to three characters. You can use the getInitials helper to shorten a name.
+ * @description An Avatar can show one to three characters. You can use the `getInitials` helper to shorten a name.
  */
 export default function Basic(): React.JSX.Element;

package/types/src/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import BreadcrumbsContext from './BreadcrumbsContext';
 import Item from './Item';
 import { ComponentProps } from '../utils/types';
 /** @public */
@@ -27,11 +28,6 @@ interface BreadcrumbsPropsBase {
     onClick?: BreadcrumbsClickHandler;
 }
 type BreadcrumbsProps = ComponentProps<BreadcrumbsPropsBase, 'nav'>;
-type BreadcrumbsContextValue = {
-    onClick?: BreadcrumbsClickHandler;
-    prefix?: string;
-};
-declare const BreadcrumbsContext: React.Context<BreadcrumbsContextValue>;
 declare function Breadcrumbs({ children, elementRef, enableCurrentPage, onClick, ...otherProps }: BreadcrumbsProps): React.JSX.Element;
 declare namespace Breadcrumbs {
     var propTypes: {

package/types/src/Breadcrumbs/BreadcrumbsContext.d.ts

@@ -0,0 +1,7 @@
+import { BreadcrumbsClickHandler } from '@splunk/react-ui/Breadcrumbs';
+export interface BreadcrumbsContext {
+    onClick?: BreadcrumbsClickHandler;
+    prefix?: string;
+}
+export declare const BreadcrumbsContext: import("react").Context<BreadcrumbsContext>;
+export default BreadcrumbsContext;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { BreadcrumbsClickHandler } from './Breadcrumbs';
+import { BreadcrumbsClickHandler } from '@splunk/react-ui/Breadcrumbs';
 import { ComponentProps } from '../utils/types';
 interface ItemPropsBase {
     /**

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

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

package/types/src/Checkbox/Checkbox.d.ts

@@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ComponentProps } from '../utils/types';
+/** @public */
+type CheckboxChangeHandler = (event: React.ChangeEvent<HTMLInputElement>, data: {
+    checked: boolean;
+    name?: string;
+    value?: string;
+}) => void;
+interface CheckboxPropsBase {
+    /**
+     * Setting this value makes the component controlled. If set, the onChange callback is required.
+     * A setting of "indeterminate" is considered unchecked for the purposes of form submission.
+     */
+    checked?: boolean | 'indeterminate';
+    /** The content to display inside the checkbox label. */
+    children?: React.ReactNode;
+    /** Set this property instead of checked to make the component uncontrolled. */
+    defaultChecked?: boolean;
+    /**
+     * The id of the description.
+     * When placed in a ControlGroup, this is automatically set to the ControlGroup's help component.
+     */
+    describedBy?: string;
+    disabled?: boolean;
+    /**
+     * A React ref which is set to the DOM element when the component mounts, and null when it unmounts.
+     */
+    elementRef?: React.Ref<HTMLDivElement>;
+    /**
+     * Mark the component as having an error.
+     */
+    error?: boolean;
+    inert?: boolean;
+    /**
+     * A React ref which is set to the input element when the component mounts and null when it unmounts.
+     */
+    inputRef?: React.Ref<HTMLInputElement>;
+    /**
+     * The id of the label.
+     * When placed in a ControlGroup, this is automatically set to the ControlGroup's label.
+     */
+    labelledBy?: string;
+    /**
+     * The name is returned with onChange events, which can be used to identify the
+     * control when multiple controls share an onChange callback.
+     */
+    name?: string;
+    /**
+     * Fires when the checked state changes.
+     */
+    onChange?: CheckboxChangeHandler;
+    /** @private. */
+    required?: boolean;
+    /**
+     * Returned by the onChange handler and submitted during form submission if the checkbox is checked.
+     * This defaults to "on" if the input is checked.
+     */
+    value?: string;
+}
+interface CheckboxPropsBaseControlled extends CheckboxPropsBase {
+    defaultChecked?: never;
+    onChange: CheckboxChangeHandler;
+}
+interface CheckboxPropsBaseUncontrolled extends CheckboxPropsBase {
+    defaultChecked?: boolean;
+    checked?: never;
+}
+type CheckboxProps = ComponentProps<CheckboxPropsBaseControlled | CheckboxPropsBaseUncontrolled, 'input'>;
+declare const Checkbox: {
+    ({ checked, children, defaultChecked, describedBy, disabled, elementRef, error, id, inert, inputRef, labelledBy, name, onChange, required, role, tabIndex, value, ...otherProps }: CheckboxProps): React.JSX.Element;
+    propTypes: {
+        checked: PropTypes.Requireable<string | boolean>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        defaultChecked: PropTypes.Requireable<boolean>;
+        describedBy: PropTypes.Requireable<string>;
+        disabled: PropTypes.Requireable<boolean>;
+        elementRef: PropTypes.Requireable<object>;
+        error: PropTypes.Requireable<boolean>;
+        inert: PropTypes.Requireable<boolean>;
+        inputRef: PropTypes.Requireable<object>;
+        labelledBy: PropTypes.Requireable<string>;
+        name: PropTypes.Requireable<string>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /** @private. */
+        required: PropTypes.Requireable<boolean>;
+    };
+};
+export default Checkbox;
+export { CheckboxChangeHandler, CheckboxPropsBase, CheckboxPropsBaseControlled, CheckboxPropsBaseUncontrolled, };

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

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * @name Controlled
+ * @description Checkbox can be controlled using the checked prop and an onChange callback.
+ */
+declare const Basic: () => React.JSX.Element;
+export default Basic;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * @name Disabled
+ */
+declare const Disabled: () => React.JSX.Element;
+export default Disabled;

package/types/src/Checkbox/docs/examples/Error.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * @name Error
+ */
+declare function CheckboxError(): React.JSX.Element;
+export default CheckboxError;

package/types/src/Checkbox/docs/examples/Uncontrolled.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * @name Uncontrolled
+ * @description Checkbox can also used as an uncontrolled component, using defaultChecked to set the initial checked state.
+ */
+declare const Uncontrolled: () => React.JSX.Element;
+export default Uncontrolled;

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

@@ -0,0 +1,2 @@
+export { default } from './Checkbox';
+export * from './Checkbox';

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

@@ -3,6 +3,8 @@ 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' | 'sql' | 'svg' | 'text' | 'txt' | 'xml' | 'yaml' | 'yml';
 interface CodePropsBase {
+    /** Change the style of the Code container. */
+    containerAppearance?: 'none' | 'section';
     /**
      * A React ref which is set to the DOM element when the component mounts and null when it unmounts.
      */
@@ -43,9 +45,10 @@ interface CodePropsBase {
     value?: string;
 }
 type CodeProps = ComponentProps<CodePropsBase, 'pre'>;
-declare function Code({ elementRef, indentChars, language, languageFallback, lineHighlights, lineNumberStart, showIndentGuide, showLineNumbers, value, ...otherProps }: CodeProps): React.JSX.Element;
+declare function Code({ containerAppearance, elementRef, indentChars, language, languageFallback, lineHighlights, lineNumberStart, showIndentGuide, showLineNumbers, value, ...otherProps }: CodeProps): React.JSX.Element;
 declare namespace Code {
     var propTypes: {
+        containerAppearance: PropTypes.Requireable<string>;
         elementRef: PropTypes.Requireable<object>;
         indentChars: PropTypes.Requireable<number>;
         language: PropTypes.Requireable<string>;

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

@@ -2,6 +2,7 @@ import React from 'react';
 interface LineHighlightProps {
     highlight: string;
     width: number;
+    containerAppearance: 'none' | 'section';
 }
 type Ranges = [number, number][];
 declare const parseHighlightLines: (highlight: string) => Ranges;

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

@@ -1,6 +1,7 @@
 import React from 'react';
 interface LineNumbersProps {
+    containerAppearance: 'none' | 'section';
     value?: string;
 }
-declare function LineNumbers({ value }: LineNumbersProps): React.JSX.Element;
+declare function LineNumbers({ containerAppearance, value }: LineNumbersProps): React.JSX.Element;
 export default LineNumbers;

package/types/src/Code/docs/examples/CustomizeContainer.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * @name Customize container
+ * @description Use containerAppearance="section" when you need a defined container for Code.
+ */
+declare function CustomizeContainer(): React.JSX.Element;
+export default CustomizeContainer;

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

@@ -1,14 +1,14 @@
 import React, { Component } from 'react';
-import { SwitchClickHandler } from '@splunk/react-ui/Switch';
+import { CheckboxChangeHandler } from '@splunk/react-ui/Checkbox';
 /**
  * @name Customized label target
  * @description Change the focus/activation target that should be linked to the label.
  */
 declare class CustomizedLabelTarget extends Component<object, {
-    values: number[];
+    values: string[];
 }> {
     constructor(props: object);
-    handleClick: SwitchClickHandler;
+    handleClick: CheckboxChangeHandler;
     render(): React.JSX.Element;
 }
 export default CustomizedLabelTarget;

package/types/src/Date/Date.d.ts

@@ -17,6 +17,8 @@ type DateFocusHandler = (event: React.FocusEvent<HTMLInputElement>, data: {
     value: string;
 }) => void;
 interface DatePropsBase {
+    /** Append removes rounded borders and the border from the right side. */
+    append?: boolean;
     /**
      * Include an "X" button to clear the value.
      */
@@ -71,6 +73,8 @@ interface DatePropsBase {
     onClick?: React.MouseEventHandler<HTMLInputElement>;
     onFocus?: DateFocusHandler;
     onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+    /** Prepend removes rounded borders from the left side. */
+    prepend?: boolean;
     /**
      * Setting this value makes the property controlled. An onChange callback is required.
      *
@@ -93,9 +97,10 @@ interface DatePropsBaseUncontrolled extends DatePropsBase {
 }
 type DateProps = ComponentProps<DatePropsBaseControlled | DatePropsBaseUncontrolled, 'div'>;
 declare const validateValue: (value: string | undefined) => void;
-declare function Date({ canClear, defaultValue, disabled, elementRef, highlightToday, inline, inputOnly, locale, name, onChange, onClick, onFocus, onKeyDown, value: valueProp, ...otherProps }: DateProps): React.JSX.Element;
+declare function Date({ append, canClear, defaultValue, disabled, elementRef, highlightToday, inline, inputOnly, locale, name, onChange, onClick, onFocus, onKeyDown, prepend, value: valueProp, ...otherProps }: DateProps): React.JSX.Element;
 declare namespace Date {
     var propTypes: {
+        append: PropTypes.Requireable<boolean>;
         canClear: PropTypes.Requireable<boolean>;
         defaultValue: PropTypes.Requireable<string>;
         describedBy: PropTypes.Requireable<string>;
@@ -114,6 +119,7 @@ declare namespace Date {
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+        prepend: PropTypes.Requireable<boolean>;
         value: PropTypes.Requireable<string>;
     };
     var momentFormat: string;

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

@@ -8,6 +8,7 @@ interface DefinitionListPropsBase {
     /**
      * Defines the width of the `Description`.
      * Can be set to a specific pixel or string value. If not specified, will fill to take up available space.
+     * This prop is ignored when `layout="stacked"`.
      */
     descriptionWidth?: string;
     /**
@@ -19,17 +20,21 @@ interface DefinitionListPropsBase {
      *
      * - `fixed`: The `Term` uses a fixed width. The `Description` fills remaining available space.
      * - `auto`: Both `Term` and `Description` size proportionally based on their container, taking an equal portion of available space.
+     * - `stacked`: `Term` is displayed above the `Description`. Custom `termWidth` and `descriptionWidth` are ignored. Both `Term` and `Description` size proportionally.
+     *
      * `fixed` layout is the current default. In the next major version, this prop will default to `auto`.
      */
-    layout?: 'fixed' | 'auto';
+    layout?: 'fixed' | 'auto' | 'stacked';
     /**
      * Sets the character used to separate key-value pair.
+     * Only supported in `layout="fixed"` and `layout="auto"`. Will not be rendered in `layout="stacked"`.
      */
     separatorCharacter?: string;
     /**
      * Defines the width of the `Term`.
      * Can be set to a specific pixel or string value.
-     * The default value is ignored when layout="auto"
+     * The default value is ignored when `layout="auto"`.
+     * This prop is ignored when `layout="stacked"`.
      */
     termWidth?: string;
 }

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

@@ -1,6 +1,6 @@
 interface DefinitionListContextValue {
     descriptionWidth?: string;
-    layout: 'fixed' | 'auto';
+    layout: 'fixed' | 'auto' | 'stacked';
     separatorCharacter?: '.' | string;
     termWidth?: string;
 }

package/types/src/DefinitionList/docs/examples/StackedLayout.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * @name Stacked layout
+ */
+declare function StackedLayout(): React.JSX.Element;
+export default StackedLayout;

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

@@ -2,7 +2,7 @@ import React from 'react';
 import Option from './Option';
 import { ComponentProps } from '../utils/types';
 /** @public */
-type DualListboxSelectHandler = (event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLUListElement>, data: {
+type DualListboxSelectHandler = (event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLUListElement> | React.ChangeEvent<HTMLInputElement>, data: {
     /**
      * The list `name` associated to the batch action.
      */

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

@@ -1,10 +1,10 @@
 import React from 'react';
-import { SwitchCheckboxWithSomeClickHandler } from '@splunk/react-ui/Switch';
+import { CheckboxChangeHandler } from '@splunk/react-ui/Checkbox';
 import { ComponentProps } from '../utils/types';
-type ListboxLabelSwitchClickHandler = SwitchCheckboxWithSomeClickHandler;
+type ListboxLabelCheckboxChangeHandler = CheckboxChangeHandler;
 interface ListboxLabelPropsBase {
     /**
-     * ID for the label. Used to label the switch and associated listbox.
+     * ID for the label. Used to label the checkbox and associated listbox.
      */
     id: string;
     /**
@@ -20,18 +20,18 @@ interface ListboxLabelPropsBase {
      */
     name: string;
     /**
-     * Toggle callback for the "select-all" switch.
+     * Toggle callback for the "select-all" checkbox.
      */
-    onSwitchClick: ListboxLabelSwitchClickHandler;
+    onCheckboxChange: ListboxLabelCheckboxChangeHandler;
     /**
      * The value of this option and the label shown for it.
      */
     value: string;
 }
 type ListboxLabelProps = ComponentProps<ListboxLabelPropsBase, 'div'>;
-declare function ListboxLabel({ id, index, listId, name, onSwitchClick, value }: ListboxLabelProps): React.JSX.Element | null;
+declare function ListboxLabel({ id, index, listId, name, onCheckboxChange, value }: ListboxLabelProps): React.JSX.Element | null;
 declare namespace ListboxLabel {
     var propTypes: React.WeakValidationMap<ListboxLabelPropsBase>;
 }
 export default ListboxLabel;
-export { ListboxLabelSwitchClickHandler };
+export { ListboxLabelCheckboxChangeHandler };

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

@@ -7,9 +7,9 @@ type ListboxClickHandler = (event: React.MouseEvent<HTMLLIElement> | React.Keybo
 type ListboxKeyDownHandler = (event: React.KeyboardEvent<HTMLUListElement>, data: {
     name: string;
 }) => void;
-type ListboxSelectAllClickHandler = (event: React.MouseEvent<HTMLButtonElement>, data: {
+type ListboxSelectAllClickHandler = (event: React.ChangeEvent<HTMLInputElement>, data: {
     name: string;
-    selected: true | false | 'some';
+    selected: true | false | 'indeterminate';
 }) => void;
 interface ListboxPropsBase {
     /**

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

@@ -10,7 +10,7 @@ export type GetOptionStateHandler = (value: string) => {
 };
 export type GetLabelStateHandler = () => {
     disabled: boolean;
-    selected: boolean | 'some';
+    selected: boolean | 'indeterminate';
     selectedValueCount: number;
     valueCount: number;
 };

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

@@ -49,6 +49,11 @@ interface FilePropsBase {
     fullscreen?: boolean;
     /** Show help text. */
     help?: React.ReactNode;
+    /**
+     * An id for the input, which may be necessary for accessibility, such as for aria
+     * attributes.
+     */
+    inputId?: string;
     /** The name is returned with onRequestAdd and onRequestRemove events,
      * which can be used to identify the
      * control when multiple controls share an onChange callback. */
@@ -74,7 +79,7 @@ type FileProps = ComponentProps<FilePropsBase, 'div'>;
  * file readers, only a reference to the file. This can be used to post binary content, or
  * upload using an array buffer.
  */
-declare function File({ accept, allowMultiple, children, disabled, dropAnywhere, elementRef, error, fullscreen, help, name, onRequestAdd, onRequestRemove, onRequestRetry, required, supportsMessage: supportsMessageProp, ...otherProps }: FileProps): React.JSX.Element;
+declare function File({ accept, allowMultiple, children, disabled, dropAnywhere, elementRef, error, fullscreen, help, inputId: inputIdProp, name, onRequestAdd, onRequestRemove, onRequestRetry, required, supportsMessage: supportsMessageProp, ...otherProps }: FileProps): React.JSX.Element;
 declare namespace File {
     var propTypes: {
         accept: PropTypes.Requireable<string>;
@@ -86,6 +91,7 @@ declare namespace File {
         fullscreen: PropTypes.Requireable<boolean>;
         error: PropTypes.Requireable<boolean>;
         help: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        inputId: PropTypes.Requireable<string>;
         name: PropTypes.Requireable<string>;
         onRequestAdd: PropTypes.Requireable<(...args: any[]) => any>;
         onRequestRemove: PropTypes.Requireable<(...args: any[]) => any>;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { JSONElement } from './JSONTree';
-import { TreeItemPropsBase } from '../Tree';
+import { JSONElement } from '@splunk/react-ui/JSONTree';
+import { TreeItemPropsBase } from '@splunk/react-ui/Tree';
 import { ComponentProps } from '../utils/types';
 export type ExpandLinkRenderer = (params: {
     onToggleExpansion: (event: React.KeyboardEvent<HTMLLIElement> | React.MouseEvent<HTMLSpanElement>, data?: {
@@ -20,6 +20,7 @@ interface JSONTreeItemPropsBase extends TreeItemPropsBase {
     indentArray?: string[];
     index: number;
     initialOpenState: boolean;
+    isRoot?: boolean;
     properties?: string[];
     propertyDataPath: string;
     propertyElement?: JSX.Element | undefined;
@@ -28,7 +29,7 @@ interface JSONTreeItemPropsBase extends TreeItemPropsBase {
     value?: JSONElement;
 }
 type JSONTreeItemProps = ComponentProps<JSONTreeItemPropsBase, 'li'>;
-export declare function JSONTreeItem({ clickableKeyRef, clickableValRef, hasChildren, indentArray, index, initialOpenState, onFocus, properties, propertyDataPath, propertyElement, renderExpandLink, representation, value, ...otherProps }: JSONTreeItemProps): React.JSX.Element;
+export declare function JSONTreeItem({ clickableKeyRef, clickableValRef, hasChildren, indentArray, index, initialOpenState, isRoot, onFocus, properties, propertyDataPath, propertyElement, renderExpandLink, representation, value, ...otherProps }: JSONTreeItemProps): React.JSX.Element;
 export declare namespace JSONTreeItem {
     var propTypes: {
         clickableKeyRef: PropTypes.Requireable<object>;
@@ -37,6 +38,7 @@ export declare namespace JSONTreeItem {
         indentArray: PropTypes.Requireable<(string | null | undefined)[]>;
         index: PropTypes.Requireable<number>;
         initialOpenState: PropTypes.Requireable<boolean>;
+        isRoot: PropTypes.Requireable<boolean>;
         properties: PropTypes.Requireable<(string | null | undefined)[]>;
         propertyDataPath: PropTypes.Requireable<string>;
         propertyElement: PropTypes.Requireable<PropTypes.ReactNodeLike>;

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

@@ -1,6 +1,7 @@
 import React from 'react';
-import { JSONElement, JSONTreeClickKeyHandler, JSONTreeClickValueHandler } from './JSONTree';
+import { JSONElement, JSONTreeClickKeyHandler, JSONTreeClickValueHandler } from '@splunk/react-ui/JSONTree';
 type RenderTreeItemsProps = {
+    baseId: string;
     defaultOpen?: boolean;
     defaultExpanded?: boolean;
     expandChildrenOnShiftKey?: boolean;
@@ -14,5 +15,5 @@ type RenderTreeItemsProps = {
     shift?: boolean;
     updateShift: ((newShift: boolean) => void) | undefined;
 };
-export declare function renderTreeItems({ defaultOpen, defaultExpanded, expandChildrenOnShiftKey, indent, indentLevel, obj, onClickKey, onClickValue, overflow, path, shift, updateShift, }: RenderTreeItemsProps): React.JSX.Element | React.JSX.Element[];
+export declare function renderTreeItems({ baseId, defaultOpen, defaultExpanded, expandChildrenOnShiftKey, indent, indentLevel, obj, onClickKey, onClickValue, overflow, path, shift, updateShift, }: RenderTreeItemsProps): React.JSX.Element | React.JSX.Element[];
 export {};

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

@@ -3,9 +3,10 @@ import { ComponentProps } from '../../utils/types';
 import { StyledCodeBlock } from '../MarkdownStyles';
 interface MarkdownCodeBlockPropsBase {
     children: React.ReactNode[];
+    containerAppearance?: 'none' | 'section';
     language?: string;
 }
 type MarkdownCodeBlockProps = ComponentProps<MarkdownCodeBlockPropsBase, 'div'>;
-declare function MarkdownCodeBlock({ children, language, ...otherProps }: MarkdownCodeBlockProps): React.JSX.Element;
+declare function MarkdownCodeBlock({ children, containerAppearance, language, ...otherProps }: MarkdownCodeBlockProps): React.JSX.Element;
 export default MarkdownCodeBlock;
 export { StyledCodeBlock };

package/types/src/Menu/docs/examples/Dimmed.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 /**
  * @name Dimmed
- * @description If you absolutely need to disable a Menu Item use a dimmed Menu Item. When the disabled prop is set to "dimmed", the Menu Item does not respond to events but can still receive focus to ensure users can navigate to the Item when using assistive technologies. This also sets aria-disabled to true.
+ * @description Rendering a 'dimmed' Menu Item ensures the Menu Item is still discoverable and can receive focus, but the Menu Item cannot not be activated by the user.
  */
 declare function Dimmed(): React.JSX.Element;
 export default Dimmed;

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

@@ -1,6 +1,7 @@
 import React from 'react';
 /**
  * @name Disabled
+ * @description Consider using a 'dimmed' Menu Item. Disabling Menu Items creates barriers for all users and can exclude people with disabilities. If necessary, a Menu Item can be completely disabled by setting disabled='disabled'. In these cases, consider contacting us to collaborate on alternatives for a more inclusive experience.
  */
 declare function Disabled(): React.JSX.Element;
 export default Disabled;

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

@@ -1,4 +1,4 @@
-import { ModalRequestCloseHandler } from './Modal';
+import { ModalRequestCloseHandler } from '@splunk/react-ui/Modal';
 export interface ModalContext {
     divider?: 'header' | 'footer' | 'both' | 'none';
     titleId?: string;