@splunk/react-ui 5.4.0 → 5.6.0

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ComponentProps } from '../utils/types';
+interface AnchorMenuItemPropsBase {
+    /**
+     * Content to render inside the anchor link menu item.
+     */
+    children?: React.ReactNode;
+    /**
+     * A React ref which is set to the DOM element when the component mounts and null when it unmounts.
+     */
+    elementRef?: React.Ref<HTMLLIElement>;
+    /**
+     * A unique id for the item, used with the `AnchorMenu's` activeItemId prop.
+     * If not set, defaults to the `to` prop if present.
+     */
+    itemId?: string;
+    label?: string;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;
+    to?: string;
+}
+type AnchorMenuItemProps = ComponentProps<AnchorMenuItemPropsBase, 'li'>;
+declare function Item({ children, elementRef, itemId: itemIdProp, label, onClick, to, ...otherProps }: AnchorMenuItemProps): React.JSX.Element;
+declare namespace Item {
+    var propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        elementRef: PropTypes.Requireable<object>;
+        itemId: PropTypes.Requireable<string>;
+        label: PropTypes.Requireable<string>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        to: PropTypes.Requireable<string>;
+    };
+}
+export type { AnchorMenuItemProps, AnchorMenuItemPropsBase };
+export default Item;

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

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

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

@@ -0,0 +1,3 @@
+export { default } from './AnchorMenu';
+export * from './AnchorMenu';
+export * from './Item';

package/types/src/Badge/Badge.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { AnyTheme, Interpolation, OptionalThemedProps } from '@splunk/themes';
+import { ComponentProps } from '../utils/types';
+interface BadgePropsBase {
+    /** Changes the background color. Accepts `@splunk/themes` variable or any valid `color` value. */
+    backgroundColor?: React.CSSProperties['color'] | Interpolation<AnyTheme, OptionalThemedProps<AnyTheme>>;
+    children?: never;
+    /** A React ref which is set to the DOM element when the component mounts and null when it unmounts. */
+    elementRef?: React.Ref<HTMLSpanElement>;
+    /** The content of the badge. */
+    label: string;
+    /** Icon before the label. */
+    icon?: React.ReactNode;
+    /** Changes the text and icon color. Accepts `@splunk/themes` variable or any valid `color` value. */
+    foregroundColor?: React.CSSProperties['color'] | Interpolation<AnyTheme, OptionalThemedProps<AnyTheme>>;
+}
+type BadgeProps = ComponentProps<BadgePropsBase, 'span'>;
+declare function Badge({ backgroundColor, elementRef, label, icon, foregroundColor, ...otherProps }: BadgeProps): React.JSX.Element;
+declare namespace Badge {
+    var propTypes: {
+        backgroundColor: PropTypes.Requireable<NonNullable<string | ((...args: any[]) => any) | null | undefined>>;
+        elementRef: PropTypes.Requireable<object>;
+        label: PropTypes.Validator<string>;
+        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        foregroundColor: PropTypes.Requireable<NonNullable<string | ((...args: any[]) => any) | null | undefined>>;
+    };
+}
+export default Badge;

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

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

package/types/src/Badge/docs/examples/Count.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * @name Count
+ * @description To set a max count, use the `truncateNumber` util from [@splunk/ui-utils](../ui-utils/Format).
+ */
+export default function Count(): React.JSX.Element;

package/types/src/Badge/docs/examples/CustomColors.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+/**
+ * @name Custom colors
+ * @description The background and text of Badge can be customized with the `backgroundColor` and `foregroundColor` props. Prefer using variables from `@splunk/themes`, but other valid CSS color values are supported.
+ *
+ * In all cases, you must check that the chosen colors meet [contrast minimum for text of 4.5:1](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html#user%20interface%20component).
+ */
+export default function CustomColors(): React.JSX.Element;

package/types/src/Badge/docs/examples/Icon.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * @name With icon
+ * @description Use the `icon` prop with an icon component (e.g., `@splunk/react-icons`) to add visual context or emphasis alongside the badge's `label`. When using an icon, a label must also be provided.
+ */
+export default function Icon(): React.JSX.Element;

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

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

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

@@ -1,7 +1,7 @@
 import React from 'react';
 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';
+type CodeSupportedLanguages = 'bash' | 'c' | 'clike' | 'cpp' | 'cs' | 'csharp' | 'css' | 'html' | 'javascript' | 'js' | 'json' | 'jsx' | 'markup' | 'mathml' | 'plain' | 'plaintext' | 'powershell' | 'py' | 'python' | 'sh' | 'shell' | 'splunk-spl' | 'sql' | 'svg' | 'text' | 'ts' | 'tsx' | 'txt' | 'typescript' | 'xml' | 'yaml' | 'yml';
 interface CodePropsBase {
     /** Change the style of the Code container. */
     containerAppearance?: 'none' | 'section';
@@ -51,8 +51,8 @@ declare namespace Code {
         containerAppearance: PropTypes.Requireable<string>;
         elementRef: PropTypes.Requireable<object>;
         indentChars: PropTypes.Requireable<number>;
-        language: PropTypes.Requireable<string>;
-        languageFallback: PropTypes.Requireable<string>;
+        language: PropTypes.Requireable<CodeSupportedLanguages>;
+        languageFallback: PropTypes.Requireable<CodeSupportedLanguages>;
         lineHighlights: PropTypes.Requireable<string>;
         lineNumberStart: PropTypes.Requireable<number>;
         showIndentGuide: PropTypes.Requireable<boolean>;
@@ -61,3 +61,4 @@ declare namespace Code {
     };
 }
 export default Code;
+export type { CodeSupportedLanguages };

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

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

package/types/src/Link/Link.d.ts

@@ -10,6 +10,10 @@ interface LinkPropsBase {
      * Adds an aria-disabled attribute and prevents clicking.
      */
     disabled?: boolean;
+    /**
+     * @private
+     */
+    enableVisitedStyling?: boolean;
     /**
      * A React ref which is set to the DOM element when the component mounts and null when it unmounts.
      */

package/types/src/Link/LinkContext.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface LinkProviderProps {
+    enableVisitedStyling?: boolean;
+    children: React.ReactNode;
+}
+type LinkContextValue = {
+    enableVisitedStyling: boolean;
+};
+declare const LinkContext: React.Context<LinkContextValue>;
+/**
+ * Control behavior for all children Link components.
+ */
+declare const LinkProvider: ({ enableVisitedStyling, children, }: LinkProviderProps) => React.ReactElement;
+export { LinkContext, LinkProvider, LinkContextValue, LinkProviderProps };

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

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * @name Visited
+ * @description Enable visited link styling using the LinkProvider.
+ */
+declare const Visited: () => React.JSX.Element;
+export default Visited;

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

@@ -1,2 +1,3 @@
 export { default } from './Link';
 export * from './Link';
+export * from './LinkContext';

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

@@ -72,7 +72,7 @@ interface ItemPropsBase {
      * `selectableAppearance` of 'checkbox' defaults to `menuitemcheckbox`. Otherwise, the role defaults
      * to `menuitem`.
      */
-    role?: 'menuitem' | 'menuitemradio' | 'menuitemcheckbox' | 'listboxitem' | 'option';
+    role?: 'menuitem' | 'menuitemradio' | 'menuitemcheckbox' | 'listboxitem' | 'link' | 'option';
     /**
      * Enables selection for this item and reserves space for the control.
      * Required when using `selected` or `selectableAppearance`.

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { MultiselectChangeHandler, MultiselectFilterChangeHandler, MultiselectScrollBottomHandler } from '@splunk/react-ui/Multiselect';
-import { SelectBaseProps } from '../Select/SelectBase';
+import { SelectBaseProps } from '@splunk/react-ui/SelectBase';
 import { ComponentProps } from '../utils/types';
 interface CompactPropsBase {
     animateLoading?: boolean;
@@ -74,6 +74,11 @@ interface CompactPropsBase {
     /**
      * The loading message to show when isLoadingOptions. */
     loadingMessage?: React.ReactNode;
+    /**
+     * @private
+     * Escape hatch override of the maximum number of values before the toggle label will truncate to `X items selected`
+     */
+    maxLabelItems?: number;
     /**
      * Style properties to apply to the Menu. */
     menuStyle?: React.CSSProperties;
@@ -177,6 +182,8 @@ declare namespace Compact {
         isLoadingOptions: PropTypes.Requireable<boolean>;
         labelledBy: PropTypes.Requireable<string>;
         loadingMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /** @private. */
+        maxLabelItems: PropTypes.Requireable<number>;
         menuStyle: PropTypes.Requireable<object>;
         name: PropTypes.Requireable<string>;
         noOptionsMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Heading, Divider } from '@splunk/react-ui/Menu';
-import { SelectBaseChangeReason } from '@splunk/react-ui/Select/SelectBase';
+import { SelectBaseChangeReason } from '@splunk/react-ui/SelectBase';
 import { CompactPropsBase } from './Compact';
 import Option from './Option';
 import { ComponentProps } from '../utils/types';
@@ -95,6 +95,11 @@ interface MultiselectPropsBase {
     /**
      * The loading message to show when isLoadingOptions. */
     loadingMessage?: React.ReactNode;
+    /**
+     * @private
+     * Escape hatch override of the maximum number of values before the toggle label will truncate to `X items selected`
+     */
+    maxLabelItems?: number;
     /**
      * Style properties to apply to the Menu. This is primarily used to override the width of
      * the menu should it need to be wider than the toggle Button. */
@@ -229,6 +234,8 @@ declare namespace Multiselect {
         isLoadingOptions: PropTypes.Requireable<boolean>;
         labelledBy: PropTypes.Requireable<string>;
         loadingMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /** @private. */
+        maxLabelItems: PropTypes.Requireable<number>;
         menuStyle: PropTypes.Requireable<object>;
         name: PropTypes.Requireable<string>;
         noOptionsMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;

package/types/src/PhoneNumber/PhoneNumber.d.ts

@@ -0,0 +1,139 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ComponentProps } from '../utils/types';
+/** @public */
+type PhoneNumberChangeHandler = (event: React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement | HTMLSpanElement>, data: {
+    name?: string;
+    value: string;
+    displayValue: string;
+    country?: string;
+    isPossibleNumber: boolean;
+    isValidNumber: boolean;
+    internationalFormat: string;
+}) => void;
+/** @public */
+type PhoneNumberBlurHandler = (event: React.FocusEvent<HTMLInputElement>, data: {
+    name?: string;
+    value: string;
+    displayValue: string;
+    country?: string;
+    isPossibleNumber: boolean;
+    isValidNumber: boolean;
+    internationalFormat: string;
+}) => void;
+/** @public */
+type PhoneNumberFocusHandler = (event: React.FocusEvent<HTMLInputElement>, data: {
+    name?: string;
+    value: string;
+    displayValue: string;
+    country?: string;
+    isPossibleNumber: boolean;
+    isValidNumber: boolean;
+    internationalFormat: string;
+}) => void;
+interface PhoneNumberPropsBase {
+    /** Append removes rounded corners and the border from the right side. */
+    append?: boolean;
+    /** Include an "X" button to clear the value. */
+    canClear?: boolean;
+    /** The iso2 country code to use for the phone number input. */
+    defaultCountry?: string;
+    /** Set this property instead of value to make the value uncontrolled.  */
+    defaultValue?: string;
+    /**
+     * The id of the description. When placed in a ControlGroup, this is automatically set to the
+     * ControlGroup's help component.
+     */
+    describedBy?: string;
+    /** Determines whether or not the input is disabled. */
+    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>;
+    /** Highlight the field as having an error. */
+    error?: boolean;
+    /** When true, displays inline with a default width. */
+    inline?: boolean;
+    /** An id for the text input. */
+    inputId?: string;
+    /**
+     * A React ref which is set to the text 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;
+    name?: string;
+    /** A callback for when the input loses focus. */
+    onBlur?: PhoneNumberBlurHandler;
+    /**
+     * Called whenever the value changes.
+     * If the value prop is set, this callback is required.
+     */
+    onChange?: PhoneNumberChangeHandler;
+    /** A callback for when the input is clicked. */
+    onClick?: React.MouseEventHandler<HTMLInputElement>;
+    /** A callback for when the input takes focus. */
+    onFocus?: PhoneNumberFocusHandler;
+    /** A callback for when the user selects text. */
+    onSelect?: React.ReactEventHandler<HTMLInputElement>;
+    /** Prepend removes rounded borders from the left side. */
+    prepend?: boolean;
+    /**
+     * @private
+     * Do not format the number as the user types.
+     */
+    skipFormatting?: boolean;
+    /**
+     * A React ref which is set to the dropdown toggle when the component mounts and null when it unmounts.
+     */
+    toggleRef?: React.Ref<HTMLButtonElement>;
+    /**
+     * The contents of the input. Setting this value makes the input controlled. A callback is required.
+     */
+    value?: string;
+}
+interface PhoneNumberPropsBaseControlled extends PhoneNumberPropsBase {
+    defaultValue?: never;
+    onChange: PhoneNumberChangeHandler;
+    value?: string;
+}
+interface PhoneNumberPropsBaseUncontrolled extends PhoneNumberPropsBase {
+    defaultValue?: string;
+    value?: never;
+}
+type PhoneNumberProps = ComponentProps<PhoneNumberPropsBaseControlled | PhoneNumberPropsBaseUncontrolled, 'div'>;
+declare function PhoneNumber({ append, canClear, defaultCountry, defaultValue, describedBy, disabled, elementRef, error, inline, inputRef, name, onBlur, onChange, onFocus, prepend, skipFormatting, toggleRef, value, ...otherProps }: PhoneNumberProps): React.JSX.Element;
+declare namespace PhoneNumber {
+    var componentType: string;
+    var propTypes: {
+        append: PropTypes.Requireable<boolean>;
+        canClear: PropTypes.Requireable<boolean>;
+        defaultCountry: PropTypes.Requireable<string>;
+        defaultValue: PropTypes.Requireable<string>;
+        describedBy: PropTypes.Requireable<string>;
+        disabled: PropTypes.Requireable<boolean>;
+        elementRef: PropTypes.Requireable<object>;
+        error: PropTypes.Requireable<boolean>;
+        inline: PropTypes.Requireable<boolean>;
+        inputId: PropTypes.Requireable<string>;
+        inputRef: PropTypes.Requireable<object>;
+        labelledBy: PropTypes.Requireable<string>;
+        name: PropTypes.Requireable<string>;
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
+        prepend: PropTypes.Requireable<boolean>;
+        /** @private */
+        skipFormatting: PropTypes.Requireable<boolean>;
+        value: PropTypes.Requireable<string>;
+    };
+}
+export default PhoneNumber;
+export { PhoneNumberBlurHandler, PhoneNumberChangeHandler, PhoneNumberFocusHandler };
+export type { PhoneNumberProps, PhoneNumberPropsBase, PhoneNumberPropsBaseControlled, PhoneNumberPropsBaseUncontrolled, };

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

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * @name Controlled
+ * @description Phone Number requires a `value` prop and an `onChange` callback to update the value prop for most use cases.
+ */
+declare const Controlled: () => React.JSX.Element;
+export default Controlled;

package/types/src/PhoneNumber/docs/examples/DefaultCountry.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * @name Default Country
+ * @description Phone Number can have a different default country set.
+ */
+declare const DefaultCountry: () => React.JSX.Element;
+export default DefaultCountry;

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

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

package/types/src/PhoneNumber/docs/examples/Inline.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * @name Inline
+ * @description The `inline` prop will render the component inline at a consistent width with other inputs.
+ */
+declare const Inline: () => React.JSX.Element;
+export default Inline;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * @name Uncontrolled
+ * @description Alternatively, Phone 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/PhoneNumber/index.d.ts

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

package/types/src/PhoneNumber/utils.d.ts

@@ -0,0 +1,47 @@
+type IntlTelInputUtils = typeof import('intl-tel-input/intlTelInputWithUtils').default.utils;
+type CountryData = {
+    areaCodes: string[] | null;
+    countryName: string;
+    dialCode: string;
+    flag: string;
+    iso2: string;
+    iso2Upper: string;
+    nationalPrefix: string | null;
+    priority?: number;
+};
+declare const PHONE_NUMBER_INVALID_CHAR_REGEX: RegExp;
+declare const UNKNOWN_FLAG = "\uD83C\uDF10";
+declare const loadUtils: () => Promise<{
+    formatNumber(number: string, iso2: string | undefined, format?: number): string;
+    formatNumberAsYouType(number: string, iso2: string | undefined): string;
+    getCoreNumber(number: string, iso2: string | undefined): string;
+    getExampleNumber(iso2: string | undefined, nationalMode: boolean, numberType: number, useE164?: boolean): string;
+    getExtension(number: string, iso2: string | undefined): string;
+    getNumberType(number: string, iso2: string | undefined): number;
+    getValidationError(number: string, iso2: string | undefined): number;
+    isPossibleNumber(number: string, iso2: string | undefined, numberType?: ("FIXED_LINE_OR_MOBILE" | "FIXED_LINE" | "MOBILE" | "PAGER" | "PERSONAL_NUMBER" | "PREMIUM_RATE" | "SHARED_COST" | "TOLL_FREE" | "UAN" | "UNKNOWN" | "VOICEMAIL" | "VOIP")[] | null): boolean;
+    isValidNumber(number: string, iso2: string | undefined, numberType?: ("FIXED_LINE_OR_MOBILE" | "FIXED_LINE" | "MOBILE" | "PAGER" | "PERSONAL_NUMBER" | "PREMIUM_RATE" | "SHARED_COST" | "TOLL_FREE" | "UAN" | "UNKNOWN" | "VOICEMAIL" | "VOIP")[] | null): boolean;
+    numberFormat: {
+        NATIONAL: number;
+        INTERNATIONAL: number;
+        E164: number;
+        RFC3966: number;
+    };
+    numberType: object;
+} | null | undefined>;
+declare const getCountryFlag: (countryCode: string) => string;
+declare const getCountries: () => CountryData[];
+/**
+ * Main function to process phone input using intl-tel-input utilities
+ */
+declare const processPhoneInput: (utils: IntlTelInputUtils | null, inputValue: string, country?: string, countries?: CountryData[]) => {
+    displayValue: string;
+    value: string;
+    internationalFormat: string;
+    country: string;
+    isPossibleNumber: boolean;
+    isValidNumber: boolean;
+};
+declare const replaceDialCode: (inputValue: string, previousCountry: string, newCountry: string, countries: CountryData[]) => string;
+export { getCountries, getCountryFlag, loadUtils, processPhoneInput, replaceDialCode, PHONE_NUMBER_INVALID_CHAR_REGEX, UNKNOWN_FLAG, };
+export type { IntlTelInputUtils };

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

@@ -4,6 +4,10 @@ import { RadioListChangeHandler, RadioListValueTypes } from '@splunk/react-ui/Ra
 import { ComponentProps } from '../utils/types';
 interface OptionPropsBase {
     children?: React.ReactNode;
+    /**
+     * Additional information to explain the option.
+     */
+    description?: string;
     disabled?: boolean;
     error?: boolean;
     id?: string;
@@ -14,10 +18,11 @@ interface OptionPropsBase {
     value: RadioListValueTypes;
 }
 type OptionProps = ComponentProps<OptionPropsBase, 'div'>;
-declare function Option({ children, disabled: disabledProp, error: errorProp, id: idProp, onChange, value, ...otherProps }: OptionProps): React.JSX.Element;
+declare function Option({ children, description, disabled: disabledProp, error: errorProp, id: idProp, onChange, value, ...otherProps }: OptionProps): React.JSX.Element;
 declare namespace Option {
     var propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        description: PropTypes.Requireable<string>;
         disabled: PropTypes.Requireable<boolean>;
         error: PropTypes.Requireable<boolean>;
         id: PropTypes.Requireable<string>;

package/types/src/RadioList/docs/examples/Description.d.ts

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

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

@@ -1,6 +1,6 @@
 import React from 'react';
+import { OptionClickHandler as OptionBaseClickHandler } from '@splunk/react-ui/SelectBase';
 import { ComponentProps } from '../utils/types';
-import type { OptionClickHandler } from './OptionBase';
 interface OptionPropsBase {
     /** @private */
     active?: boolean;
@@ -26,6 +26,11 @@ interface OptionPropsBase {
      * A React ref which is set to the DOM element when the component mounts, and null when it unmounts.
      */
     elementRef?: React.Ref<HTMLAnchorElement | HTMLButtonElement>;
+    /**
+     * Allow the endAdornment to be passed to the underlying Menu.Item.
+     * @private
+     */
+    endAdornment?: React.ReactNode;
     /**
      * Adding hidden options can be useful for resolving the selected display label and icon,
      * when the option should not be in the list. This scenario can arise when Select's filter is
@@ -55,7 +60,7 @@ interface OptionPropsBase {
         end: number;
     }[];
     /** @private */
-    onClick?: OptionClickHandler;
+    onClick?: OptionBaseClickHandler;
     /** @private */
     role?: 'menuitemcheckbox' | 'option';
     /** @private */
@@ -76,4 +81,4 @@ type OptionProps = ComponentProps<OptionPropsBase, 'button'>;
 declare function Option({ children, descriptionPosition, elementRef, label, ...otherProps }: OptionProps): React.JSX.Element;
 declare const OptionMemoized: React.MemoExoticComponent<typeof Option>;
 export default OptionMemoized;
-export type { OptionClickHandler, OptionPropsBase };
+export type { OptionBaseClickHandler, OptionPropsBase };

package/types/src/Select/Select.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Divider as BaseDivider, Heading as BaseHeading, SelectBaseProps } from '@splunk/react-ui/SelectBase';
 import Option from './Option';
-import { Divider as BaseDivider, Heading as BaseHeading, SelectBaseProps } from './SelectBase';
 import { ComponentProps } from '../utils/types';
 /** @public */
 type SelectChangeHandler = (event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLInputElement>, data: {

package/types/src/{Select → SelectBase}/OptionBase.d.ts

@@ -30,6 +30,11 @@ interface OptionPropsBase {
      * A React ref which is set to the DOM element when the component mounts, and null when it unmounts.
      */
     elementRef?: React.Ref<HTMLAnchorElement | HTMLButtonElement>;
+    /**
+     * Allow the endAdornment to be passed to the underlying Menu.Item.
+     * @private
+     */
+    endAdornment?: React.ReactNode;
     /**
      * Adding hidden options can be useful for resolving the selected display label and icon,
      * when the option should not be in the list. This scenario can arise when Select's filter is
@@ -81,7 +86,7 @@ type OptionProps = ComponentProps<OptionPropsBase, 'button'>;
 /**
  * An option within a `Multiselect`.
  */
-declare function Option({ children, descriptionPosition, disabled, elementRef, icon, label, multiple, onClick, role, value, ...otherProps }: OptionProps): React.JSX.Element;
+declare function Option({ children, descriptionPosition, disabled, elementRef, endAdornment, icon, label, multiple, onClick, role, value, ...otherProps }: OptionProps): React.JSX.Element;
 declare namespace Option {
     var propTypes: {
         /** @private */
@@ -91,6 +96,7 @@ declare namespace Option {
         descriptionPosition: PropTypes.Requireable<string>;
         disabled: PropTypes.Requireable<boolean>;
         elementRef: PropTypes.Requireable<object>;
+        endAdornment: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         hidden: PropTypes.Requireable<boolean>;
         icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         label: PropTypes.Validator<string>;
@@ -114,4 +120,4 @@ declare namespace Option {
     var type: typeof Item;
 }
 export default Option;
-export { OptionClickHandler };
+export type { OptionClickHandler };