@splunk/react-ui 5.4.0 → 5.5.0

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/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;

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';

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 };

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

@@ -3,7 +3,9 @@ import PropTypes from 'prop-types';
 import { Divider, Heading } from '@splunk/react-ui/Menu';
 import { TextBlurHandler, TextChangeHandler, TextFocusHandler } from '@splunk/react-ui/Text';
 import Option from './OptionBase';
+import SelectAllOption from './SelectAllOption';
 import { ComponentProps } from '../utils/types';
+import type { OptionClickHandler } from './OptionBase';
 type SelectBaseFilterChangeHandler = (event: React.ChangeEvent<HTMLInputElement> | React.FocusEvent<HTMLInputElement> | React.MouseEvent<HTMLSpanElement> | React.KeyboardEvent, data: {
     keyword: string;
 }) => void;
@@ -286,4 +288,4 @@ declare namespace SelectBase {
     var Heading: typeof import("@splunk/react-ui/Menu").Heading;
 }
 export default SelectBase;
-export { Controls, ChildrenElement, Divider, Heading, Option, SelectBaseChangeHandler, SelectBaseChangeReason, SelectBaseFilterChangeHandler, SelectBaseProps, isOption, };
+export { Controls, ChildrenElement, Divider, Heading, Option, SelectAllOption, OptionClickHandler, SelectBaseChangeHandler, SelectBaseChangeReason, SelectBaseFilterChangeHandler, SelectBaseProps, isOption, };

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

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

package/types/src/Switch/Switch.d.ts

@@ -57,10 +57,12 @@ interface SwitchPropsBase {
      */
     selected?: boolean | 'some';
     /**
+     * @deprecated This prop is deprecated and will be removed in the next major version.
      * The customized content presented to screen readers when selected.
      */
     selectedLabel?: string;
     /**
+     * @deprecated This prop is deprecated and will be removed in the next major version.
      * The customized content presented to screen readers when selected="some".
      */
     someSelectedLabel?: string;
@@ -69,6 +71,7 @@ interface SwitchPropsBase {
      */
     toggleRef?: React.Ref<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>;
     /**
+     * @deprecated This prop is deprecated and will be removed in the next major version.
      * The customized content presented to screen readers when unselected.
      */
     unselectedLabel?: string;

package/types/src/Table/Body.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { PinnedColumnsProp } from '@splunk/react-ui/Table';
 import { RowRequestMoveRowHandler } from './Row';
 import { ComponentProps } from '../utils/types';
 type BodyRequestMoveRowHandler = RowRequestMoveRowHandler;
@@ -20,13 +21,15 @@ interface BodyPropsBase {
     rowExpansion?: 'single' | 'multi' | 'none' | 'controlled';
     /** @private. Generally passed by Table rather than added directly. */
     onRequestMoveRow?: BodyRequestMoveRowHandler;
+    /** @private. */
+    pinnedColumns?: PinnedColumnsProp;
     /** Indicates the column to use as the primary label for each row.   */
     primaryColumnIndex?: number;
     /** @private. Generally passed by Table rather than added directly. */
     stripeRows?: boolean;
 }
 type BodyProps = ComponentProps<BodyPropsBase, 'tbody'>;
-declare function Body({ actions, children, elementRef, movableColumns, onRequestMoveRow, rowExpansion, primaryColumnIndex, stripeRows, ...otherProps }: BodyProps): React.JSX.Element | null;
+declare function Body({ actions, children, elementRef, pinnedColumns, movableColumns, onRequestMoveRow, rowExpansion, primaryColumnIndex, stripeRows, ...otherProps }: BodyProps): React.JSX.Element | null;
 declare namespace Body {
     var propTypes: {
         /** @private. Generally passed by Table rather than added directly. */
@@ -39,6 +42,8 @@ declare namespace Body {
         rowExpansion: PropTypes.Requireable<string>;
         /** @private. Generally passed by Table rather than added directly. */
         onRequestMoveRow: PropTypes.Requireable<(...args: any[]) => any>;
+        /** @private. */
+        pinnedColumns: PropTypes.Requireable<object>;
         /** @private. Generally passed by Table rather than added directly. */
         primaryColumnIndex: PropTypes.Requireable<number>;
         /** @private. Generally passed by Table rather than added directly. */

package/types/src/Table/Cell.d.ts

@@ -24,6 +24,8 @@ interface CellPropsBase {
      * A React ref which is set to the DOM element when the component mounts and null when it unmounts.
      */
     elementRef?: React.Ref<HTMLTableCellElement>;
+    /** @private. */
+    isPinned?: boolean;
     /**
      * @private
      * Used to style the primary cell when row is clickable
@@ -44,7 +46,7 @@ interface CellPropsBase {
     variant?: 'toggle' | 'expand' | 'drag' | 'actions';
 }
 type CellProps = ComponentProps<CellPropsBase, 'td'>;
-declare function Cell({ align, appearance, appearClickable, children, data, disabled, elementRef, isPrimaryCell, onClick, onKeyDown, stripe, variant, ...otherProps }: CellProps): React.JSX.Element;
+declare function Cell({ align, appearance, appearClickable, children, data, disabled, elementRef, isPinned, isPrimaryCell, onClick, onKeyDown, stripe, variant, ...otherProps }: CellProps): React.JSX.Element;
 declare namespace Cell {
     var propTypes: {
         align: PropTypes.Requireable<string>;
@@ -57,6 +59,8 @@ declare namespace Cell {
         elementRef: PropTypes.Requireable<object>;
         /** @private */
         isPrimaryCell: PropTypes.Requireable<boolean>;
+        /** @private */
+        isPinned: PropTypes.Requireable<boolean>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
         /** @private */
         onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;

package/types/src/Table/Head.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { TableRequestMoveColumnHandler } from '@splunk/react-ui/Table';
+import { PinnedColumnsProp, TableRequestMoveColumnHandler } from '@splunk/react-ui/Table';
 import { ComponentProps } from '../utils/types';
 type HeadAutosizeColumnHandler = (event: React.MouseEvent<HTMLHRElement>, data: {
     columnId?: string;
@@ -42,11 +42,13 @@ interface HeadPropsBase {
     /** @private. */
     onRequestToggleAllRows?: () => void;
     /** @private. */
+    pinnedColumns?: PinnedColumnsProp;
+    /** @private. */
     rowSelection?: 'all' | 'some' | 'none';
 }
 type HeadProps = ComponentProps<HeadPropsBase, 'thead'>;
 declare const getCellWidths: (headEl: HTMLTableSectionElement | null) => number[];
-declare function Head({ actions, actionsColumnWidth, cellMinWidth, children, elementRef, hasDragColumn, hasInfoColumn, onAutosizeColumn, onRequestMoveColumn, onRequestResizeColumn, onRequestToggleAllRows, rowSelection, ...otherProps }: HeadProps): React.JSX.Element;
+declare function Head({ actions, actionsColumnWidth, cellMinWidth, children, elementRef, hasDragColumn, hasInfoColumn, pinnedColumns, onAutosizeColumn, onRequestMoveColumn, onRequestResizeColumn, onRequestToggleAllRows, rowSelection, ...otherProps }: HeadProps): React.JSX.Element;
 declare namespace Head {
     var propTypes: {
         /** @private. */
@@ -70,6 +72,8 @@ declare namespace Head {
         /** @private. */
         onRequestToggleAllRows: PropTypes.Requireable<(...args: any[]) => any>;
         /** @private. */
+        pinnedColumns: PropTypes.Requireable<object>;
+        /** @private. */
         rowSelection: PropTypes.Requireable<string>;
     };
     var splunkUiType: string;

package/types/src/Table/HeadCell.d.ts

@@ -46,6 +46,8 @@ interface HeadCellPropsBase {
     /** @private The index of the cell, skipping the info column. */
     index?: number;
     /** @private. */
+    isPinned?: boolean;
+    /** @private. */
     onAutosizeColumn?: HeadCellAutosizeColumnHandler;
     /**
      * A callback invoked when this head cell is clicked. If provided, this HeadCell is
@@ -97,7 +99,7 @@ interface HeadCellPropsBase {
     variant?: 'toggleAll' | 'info' | 'actions';
 }
 type HeadCellProps = ComponentProps<HeadCellPropsBase, 'th'>;
-declare function HeadCell({ align, appearClickable, children, columnId, elementRef, dragId, headCellScreenReaderText, id, index, onAutosizeColumn, onClick, onKeyDown, onRequestMoveColumn, onRequestResize, onSort, resizable, sortDir, sortKey, style, tooltip, truncate: truncateProp, variant, visible, width, ...otherProps }: HeadCellProps): React.JSX.Element;
+declare function HeadCell({ align, appearClickable, children, columnId, elementRef, dragId, headCellScreenReaderText, id, index, isPinned, onAutosizeColumn, onClick, onKeyDown, onRequestMoveColumn, onRequestResize, onSort, resizable, sortDir, sortKey, style, tooltip, truncate: truncateProp, variant, visible, width, ...otherProps }: HeadCellProps): React.JSX.Element;
 declare namespace HeadCell {
     var propTypes: {
         align: PropTypes.Requireable<string>;
@@ -112,6 +114,8 @@ declare namespace HeadCell {
         /** @private The index of the cell, skipping the info column. */
         index: PropTypes.Requireable<number>;
         /** @private. */
+        isPinned: PropTypes.Requireable<boolean>;
+        /** @private. */
         onAutosizeColumn: PropTypes.Requireable<(...args: any[]) => any>;
         /** @private. */
         onClick: PropTypes.Requireable<(...args: any[]) => any>;