@splunk/react-ui 5.1.0 → 5.3.0

package/types/src/List/docs/examples/CustomizedList.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Customized list
+ * @description List style type can be customized using CSS.
+ */
 declare function CustomizedList(): React.JSX.Element;
 export default CustomizedList;

package/types/src/List/docs/examples/OrderedList.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Ordered list
+ * @description Ordered Lists use numerals by default.
+ */
 declare function Ordered(): React.JSX.Element;
 export default Ordered;

package/types/src/List/docs/examples/UnorderedList.d.ts

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

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

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Basic
+ * @description Most Markdown elements and capabilities are supported. HTML is not permitted.
+ */
 declare function BasicExample(): React.JSX.Element;
 export default BasicExample;

package/types/src/Markdown/docs/examples/I18n.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name I18n
+ * @description Combine with gettext interpolation.
+ */
 declare function I18nExample(): React.JSX.Element;
 export default I18nExample;

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

@@ -74,20 +74,25 @@ interface ItemPropsBase {
      */
     role?: 'menuitem' | 'menuitemradio' | 'menuitemcheckbox' | 'listboxitem' | 'option';
     /**
-     * If selectable is true, whitespace is left where the checkmark can be shown.
+     * Enables selection for this item and reserves space for the control.
+     * Required when using `selected` or `selectableAppearance`.
      */
     selectable?: boolean;
     /**
-     * If selectable is true, whitespace is left where the checkmark can be shown.
+     * Specifies the type of selection control to display when `selectable` is enabled.
      */
     selectableAppearance?: 'checkmark' | 'checkbox';
     /**
-     * Indicates the selection state of the item.
-     * - With `selectableAppearance='checkmark'`: if `selected` is `true`, a checkmark shows the item is selected.
-     * - With `selectableAppearance='checkbox'`:
-     *   - `selected=true` renders a fully checked checkbox.
-     *   - `selected='some'` renders a partially checked (indeterminate) checkbox, corresponding to `aria-checked='mixed'`.
-     *   - `selected=false` renders an unchecked checkbox.
+     * Controls the selection state of the item.
+     * The selection control (checkmark or checkbox) is only rendered when `selectable` is enabled.
+     *
+     * When `selectableAppearance = 'checkmark'`:
+     * - `true` shows a checkmark.
+     *
+     * When `selectableAppearance = 'checkbox'`:
+     * - `true` renders a checked box.
+     * - `'some'` renders an indeterminate box (`aria-checked="mixed"`).
+     * - `false` renders an unchecked box.
      */
     selected?: boolean | 'some';
     /** Adornment in front of the label. */
@@ -101,8 +106,20 @@ interface ItemPropsBase {
      */
     truncate?: boolean;
 }
-type ItemButtonProps = ComponentProps<ItemPropsBase, 'button'>;
-type ItemLinkProps = ComponentProps<ItemPropsBase, 'a', 'href'>;
+type SharedItemProps = Omit<ItemPropsBase, 'selectable' | 'selectableAppearance' | 'selected'>;
+interface NonSelectableItemProps extends SharedItemProps {
+    selectable?: false;
+    selectableAppearance?: never;
+    selected?: never;
+}
+interface SelectableItemProps extends SharedItemProps {
+    selectable: true;
+    selectableAppearance?: 'checkmark' | 'checkbox';
+    selected?: boolean | 'some';
+}
+type ItemPropsCommon = NonSelectableItemProps | SelectableItemProps;
+type ItemButtonProps = ComponentProps<ItemPropsCommon, 'button'>;
+type ItemLinkProps = ComponentProps<ItemPropsCommon, 'a', 'href'>;
 type ItemProps = ItemButtonProps | ItemLinkProps;
 declare function Item({ active, children, description, descriptionPosition, disabled, endAdornment, elementRef, hasSubmenu, itemKey, matchRanges, onClick, onFocus, openInNewContext, role, selectable, selectableAppearance, selected, startAdornment, to, truncate, ...otherProps }: ItemProps): React.JSX.Element;
 declare namespace Item {

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

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Adornments
+ * @description A startAdornment and/or endAdornment can be added to a Menu.Item. Adornments should be decorative.
+ */
 declare function Adornments(): React.JSX.Element;
 export default Adornments;

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

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Complex
+ * @description All the options can be used together. Additional props, such as hasSubmenu, are detailed in the following example.
+ */
 declare function Complex(): React.JSX.Element;
 export default Complex;

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

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Descriptions
+ * @description Descriptions can be placed below or to the right of the label. Defaults to descriptionPosition="bottom".
+ */
 declare function Descriptions(): React.JSX.Element;
 export default Descriptions;

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

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Dimmed
+ * @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,3 +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/Menu/docs/examples/Dividers.d.ts

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

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

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Headings
+ * @description Menus can have headings to summarize the following items.
+ */
 declare function Headings(): React.JSX.Element;
 export default Headings;

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

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Links
+ * @description Menu.Items can contain links by including a to attribute.
+ */
 declare function Links(): React.JSX.Element;
 export default Links;

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

@@ -9,6 +9,8 @@ interface CompactPropsBase {
      * Allow the user to add arbitrary values.
      */
     allowNewValues?: boolean;
+    /** Append removes rounded borders and the border from the right side. */
+    append?: boolean;
     /**
      * `children` should be `Multiselect.Option`, `Multiselect.Heading`, or
      * `Multiselect.Divider`.
@@ -119,6 +121,8 @@ interface CompactPropsBase {
      * If 'value' is undefined or don't match an item, the Button will display this text.
      */
     placeholder?: string;
+    /** Prepend removes rounded borders from the left side. */
+    prepend?: boolean;
     /**
      * See `repositionMode` on `Popover` for details.
      */
@@ -129,7 +133,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.
      */
@@ -151,11 +155,12 @@ interface CompactPropsBase {
     toggle?: SelectBaseProps['toggle'];
 }
 type CompactProps = ComponentProps<CompactPropsBase, 'button'>;
-declare function Compact({ allowNewValues, animateLoading, children, controlledFilter, defaultPlacement, defaultValues, describedBy, disabled, elementRef, error, filter, footerMessage, inline, inputId, inputRef, isLoadingOptions, labelledBy, loadingMessage, menuStyle, name, noOptionsMessage, onChange, onClose, onFilterChange, onOpen, onScroll, onScrollBottom, placeholder, repositionMode, selectAllAppearance, showSelectedValuesFirst, tabConfirmsNewValue, values, virtualization, ...otherProps }: CompactProps): React.JSX.Element;
+declare function Compact({ allowNewValues, animateLoading, append, children, controlledFilter, defaultPlacement, defaultValues, describedBy, disabled, elementRef, error, filter, footerMessage, inline, inputId, inputRef, isLoadingOptions, labelledBy, loadingMessage, menuStyle, name, noOptionsMessage, onChange, onClose, onFilterChange, onOpen, onScroll, onScrollBottom, placeholder, prepend, repositionMode, selectAllAppearance, showSelectedValuesFirst, tabConfirmsNewValue, values, virtualization, ...otherProps }: CompactProps): React.JSX.Element;
 declare namespace Compact {
     var propTypes: {
         allowNewValues: PropTypes.Requireable<boolean>;
         animateLoading: PropTypes.Requireable<boolean>;
+        append: PropTypes.Requireable<boolean>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         controlledFilter: PropTypes.Requireable<boolean>;
         defaultPlacement: PropTypes.Requireable<string>;
@@ -182,6 +187,7 @@ declare namespace Compact {
         onScroll: PropTypes.Requireable<(...args: any[]) => any>;
         onScrollBottom: PropTypes.Requireable<(...args: any[]) => any>;
         placeholder: PropTypes.Requireable<string>;
+        prepend: PropTypes.Requireable<boolean>;
         repositionMode: PropTypes.Requireable<string>;
         selectAllAppearance: PropTypes.Requireable<string>;
         showSelectedValuesFirst: PropTypes.Requireable<string>;

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

@@ -23,6 +23,8 @@ interface MultiselectPropsBase {
      */
     allowNewValues?: boolean;
     animateLoading?: boolean;
+    /** Append removes rounded borders and the border from the right side. */
+    append?: boolean;
     /**
      * When compact, options are shown as checkboxes and the input is a single line. This is
      * useful when placing the Multiselect in a horizontal bar, such as a filter.
@@ -143,6 +145,8 @@ interface MultiselectPropsBase {
      * If 'value' is undefined or doesn't match an item, the Button will display this text.
      */
     placeholder?: string;
+    /** Prepend removes rounded borders from the left side. */
+    prepend?: boolean;
     /**
      * See `repositionMode` on `Popover` for details.
      */
@@ -154,7 +158,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.
      */
@@ -198,7 +202,7 @@ interface MultiselectPropsBaseCompact extends MultiselectPropsBase {
 type MultiselectNormalProps = ComponentProps<(MultiselectPropsBaseControlled | MultiselectPropsBaseUncontrolled) & MultiselectPropsBaseNormal, 'div'>;
 type MultiselectCompactProps = ComponentProps<(MultiselectPropsBaseControlled | MultiselectPropsBaseUncontrolled) & MultiselectPropsBaseCompact, 'button'>;
 type MultiselectProps = MultiselectNormalProps | MultiselectCompactProps;
-declare function Multiselect({ allowNewValues, animateLoading, compact, children, controlledFilter, defaultPlacement, defaultValues, describedBy, disabled, elementRef, error, filter, footerMessage, inline, inputId, inputRef, isLoadingOptions, labelledBy, loadingMessage, menuStyle, name, noOptionsMessage, onChange, onClose, onFilterChange, onOpen, onScroll, onScrollBottom, placeholder, repositionMode, selectAllAppearance, showSelectedValuesFirst, tabConfirmsNewValue, values, virtualization, ...otherProps }: MultiselectProps): React.JSX.Element;
+declare function Multiselect({ allowNewValues, animateLoading, append, compact, children, controlledFilter, defaultPlacement, defaultValues, describedBy, disabled, elementRef, error, filter, footerMessage, inline, inputId, inputRef, isLoadingOptions, labelledBy, loadingMessage, menuStyle, name, noOptionsMessage, onChange, onClose, onFilterChange, onOpen, onScroll, onScrollBottom, placeholder, prepend, repositionMode, selectAllAppearance, showSelectedValuesFirst, tabConfirmsNewValue, values, virtualization, ...otherProps }: MultiselectProps): React.JSX.Element;
 declare namespace Multiselect {
     var componentType: string;
     var Option: typeof import("./Option").default;
@@ -207,6 +211,7 @@ declare namespace Multiselect {
     var propTypes: {
         allowNewValues: PropTypes.Requireable<boolean>;
         animateLoading: PropTypes.Requireable<boolean>;
+        append: PropTypes.Requireable<boolean>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         compact: PropTypes.Requireable<boolean>;
         controlledFilter: PropTypes.Requireable<boolean>;
@@ -234,6 +239,7 @@ declare namespace Multiselect {
         onScroll: PropTypes.Requireable<(...args: any[]) => any>;
         onScrollBottom: PropTypes.Requireable<(...args: any[]) => any>;
         placeholder: PropTypes.Requireable<string>;
+        prepend: PropTypes.Requireable<boolean>;
         repositionMode: PropTypes.Requireable<string>;
         selectAllAppearance: PropTypes.Requireable<string>;
         showSelectedValuesFirst: PropTypes.Requireable<string>;

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

@@ -8,6 +8,8 @@ interface NormalPropsBase {
      */
     allowNewValues?: boolean;
     animateLoading?: boolean;
+    /** Append removes rounded borders and the border from the right side. */
+    append?: boolean;
     /**
      * `children` should be `Multiselect.Option`, `Multiselect.Heading`, or
      * `Multiselect.Divider`.
@@ -107,6 +109,8 @@ interface NormalPropsBase {
      * If 'value' is undefined or don't match an item, the Button will display this text.
      */
     placeholder?: string;
+    /** Prepend removes rounded borders from the left side. */
+    prepend?: boolean;
     /** @private. */
     required?: boolean;
     /**
@@ -123,11 +127,12 @@ interface NormalPropsBase {
 }
 export declare const getInlineMenuStyle: (({ anchorWidth, maxHeight, menuStyle }: any) => any) & import("lodash").MemoizedFunction;
 type NormalProps = ComponentProps<NormalPropsBase, 'div'>;
-declare function Normal({ allowNewValues, animateLoading, children, controlledFilter, defaultPlacement, defaultValues, describedBy, disabled, elementRef, error, footerMessage, inline, inputId, inputRef: inputRefProp, isLoadingOptions, labelledBy, loadingMessage, menuStyle, name, noOptionsMessage, onChange, onClose, onFilterChange, onScroll, onScrollBottom, onOpen, placeholder, required, repositionMode, tabConfirmsNewValue, values, ...otherProps }: NormalProps): React.JSX.Element;
+declare function Normal({ allowNewValues, animateLoading, append, children, controlledFilter, defaultPlacement, defaultValues, describedBy, disabled, elementRef, error, footerMessage, inline, inputId, inputRef: inputRefProp, isLoadingOptions, labelledBy, loadingMessage, menuStyle, name, noOptionsMessage, onChange, onClose, onFilterChange, onScroll, onScrollBottom, onOpen, placeholder, prepend, required, repositionMode, tabConfirmsNewValue, values, ...otherProps }: NormalProps): React.JSX.Element;
 declare namespace Normal {
     var propTypes: {
         allowNewValues: PropTypes.Requireable<boolean>;
         animateLoading: PropTypes.Requireable<boolean>;
+        append: PropTypes.Requireable<boolean>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         controlledFilter: PropTypes.Requireable<boolean>;
         defaultPlacement: PropTypes.Requireable<string>;
@@ -153,6 +158,7 @@ declare namespace Normal {
         onScroll: PropTypes.Requireable<(...args: any[]) => any>;
         onScrollBottom: PropTypes.Requireable<(...args: any[]) => any>;
         placeholder: PropTypes.Requireable<string>;
+        prepend: PropTypes.Requireable<boolean>;
         /** @private. */
         required: PropTypes.Requireable<boolean>;
         repositionMode: PropTypes.Requireable<string>;

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;