@splunk/react-ui 5.0.0 → 5.2.0

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

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Match ranges
+ * @description Menu.Item can highlight portions of the label as matching a filter or search.
+ */
 declare function MatchRanges(): React.JSX.Element;
 export default MatchRanges;

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

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Selectable and selected
+ * @description Items can be selected or selectable, which ensures space is reserved for the checkmark.
+ */
 declare function Selectable(): React.JSX.Element;
 export default Selectable;

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

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Selectable and selected with adornments
+ * @description Items with adornments can be selected or selectable.
+ */
 declare function SelectableWithAdornments(): React.JSX.Element;
 export default SelectableWithAdornments;

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

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Truncation
+ * @description Labels that are too long can be optionally constrained to one line and truncated.
+ */
 declare function Truncate(): React.JSX.Element;
 export default Truncate;

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

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

package/types/src/Message/docs/examples/Content.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Content
+ * @description Message can contain text, links, and buttons. Interactive items should not be included in content when Message is being used as a toast.
+ */
 declare function Content(): React.JSX.Element;
 export default Content;

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

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

package/types/src/Message/docs/examples/Removable.d.ts

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

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

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Basic
+ * @description Message Bar is a landmark so that users can easily navigate to and discover the important information; therefore, they must include a label using aria-labelledby or aria-label. There are several ways to accomplish this so each of the examples on this page illustrates a different approach.
+ */
 declare function Basic(): React.JSX.Element;
 export default Basic;

package/types/src/MessageBar/docs/examples/Types.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Types
+ * @description Message Bar can have one of four types: "info", "warning", "error" or "success".
+ */
 declare function Types(): React.JSX.Element;
 export default Types;

package/types/src/MessageBar/docs/examples/WithActions.d.ts

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

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

@@ -23,6 +23,13 @@ interface ModalPropsBase {
     /**
      * @private
      * Set to 'true' to enable closing the Modal by clicking outside of it.
+     *
+     * This behavior should be avoided as it can lead to accidental dismissal of the modal causing data loss or disruption of a user's workflow.
+     * Only enable click outside to dismiss when:
+     * - The modal content is non-critical or purely informational
+     * - Accidental dismissal will not result in loss of progress, data, or important context
+     *
+     * `onRequestClose` will receive an event with reason 'clickAway' when this happens.
      */
     closeOnClickAway?: boolean;
     /**
@@ -39,12 +46,12 @@ interface ModalPropsBase {
      */
     initialFocus?: ModalInitialFocus;
     /**
-     * Called when a close event occurs. The callback is passed the event
-     * and a reason, which is 'escapeKey', 'clickAway', or 'clickCloseButton'.
-     *
+     * Called when a close event occurs.
      * When `Modal` includes this prop, a close button is displayed by default in the `Modal.Header`.
      * To hide the close button, pass the `hideCloseButton` prop to `Modal.Header`.
      *
+     * The callback is passed the event and a reason, which is 'escapeKey' or 'clickCloseButton'.
+     *
      * Generally, use this callback to toggle the `open` prop.
      */
     onRequestClose?: ModalRequestCloseHandler;

package/types/src/Modal/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/Modal/docs/examples/InitialFocus.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Initial focus
+ * @description Initial focus can be set to an different element.
+ */
 declare function InitialFocus(): React.JSX.Element;
 export default InitialFocus;

package/types/src/Modal/docs/examples/TypicalUsage.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Typical usage
+ * @description This example shows a basic Splunk UI-styled Modal. By default, the Modal takes on the width of the content, so ensure that the width is set on the children. Alternately, set width on the Modal or Modal.Body with an inline style. Use an inline style to set the width and height of the icon to fit the icon's container. Modals *must* return focus to the element that invoked the dialog (or another element that follows the logical flow of the application) on close. To automatically return focus to the invoking element on Modal close, pass the ref of the invoking element to Modal's returnFocus prop. If using a ref is not possible, you *must* manually return focus to the invoking element in a function passed to returnFocus. Additionally, Modals containing a form should not close when clickAway event occurs. See below for an example of how to implement these requirements.
+ */
 declare function TypicalUsage(): React.JSX.Element;
 export default TypicalUsage;

package/types/src/Modal/docs/examples/Undismissable.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Undismissable
+ * @description To create a Modal that cannot be dismissed, omit the onClose callback.
+ */
 declare function Basic(): React.JSX.Element;
 export default Basic;

package/types/src/Monogram/Monogram.d.ts

@@ -44,6 +44,10 @@ type MonogramProps = MonogramInteractiveProps | MonogramNonInteractiveProps;
  * @public
  */
 declare function getInitials(name: string): string;
+/**
+ * @deprecated
+ * Monogram has been deprecated and will be removed in a future major version. Use Avatar instead.
+ */
 declare function Monogram({ backgroundColor, initials, size, ...otherProps }: MonogramProps): React.JSX.Element;
 declare namespace Monogram {
     var propTypes: {

package/types/src/Monogram/docs/examples/BackgroundAuto.d.ts

@@ -1,2 +1,6 @@
 import React from 'react';
+/**
+ * @name Auto background color
+ * @description The background color is derived from the initials prop if the backgroundColor prop is set to "auto". We do not recommend using "auto" background color because the existing built-in background color set might lead to color contrast issues. Please use a custom background color and ensure that it has sufficient color contrast with the initial's text color.
+ */
 export default function BackgroundAuto(): React.JSX.Element;

package/types/src/Monogram/docs/examples/BackgroundCustom.d.ts

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

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

@@ -1,2 +1,6 @@
 import React from 'react';
+/**
+ * @name Basic
+ * @description A Monogram 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/Monogram/docs/examples/Interactive.d.ts

@@ -1,2 +1,6 @@
 import React from 'react';
+/**
+ * @name Interactive
+ * @description A click handler can be added to enable interactivity.
+ */
 export default function Interactive(): React.JSX.Element;

package/types/src/Monogram/docs/examples/Size.d.ts

@@ -1,2 +1,6 @@
 import React from 'react';
+/**
+ * @name Size
+ * @description Monograms can be one of three standard sizes: "small", "medium" (default), "large", or "xlarge" (deprecated). The size prop can also be a number if the standard size does not fit your use case. Note: using a non-standard size may have unexpected layouts when combined with other components.
+ */
 export default function Size(): React.JSX.Element;

package/types/src/Multiselect/Compact.d.ts

@@ -129,7 +129,7 @@ interface CompactPropsBase {
      * @deprecatedValue 'buttongroup'
      * The 'buttongroup' value is deprecated and will be removed in a future major version.
      */
-    selectAllAppearance?: 'buttongroup' | 'checkbox';
+    selectAllAppearance?: 'buttongroup' | 'checkbox' | 'none';
     /**
      * Move selected values to the top of the list on next open, immediately, or not at all.
      */

package/types/src/Multiselect/Multiselect.d.ts

@@ -154,7 +154,7 @@ interface MultiselectPropsBase {
      * @deprecatedValue 'buttongroup'
      * The 'buttongroup' value is deprecated and will be removed in a future major version.
      */
-    selectAllAppearance?: 'buttongroup' | 'checkbox';
+    selectAllAppearance?: 'buttongroup' | 'checkbox' | 'none';
     /**
      * When `compact=true`, move selected values to the top of the list on next open (default), immediately, or not at all.
      */

package/types/src/Multiselect/docs/examples/Children.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Children
+ * @description children replace label when provided. label is still used for matching to the filter.
+ */
 declare function Children(): React.JSX.Element;
 export default Children;

package/types/src/Multiselect/docs/examples/Compact.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Compact
+ * @description When compact is true, the Multiselect will never grow tall.
+ */
 declare function Compact(): React.JSX.Element;
 export default Compact;

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

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

package/types/src/Multiselect/docs/examples/CustomizeSelected.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Customize selected Options
+ * @description It's possible to customize the appearance of selected Options.
+ */
 declare function CustomizeSelected(): React.JSX.Element;
 export default CustomizeSelected;

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

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

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

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

package/types/src/Multiselect/docs/examples/Fetching.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Fetching
+ * @description It's possible to populate the Options from a server. Here, that behavior is simulated. This simplified example only matches the start of the label. The matchRange prop may be set manually to reflect the matching algorithm used to filter the results. Otherwise matching text is not shown.
+ */
 declare function Fetching(): React.JSX.Element;
 export default Fetching;

package/types/src/Multiselect/docs/examples/Headings.d.ts

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

package/types/src/Multiselect/docs/examples/Icons.d.ts

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

package/types/src/Multiselect/docs/examples/LoadMoreOnScrollBottom.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Load more on scroll bottom
+ * @description Similar example as fetching but it's also possible to append more Options from a server when the list is scrolled to the bottom. Here, that behavior is simulated. The onScrollBottom prop is a function that should fetch more results and append them to the current Options. Once all items are loaded, the onScrollBottom prop should be set to null.
+ */
 declare function LoadMoreOnScrollBottom(): React.JSX.Element;
 export default LoadMoreOnScrollBottom;

package/types/src/Multiselect/docs/examples/NewValues.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name New values
+ * @description Optionally, users can be allowed to add arbitrary values.
+ */
 declare function NewValues(): React.JSX.Element;
 export default NewValues;

package/types/src/Multiselect/docs/examples/TabInput.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Tab to confirm new value
+ * @description If a new value is entered and there are no other Options available, pressing the Tab key will confirm the new value.
+ */
 declare function TabInput(): React.JSX.Element;
 export default TabInput;

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

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

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

@@ -1,5 +1,9 @@
 import React, { Component } from 'react';
 import { NumberChangeHandler } from '@splunk/react-ui/Number';
+/**
+ * @name Controlled
+ * @description Number requires a value prop and an onChange callback to update the value prop for most use cases. Set value to null.
+ */
 declare class Basic extends Component<object, {
     value?: number;
 }> {

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

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

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

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

package/types/src/Number/docs/examples/Limits.d.ts

@@ -1,5 +1,9 @@
 import React, { Component } from 'react';
 import { NumberChangeHandler } from '@splunk/react-ui/Number';
+/**
+ * @name Limits
+ * @description Number accepts min, max, step, and roundTo props.
+ */
 declare class Limits extends Component<object, {
     value?: number;
 }> {

package/types/src/Number/docs/examples/Locale.d.ts

@@ -1,5 +1,9 @@
 import React, { Component } from 'react';
 import { NumberChangeHandler } from '@splunk/react-ui/Number';
+/**
+ * @name Locale
+ * @description A locale can be included which may change the decimal separator to a comma.
+ */
 declare class Locale extends Component<object, {
     value?: number;
 }> {

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

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Uncontrolled
+ * @description Alternately, Number can be uncontrolled and optionally provided a defaultValue. The onChange callback still fires. The value prop cannot be set or updated externally.
+ */
 declare function Uncontrolled(): React.JSX.Element;
 export default Uncontrolled;

package/types/src/Paginator/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/Paginator/docs/examples/Compact.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Compact
+ * @description A Paginator control with buttons only.
+ */
 declare function Compact(): React.JSX.Element;
 export default Compact;

package/types/src/Paginator/docs/examples/CompactCustomLabel.d.ts

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

package/types/src/Paginator/docs/examples/CompactWithLabel.d.ts

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

package/types/src/Paginator/docs/examples/CustomPages.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Custom pages
+ * @description Customize Paginator's pages and Prev/Next buttons with generatePageProps.
+ */
 declare function CustomPages(): React.JSX.Element;
 export default CustomPages;

package/types/src/Paginator/docs/examples/Labelled.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Labelled
+ * @description When possible, a Paginator should use aria-labelledby or aria-label to provide an accessible label describing the content that is being paginated.
+ */
 declare function Labelled(): React.JSX.Element;
 export default Labelled;

package/types/src/Paginator/docs/examples/PageControl.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Page control
+ * @description A Paginator control that allows any page to be selected.
+ */
 declare function PageControl(): React.JSX.Element;
 export default PageControl;

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

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Basic
+ * @description Paragraph provides default fonts, line heights, and spacing. Margins can be removed when necessary.
+ */
 declare function Basic(): React.JSX.Element;
 export default Basic;

package/types/src/Popover/Popover.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { SpringConfig } from '@react-spring/web';
+import PropTypes from 'prop-types';
 import { ComponentProps } from '../utils/types';
 /** @public */
 type PopoverChildrenRenderer = (data: {

package/types/src/Popover/PopoverProvider.d.ts

@@ -1,6 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 interface PopoverContextProps {
+    /**
+     * @private
+     *
+     * If set, Popover will not call `stopPropagation` on click events.
+     */
+    allowPropagation?: boolean;
     children?: React.ReactNode;
     /**
      * Whether or not to hide the arrow pointing to the `Popover` anchor.
@@ -14,8 +20,10 @@ declare const PopoverContext: React.Context<PopoverContextProps>;
  * Provides a method for controlling certain `Popover` props in components that use `Popover`.
  */
 declare const PopoverProvider: {
-    ({ children, hideArrow }: PopoverContextProps): React.JSX.Element;
+    ({ allowPropagation, children, hideArrow }: PopoverContextProps): React.JSX.Element;
     propTypes: {
+        /** @private */
+        allowPropagation: PropTypes.Requireable<boolean>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         hideArrow: PropTypes.Requireable<boolean>;
     };

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

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Basic
+ * @description Click the button to view the Popover.
+ */
 declare function Example(): React.JSX.Element;
 export default Example;

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

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

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

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

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

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

package/types/src/Prose/docs/examples/Customize.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Customize
+ * @description Content elements can be styled while still retaining the prose styling
+ */
 declare function Customize(): React.JSX.Element;
 export default Customize;

package/types/src/RadioBar/Option.d.ts

@@ -29,7 +29,7 @@ interface OptionPropsBase {
     value: any;
 }
 type OptionProps = ComponentProps<OptionPropsBase, 'button'>;
-declare function Option({ disabled, label, selected, startAdornment, endAdornment, value, role, ...otherProps }: OptionProps): React.JSX.Element;
+declare function Option({ disabled: disabledProp, label, selected, startAdornment, endAdornment, value, role, ...otherProps }: OptionProps): React.JSX.Element;
 declare namespace Option {
     var propTypes: {
         disabled: PropTypes.Requireable<boolean>;

package/types/src/RadioBar/RadioBar.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ComponentProps } from '../utils/types';
 import Option from './Option';
+import { ComponentProps } from '../utils/types';
 /** @public */
 type RadioBarChangeHandler = (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement> | React.KeyboardEvent<HTMLElement>, data: {
     label?: string;
@@ -17,7 +17,7 @@ interface RadioBarPropsBase {
      * The default value. Only applicable if this is an uncontrolled component. Otherwise, use
      * the value prop.
      */
-    defaultValue?: any;
+    defaultValue?: string | number | boolean;
     /**
      * The id of the description. When placed in a ControlGroup, this is automatically set to the
      * ControlGroup's help component.
@@ -27,6 +27,11 @@ interface RadioBarPropsBase {
      * A React ref which is set to the DOM element when the component mounts, and null when it unmounts.
      */
     elementRef?: React.Ref<HTMLDivElement>;
+    /**
+     * Disable all options in the RadioBar.
+     * This will override the disabled prop on any individual Option.
+     */
+    disabled?: boolean;
     /**
      * Highlight the field as having an error. The buttons will turn red.
      */
@@ -49,7 +54,7 @@ interface RadioBarPropsBase {
     /**
      * The currently selected value. Only applicable if this is a controlled component.
      */
-    value?: any;
+    value?: string | number | boolean;
 }
 interface RadioBarPropsBaseControlled extends RadioBarPropsBase {
     defaultValue?: never;
@@ -64,13 +69,14 @@ type RadioBarProps = ComponentProps<RadioBarPropsBaseControlled | RadioBarPropsB
 /**
  * RadioBar is a form control that provides the ability to select one option out of a group.
  */
-declare function RadioBar({ children, defaultValue: defaultValueProp, describedBy, elementRef, error, labelledBy, name, onChange, required, role, value: valueProp, ...otherProps }: RadioBarProps): React.JSX.Element;
+declare function RadioBar({ children, defaultValue: defaultValueProp, describedBy, disabled: disabledProp, elementRef, error, labelledBy, name: nameProp, onChange, required, role, value: valueProp, ...otherProps }: RadioBarProps): React.JSX.Element;
 declare namespace RadioBar {
     var Option: typeof import("./Option").default;
     var propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        defaultValue: PropTypes.Requireable<any>;
+        defaultValue: PropTypes.Requireable<NonNullable<string | number | boolean | null | undefined>>;
         describedBy: PropTypes.Requireable<string>;
+        disabled: PropTypes.Requireable<boolean>;
         elementRef: PropTypes.Requireable<object>;
         error: PropTypes.Requireable<boolean>;
         inline: PropTypes.Requireable<boolean>;
@@ -80,8 +86,9 @@ declare namespace RadioBar {
         /** @private. */
         required: PropTypes.Requireable<boolean>;
         role: PropTypes.Requireable<string>;
-        value: PropTypes.Requireable<any>;
+        value: PropTypes.Requireable<NonNullable<string | number | boolean | null | undefined>>;
     };
+    var componentType: string;
 }
 export default RadioBar;
 export { Option, RadioBarChangeHandler };