@splunk/react-ui 5.3.0 → 5.5.0

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PopoverPlacement, PopoverPlacementStatus } from './Popover';
+import { PopoverPlacement, PopoverPlacementStatus } from '@splunk/react-ui/Popover';
 interface ExtendedDOMRect extends DOMRect {
     middle: number;
     center: number;

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

@@ -1,9 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { RadioListChangeHandler, RadioListValueTypes } from './RadioList';
+import { RadioListChangeHandler, RadioListValueTypes } from '@splunk/react-ui/RadioList';
 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/RadioListContext.d.ts

@@ -1,4 +1,4 @@
-import { RadioListChangeHandler, RadioListValueTypes } from './RadioList';
+import { RadioListChangeHandler, RadioListValueTypes } from '@splunk/react-ui/RadioList';
 export interface RadioListContext {
     disabled?: boolean;
     error?: boolean;

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

@@ -17,15 +17,18 @@ interface StepBarPropsBase {
      * Setting inline to true makes the Step Bar an inline element. It assumes its minimum width.
      */
     inline?: boolean;
+    /** The flow direction of steps. */
+    orientation?: 'horizontal' | 'vertical';
 }
 type StepBarProps = ComponentProps<StepBarPropsBase, 'ul'>;
-declare function StepBar({ activeStepId, children, elementRef, inline, ...otherProps }: StepBarProps): React.JSX.Element;
+declare function StepBar({ activeStepId, children, elementRef, inline, orientation, ...otherProps }: StepBarProps): React.JSX.Element;
 declare namespace StepBar {
     var propTypes: {
         activeStepId: PropTypes.Validator<any>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         elementRef: PropTypes.Requireable<object>;
         inline: PropTypes.Requireable<boolean>;
+        orientation: PropTypes.Requireable<string>;
     };
     var Step: typeof import("./Step").default;
 }

package/types/src/StepBar/StepBarContext.d.ts

@@ -2,6 +2,7 @@ export interface StepBarContext {
     activeStepId: number;
     idCounter?: string;
     lastChildIndex?: number;
+    orientation: 'horizontal' | 'vertical';
 }
 export declare const StepBarContext: import("react").Context<StepBarContext>;
 export default StepBarContext;

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

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

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

@@ -20,6 +20,11 @@ interface SwitchPropsBase {
      */
     appearance?: 'checkbox' | 'toggle';
     children?: React.ReactNode;
+    /**
+     * The id of the description. When placed in a ControlGroup, this is automatically set to the
+     * ControlGroup's help component.
+     */
+    describedBy?: string;
     disabled?: boolean;
     /**
      * A React ref which is set to the DOM element when the component mounts, and null when it unmounts.
@@ -52,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;
@@ -64,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;
@@ -88,11 +96,12 @@ type SwitchProps = ComponentProps<SwitchCheckboxWithSomePropsBase | SwitchNoSome
 /**
  * `Switch` is a basic form control with an on/off state.
  */
-declare function Switch({ appearance, children, disabled, elementRef, error, id, inline, labelledBy, onClick, required, selected, selectedLabel, someSelectedLabel, role, tabIndex, toggleRef, unselectedLabel, value, ...otherProps }: SwitchProps): React.JSX.Element;
+declare function Switch({ appearance, children, describedBy, disabled, elementRef, error, id, inline, labelledBy, onClick, required, selected, selectedLabel, someSelectedLabel, role, tabIndex, toggleRef, unselectedLabel, value, ...otherProps }: SwitchProps): React.JSX.Element;
 declare namespace Switch {
     var propTypes: {
         appearance: PropTypes.Requireable<string>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        describedBy: PropTypes.Requireable<string>;
         disabled: PropTypes.Requireable<boolean>;
         elementRef: PropTypes.Requireable<object>;
         error: PropTypes.Requireable<boolean>;

package/types/src/TabBar/Tab.d.ts

@@ -41,7 +41,9 @@ interface TabPropsBase {
      * instead of a <button> tag. */
     to?: string;
     /**
-     * Content to show in a tooltip.
+     * Content to show in a tooltip when the user hovers over or focuses on the Tab.
+     *
+     * Note: The tooltip will override the label for the Tab for screen readers.
      */
     tooltip?: React.ReactNode;
     /**

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

@@ -1,6 +1,10 @@
 import React from 'react';
 /**
  * @name Icons
+ * @description Icons can be used in tabs to provide additional context.
+ * Use icons sparingly and only when they add value that the text alone cannot communicate.
+ *
+ * Icon only tabs are not recommended. If you do use an icon only tab, a tooltip is required to provide an accessible name to the tab.
  */
 declare function IconsLeft(): React.JSX.Element;
 export default IconsLeft;

package/types/src/TabBar/docs/examples/Tooltips.d.ts

@@ -1,6 +1,9 @@
 import React from 'react';
 /**
  * @name Tooltips
+ * @description Tooltips must be used when the entire tab label is not visible: e.g. due to truncation.
+ * The tooltip will override the accessible name of the tab.
+ * Tooltips should not be used to add a description or additional information.
  */
 declare function Tooltips(): React.JSX.Element;
 export default Tooltips;

package/types/src/TabLayout/Panel.d.ts

@@ -22,6 +22,8 @@ interface PanelPropsBase {
     panelId: string;
     /**
      * Content to show in a tooltip when the user hovers over or focuses on the tab.
+     *
+     * Note: The tooltip will override the label for the Panel for screen readers.
      */
     tooltip?: React.ReactNode;
     /** Prevents user from clicking the tab. */

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