@splunk/react-ui 5.1.0 → 5.3.0

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

@@ -5,26 +5,49 @@ import Term from './Term';
 import { ComponentProps } from '../utils/types';
 interface DefinitionListPropsBase {
     children?: React.ReactNode;
+    /**
+     * 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;
     /**
      * A React ref which is set to the DOM element when the component mounts and null when it unmounts.
      */
     elementRef?: React.Ref<HTMLDListElement>;
+    /**
+     * Sets the layout style for the definition list.
+     *
+     * - `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' | '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;
+    separatorCharacter?: string;
     /**
-     * Defines the width of the key (term).
+     * Defines the width of the `Term`.
+     * Can be set to a specific pixel or string value.
+     * The default value is ignored when `layout="auto"`.
+     * This prop is ignored when `layout="stacked"`.
      */
     termWidth?: string;
 }
 type DefinitionListProps = ComponentProps<DefinitionListPropsBase, 'dl'>;
-declare function DefinitionList({ children, elementRef, separatorCharacter, termWidth, ...otherProps }: DefinitionListProps): React.JSX.Element;
+declare function DefinitionList({ children, descriptionWidth, elementRef, layout, // TODO (SUI-8077): Change the default layout to `auto`.
+separatorCharacter, termWidth, ...otherProps }: DefinitionListProps): React.JSX.Element;
 declare namespace DefinitionList {
     var propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        descriptionWidth: PropTypes.Requireable<string>;
         elementRef: PropTypes.Requireable<object>;
-        separatorCharacter: PropTypes.Requireable<string | PropTypes.Requireable<string>>;
+        layout: PropTypes.Requireable<string>;
+        separatorCharacter: PropTypes.Requireable<string>;
         termWidth: PropTypes.Requireable<string>;
     };
     var Description: typeof import("./Description").default;

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

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

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

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

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

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * @name Customized widths
+ * @description The term widths and description widths can be set to a specific pixel or string value.
+ */
+declare function CustomizedWidths(): React.JSX.Element;
+export default CustomizedWidths;

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

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Empty description
+ * @description Use a character and screen reader content to indicate when a description does not have a value. When there is not a better choice based on the context, use a hyphen to indicate the missing value with corresponding screen reader content.
+ */
 declare function EmptyDescription(): React.JSX.Element;
 export default EmptyDescription;

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/DefinitionList/docs/examples/WithSeparator.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name With separator
+ * @description Sets the character used to separate key-value pair
+ */
 declare function WithSeparator(): React.JSX.Element;
 export default WithSeparator;

package/types/src/Divider/docs/examples/Appearance.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Appearance
+ * @description Divider with preset border colors. Dividers with appearance="weak" will not meet accessibility requirements to be perceivable. If the component should be perceivable, consider the other contrast compliant appearance values. Otherwise, apply the decorative prop.
+ */
 declare function Appearance(): React.JSX.Element;
 export default Appearance;

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

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

package/types/src/Divider/docs/examples/CustomStyle.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name CustomStyle
+ * @description Divider with custom color.
+ */
 declare function CustomStyle(): React.JSX.Element;
 export default CustomStyle;

package/types/src/Divider/docs/examples/Decorative.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Decorative
+ * @description When the Divider does not have semantics, add the decorative prop.
+ */
 declare function Decorative(): React.JSX.Element;
 export default Decorative;

package/types/src/Divider/docs/examples/Vertical.d.ts

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

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

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Dropdown
+ * @description A Dropdown can contain any content. The content must constrain its own width.
+ */
 declare function Basic(): React.JSX.Element;
 export default Basic;

package/types/src/Dropdown/docs/examples/BasicMenu.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
+/**
+ * @name Dropdown menu
+ */
 declare function BasicMenu(): React.JSX.Element;
 export default BasicMenu;

package/types/src/Dropdown/docs/examples/ControlledDropdown.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Controlled
+ * @description By default, Dropdown handles its own state. If you want more granular control of the events that open or close a Dropdown, use it as a [controlled component](https://reactjs.org/docs/forms.html#controlled-components). When you use Dropdown as a controlled component, the parent component manages the state of the Dropdown. Note that either the Dropdown or its parent handles its state, never both. See the onRequestClose and onRequestOpen callbacks for hooks you can use to manage state. This examples uses toggleClick and offScreen. It receives but ignores all other close actions.
+ */
 declare function ControlledDropdown(): React.JSX.Element;
 export default ControlledDropdown;

package/types/src/Dropdown/docs/examples/Dialog.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Dropdown dialog
+ * @description By default, a Dropdown dialog box does not close on click. Set the closeReasons prop to ignore specific actions.
+ */
 declare function Dialog(): React.JSX.Element;
 export default Dialog;

package/types/src/Dropdown/docs/examples/ScrollContainer.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Customized scroll container
+ * @description By default, a Dropdown moves with the window scroll. Use Scroll Container Provider when you want a Dropdown to move within a different scroll container.
+ */
 declare function ScrollContainer(): React.JSX.Element;
 export default ScrollContainer;

package/types/src/Dropdown/docs/examples/ScrollingMenu.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Dropdown scrolling menu
+ * @description If a Menu contains many items, you can let the Menu scroll by setting the overflowY and maxHeight style prop.
+ */
 declare function ScrollingMenu(): React.JSX.Element;
 export default ScrollingMenu;

package/types/src/Dropdown/docs/examples/Submenu.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
+/**
+ * @name Dropdown submenu
+ */
 declare function Submenu(): React.JSX.Element;
 export default Submenu;

package/types/src/Dropdown/docs/examples/TooltipButtonToggle.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Toggle with tooltip
+ * @description When using a toggle with a Tooltip, use a React.forwardRef to pass the elementRef to the toggle.
+ */
 declare function TooltipButtonToggle(): React.JSX.Element;
 export default TooltipButtonToggle;

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/DualListbox/Option.d.ts

@@ -14,7 +14,7 @@ interface OptionPropsBase {
     label: string;
     /**
      * Parent list `name` associated to option.
-     * Used in intial state and controlled variants.
+     * Used in initial state and controlled variants.
      */
     listName?: string;
     /**

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

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

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

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

package/types/src/DualListbox/docs/examples/Fill.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Fill
+ * @description Dynamic size example.
+ */
 declare function Fill(): React.JSX.Element;
 export default Fill;

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/File/docs/examples/CustomizedMessages.d.ts

@@ -1,2 +1,6 @@
 import React from 'react';
+/**
+ * @name Customized supports message and help
+ * @description The default supports message can be customized. A help message can also be added.
+ */
 export default function CustomizedMessages(): React.JSX.Element;

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

@@ -1,5 +1,8 @@
 import React, { Component } from 'react';
 import { FileRequestAddHandler } from '@splunk/react-ui/File';
+/**
+ * @name Disabled
+ */
 declare class Disabled extends Component<object, {
     filename?: string;
 }> {

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

@@ -1,5 +1,9 @@
 import React, { Component } from 'react';
 import { FileRequestAddHandler } from '@splunk/react-ui/File';
+/**
+ * @name Drop anywhere
+ * @description The File.Item can be dropped anywhere on the page. This example must open in a modal since the drop zone is the entire page and affects the other Files on this page.
+ */
 declare class DropAnywhere extends Component<object, {
     filename?: string;
     open: boolean;

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

@@ -1,2 +1,6 @@
 import React from 'react';
+/**
+ * @name Error
+ * @description The File and File.Item have separate error states. Generally, they should not be used together. Either the File is in error (for example, required field), or an Item is in error (for example, incorrect file type).
+ */
 export default function FileErrors(): React.JSX.Element;

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

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Full screen
+ * @description This example must open in a modal. There can only be one File component on the page. Dropping a file anywhere will upload the file.
+ */
 declare function Fullscreen(): React.JSX.Element;
 export default Fullscreen;

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

@@ -4,6 +4,10 @@ interface FileItem {
     name: string;
     value?: string | ArrayBuffer | null;
 }
+/**
+ * @name Multifile
+ * @description By storing an array of items, multiple files can be supported.
+ */
 declare class Multi extends Component<object, {
     files: FileItem[];
 }> {

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

@@ -1,2 +1,6 @@
 import React from 'react';
+/**
+ * @name Progress
+ * @description The File.Item can display its upload progress.
+ */
 export default function Progress(): React.JSX.Element;

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

@@ -1,5 +1,9 @@
 import React, { Component } from 'react';
 import { FileRequestAddHandler } from '@splunk/react-ui/File';
+/**
+ * @name Single file
+ * @description Here, selecting a new file will replace the existing file.
+ */
 declare class Single extends Component<object, {
     filename?: string;
 }> {

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

@@ -1,5 +1,8 @@
 import React, { Component } from 'react';
 import { FormRowsRequestMoveHandler, RowRequestRemoveHandler } from '@splunk/react-ui/FormRows';
+/**
+ * @name Basic
+ */
 declare class Basic extends Component<object, {
     items: React.ReactElement[];
 }> {

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

@@ -1,5 +1,9 @@
 import React, { Component } from 'react';
 import { FormRowsRequestMoveHandler, RowRequestRemoveHandler } from '@splunk/react-ui/FormRows';
+/**
+ * @name Header
+ * @description Form Rows does not provide a concept of columns, but this can be simulated by adding content to the header and setting fixed widths on the elements. For accessibility compliance, ensure each heading has a unique id and form controls have a matching describedBy prop.
+ */
 declare class Header extends Component<object, {
     items: React.ReactElement[];
 }> {

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

@@ -1,6 +1,10 @@
 import React, { Component } from 'react';
 import { FormRowsRequestMoveHandler, RowRequestRemoveHandler } from '@splunk/react-ui/FormRows';
 import { SelectChangeHandler } from '@splunk/react-ui/Select';
+/**
+ * @name Custom add menu
+ * @description The 'Add row' button can be replaced with a button, multiple buttons, or any other content you want to show below the Form Rows.
+ */
 declare class Menu extends Component<object, {
     items: React.ReactElement[];
 }> {

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

@@ -1,5 +1,9 @@
 import React, { Component } from 'react';
 import { FormRowsRequestMoveHandler } from '@splunk/react-ui/FormRows';
+/**
+ * @name Reorder only
+ * @description The add and delete functionality can be removed by not including the onRequestAdd handler on Form Rows and the onRequestRemove handler on Row. The functionality of reordering Rows will still remain intact. If users can add, they should be able to delete as well.
+ */
 declare class ReorderOnly extends Component<object, {
     items: React.ReactElement[];
 }> {

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

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

package/types/src/Heading/docs/examples/Variant.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Variant
+ * @description The level prop determines the <hX> HTML tag and has an associated default typography mixin style. To override this default styling, the variant prop can be used to specify a typography mixin style. For instance, it is possible for a variant to have title1 styling and be a <h2> tag as in the below example.
+ */
 declare function Variant(): React.JSX.Element;
 export default Variant;

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

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

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { TreeItemPropsBase } from '@splunk/react-ui/Tree';
 import { JSONElement } from './JSONTree';
-import { TreeItemPropsBase } from '../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/docs/examples/Basic.d.ts

@@ -1,2 +1,5 @@
 import React from 'react';
+/**
+ * @name Basic
+ */
 export default function Basic(): React.JSX.Element;

package/types/src/JSONTree/docs/examples/Events.d.ts

@@ -1,5 +1,9 @@
 import React, { Component } from 'react';
 import { JSONTreeClickValueHandler, JSONTreeClickKeyHandler } from '@splunk/react-ui/JSONTree';
+/**
+ * @name Click events
+ * @description Click the value to see the interaction.
+ */
 declare class Events extends Component<object, {
     key: string;
     keyPath?: (string | number)[];

package/types/src/JSONTree/docs/examples/ExpandChildrenOnShiftKey.d.ts

@@ -1,2 +1,6 @@
 import React from 'react';
+/**
+ * @name Expand children on shift key
+ * @description Shift + Click or Shift + Enter to expand all child nodes at once.
+ */
 export default function ExpandChildrenOnShiftKey(): React.JSX.Element;

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { JSONElement, JSONTreeClickKeyHandler, JSONTreeClickValueHandler } from './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/Layer/docs/examples/Basic.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Basic
+ * @description This example shows a simple overlay that can be dismissed by pressing the Escape key.
+ */
 declare function Basic(): React.JSX.Element;
 export default Basic;

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

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

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

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Basic
+ * @description Use the Link component instead of an <a> tag, by default it is displayed inline.
+ */
 declare function Basic(): React.JSX.Element;
 export default Basic;

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

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Disabled
+ * @description Links can be disabled. The href is then removed from the markup.
+ */
 declare function Disabled(): React.JSX.Element;
 export default Disabled;

package/types/src/Link/docs/examples/NewWindow.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name New window
+ * @description openInNewContext=true adds an icon and sets target to _blank. A message indicates the behavior for screen reader users. The default message, '(Opens new window)', can be customized by by passing a string to openInNewContext.
+ */
 declare function NewWindow(): React.JSX.Element;
 export default NewWindow;

package/types/src/Link/docs/examples/Standalone.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Standalone
+ * @description Use appearance="standalone" when using Link on its own without other text content.
+ */
 declare function Standalone(): React.JSX.Element;
 export default Standalone;