@splunk/react-ui 5.0.0 → 5.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -44,9 +44,9 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@react-spring/web": "^9.7.5",
-    "@splunk/react-icons": "^5.0.0",
-    "@splunk/themes": "^1.0.0",
-    "@splunk/ui-utils": "^1.9.0",
+    "@splunk/react-icons": "^5.1.0",
+    "@splunk/themes": "^1.1.0",
+    "@splunk/ui-utils": "^1.10.0",
     "decimal.js-light": "^2.2.3",
     "lodash": "^4.17.14",
     "moment": "^2.29.4",
@@ -62,7 +62,7 @@
     "@splunk/babel-preset": "^4.0.0",
     "@splunk/docs-gen": "^1.0.0",
     "@splunk/eslint-config": "^5.0.0",
-    "@splunk/react-docs": "^1.0.0",
+    "@splunk/react-docs": "^1.1.0",
     "@splunk/stylelint-config": "^5.0.0",
     "@splunk/test-runner-utils": "^0.4.1",
     "@splunk/webpack-configs": "^7.0.2",
@@ -81,7 +81,7 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.14",
     "@types/lodash": "^4.14.156",
-    "@types/node": "^10.17.26",
+    "@types/node": "^18.16.0",
     "@types/prismjs": "^1.26.3",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",

package/stubs-dependencies.d.ts

@@ -1,70 +0,0 @@
-// https://github.com/storybookjs/storybook/issues/7677
-// https://github.com/ComponentDriven/csf/blob/next/src/story.test.ts
-declare module '@storybook/react' {
-    type Context = {
-        id: StoryId;
-        kind: StoryKind;
-        name: StoryName;
-    };
-
-    type StoryId = string;
-    type StoryKind = string;
-    type StoryName = string;
-
-    type StoryFnType<Context, ReturnType> = (context?: Context) => ReturnType;
-
-    type DecoratorFunctionBase<Context, StoryFn extends StoryFnType<Context, any>> = (
-        fn: StoryFn,
-        context: Context
-    ) => ReturnType<StoryFn>;
-
-    type DefaultParameters = { [name: string]: any };
-
-    type ParametersType<T extends { [P: string]: any } = DefaultParameters> = {
-        [P in keyof T]: T[P];
-    };
-
-    interface KindMetaBase<
-        Decorator extends DecoratorFunctionBase<any, any>,
-        Parameters extends ParametersType,
-        Component = unknown
-    > {
-        id?: StoryId;
-        title: StoryKind;
-        component?: Component;
-        subcomponents?: Record<string, Component>;
-        decorators?: Decorator[];
-        parameters?: Parameters;
-    }
-
-    interface StoryMetaBase<
-        Context,
-        StoryFn extends StoryFnType<Context, any>,
-        Decorator extends DecoratorFunctionBase<Context, StoryFn>,
-        Parameters extends ParametersType
-    > {
-        (context?: Context): ReturnType<StoryFn>;
-        storyName?: StoryName;
-        decorators?: Decorator[];
-        parameters?: Parameters;
-    }
-
-    export type StoryFn = (c?: Context) => JSXElementConstructor<Record<string, unknown>>;
-
-    export type DecoratorFunction = DecoratorFunctionBase<Context, StoryFn>;
-
-    export type KindMetaWithParams<Parameters, Component = unknown> = KindMetaBase<
-        DecoratorFunction,
-        Parameters,
-        Component
-    >;
-
-    export type KindMeta<Component = unknown> = KindMetaWithParams<DefaultParameters, Component>;
-
-    export type StoryMeta<Parameters = DefaultParameters> = StoryMetaBase<
-        Context,
-        StoryFn,
-        DecoratorFunction,
-        Parameters
-    >;
-}

package/stubs-splunkui.d.ts

@@ -85,6 +85,10 @@ declare module '@splunk/ui-utils/promise' {
     function makeCancelable<T>(arg: Promise<T>): CancelablePromise<T>;
 }
 
+declare module '@splunk/ui-utils/scroll' {
+    export function scrollIntoViewIfNeeded(el?: HTMLElement | null): void;
+}
+
 declare module '@splunk/ui-utils/style' {
     type ClassNameArg = ClassNameArg | Record<string, unknown> | string | undefined | null;
     function toClassName(...args: ClassNameArg[]): string;

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

@@ -20,24 +20,40 @@ interface CodePropsBase {
      * In cases where `language` is not valid `Code` will use this value as the fallback for `language`.
      */
     languageFallback?: CodeSupportedLanguages;
+    /**
+     * Accepts a comma separated list of line numbers or line number ranges to highlight.
+     * example: `2,4-5` will highlight lines 2, 4 and 5.
+     */
+    lineHighlights?: string;
+    /**
+     * Optional start number when showLineNumbers is true.
+     */
+    lineNumberStart?: number;
     /**
      * Displays the indent guideline.
      */
     showIndentGuide?: boolean;
+    /**
+     * Displays line numbers.
+     */
+    showLineNumbers?: boolean;
     /**
      * Inserts code content into the code block.
      */
     value?: string;
 }
 type CodeProps = ComponentProps<CodePropsBase, 'pre'>;
-declare function Code({ elementRef, indentChars, language, languageFallback, showIndentGuide, value, ...otherProps }: CodeProps): React.JSX.Element;
+declare function Code({ elementRef, indentChars, language, languageFallback, lineHighlights, lineNumberStart, showIndentGuide, showLineNumbers, value, ...otherProps }: CodeProps): React.JSX.Element;
 declare namespace Code {
     var propTypes: {
         elementRef: PropTypes.Requireable<object>;
         indentChars: PropTypes.Requireable<number>;
         language: PropTypes.Requireable<string>;
         languageFallback: PropTypes.Requireable<string>;
+        lineHighlights: PropTypes.Requireable<string>;
+        lineNumberStart: PropTypes.Requireable<number>;
         showIndentGuide: PropTypes.Requireable<boolean>;
+        showLineNumbers: PropTypes.Requireable<boolean>;
         value: PropTypes.Requireable<string>;
     };
 }

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

@@ -0,0 +1,11 @@
+import React from 'react';
+interface LineHighlightProps {
+    highlight: string;
+    width: number;
+}
+type Ranges = [number, number][];
+declare const parseHighlightLines: (highlight: string) => Ranges;
+declare const getLineNumbersArray: (ranges: Ranges) => number[];
+declare const LineHighlights: React.FC<LineHighlightProps>;
+export default LineHighlights;
+export { parseHighlightLines, getLineNumbersArray };

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

@@ -0,0 +1,6 @@
+import React from 'react';
+interface LineNumbersProps {
+    value?: string;
+}
+declare function LineNumbers({ value }: LineNumbersProps): React.JSX.Element;
+export default LineNumbers;

package/types/src/Code/docs/examples/LineHighlights.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare function LineHighlights(): React.JSX.Element;
+export default LineHighlights;

package/types/src/Code/docs/examples/LineNumbers.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare function LineNumbers(): React.JSX.Element;
+export default LineNumbers;

package/types/src/Code/docs/examples/LineNumbersCustomStart.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare function LineNumbersCustomStart(): React.JSX.Element;
+export default LineNumbersCustomStart;

package/types/src/Date/Date.d.ts

@@ -17,6 +17,10 @@ type DateFocusHandler = (event: React.FocusEvent<HTMLInputElement>, data: {
     value: string;
 }) => void;
 interface DatePropsBase {
+    /**
+     * Include an "X" button to clear the value.
+     */
+    canClear?: boolean;
     /** Default date to display. Set this instead of value to make the Date uncontrolled. */
     defaultValue?: string;
     /**
@@ -89,9 +93,10 @@ interface DatePropsBaseUncontrolled extends DatePropsBase {
 }
 type DateProps = ComponentProps<DatePropsBaseControlled | DatePropsBaseUncontrolled, 'div'>;
 declare const validateValue: (value: string | undefined) => void;
-declare function Date({ defaultValue, disabled, elementRef, highlightToday, inline, inputOnly, locale, name, onChange, onClick, onFocus, onKeyDown, value: valueProp, ...otherProps }: DateProps): React.JSX.Element;
+declare function Date({ canClear, defaultValue, disabled, elementRef, highlightToday, inline, inputOnly, locale, name, onChange, onClick, onFocus, onKeyDown, value: valueProp, ...otherProps }: DateProps): React.JSX.Element;
 declare namespace Date {
     var propTypes: {
+        canClear: PropTypes.Requireable<boolean>;
         defaultValue: PropTypes.Requireable<string>;
         describedBy: PropTypes.Requireable<string>;
         disabled: PropTypes.Requireable<boolean>;

package/types/src/DefinitionList/DefinitionList.d.ts

@@ -9,23 +9,23 @@ interface DefinitionListPropsBase {
      * A React ref which is set to the DOM element when the component mounts and null when it unmounts.
      */
     elementRef?: React.Ref<HTMLDListElement>;
-    /**
-     * Defines the width of an item on the list.
-     */
-    termWidth?: string;
     /**
      * Sets the character used to separate key-value pair.
      */
     separatorCharacter?: '.' | string;
+    /**
+     * Defines the width of the key (term).
+     */
+    termWidth?: string;
 }
 type DefinitionListProps = ComponentProps<DefinitionListPropsBase, 'dl'>;
-declare function DefinitionList({ children, elementRef, termWidth, separatorCharacter, ...otherProps }: DefinitionListProps): React.JSX.Element;
+declare function DefinitionList({ children, elementRef, separatorCharacter, termWidth, ...otherProps }: DefinitionListProps): React.JSX.Element;
 declare namespace DefinitionList {
     var propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         elementRef: PropTypes.Requireable<object>;
-        termWidth: PropTypes.Requireable<string>;
         separatorCharacter: PropTypes.Requireable<string | PropTypes.Requireable<string>>;
+        termWidth: PropTypes.Requireable<string>;
     };
     var Description: typeof import("./Description").default;
     var Term: typeof import("./Term").default;

package/types/src/FormRows/FormRows.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Row from './Row';
-import type { RowRequestRemoveHandler } from './Row';
 import { ComponentProps } from '../utils/types';
+import type { RowRequestRemoveHandler } from './Row';
 /** @public */
 type FormRowsRequestMoveHandler = (data: {
     fromIndex: number;

package/types/src/JSONTree/JSONTreeItem.d.ts

@@ -3,7 +3,10 @@ import PropTypes from 'prop-types';
 import { JSONElement } from './JSONTree';
 import { TreeItemPropsBase } from '../Tree';
 import { ComponentProps } from '../utils/types';
-export type ExpandLinkHandler = (data: {
+export type ExpandLinkRenderer = (params: {
+    onToggleExpansion: (event: React.KeyboardEvent<HTMLLIElement> | React.MouseEvent<HTMLSpanElement>, data?: {
+        treeItemId?: string;
+    }) => void;
     open: boolean;
     withTooltip: boolean;
     expandLinkRef: React.RefObject<HTMLButtonElement>;
@@ -20,7 +23,7 @@ interface JSONTreeItemPropsBase extends TreeItemPropsBase {
     properties?: string[];
     propertyDataPath: string;
     propertyElement?: JSX.Element | undefined;
-    renderExpandLink?: ExpandLinkHandler;
+    renderExpandLink?: ExpandLinkRenderer;
     representation?: JSX.Element | JSX.Element[];
     value?: JSONElement;
 }

package/types/src/Markdown/Markdown.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Options } from 'react-markdown';
-import { ComponentProps } from '../utils/types';
 import { MarkdownAnchorHeading, MarkdownBlockquote, MarkdownCodeBlock, MarkdownCode, MarkdownHeading, MarkdownImage, MarkdownItem, MarkdownLink, MarkdownList, MarkdownParagraph } from './renderers';
+import { ComponentProps } from '../utils/types';
 /** @public */
 type RemarkReturn = React.ReactElement<any, any> | null;
 /** @public */

package/types/src/Markdown/renderers/MarkdownBlockquote.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { StyledHint } from '../MarkdownStyles';
 import { ComponentProps } from '../../utils/types';
+import { StyledHint } from '../MarkdownStyles';
 interface MarkdownBlockquotePropsBase {
     children: React.ReactNode[];
 }

package/types/src/Markdown/renderers/MarkdownCodeBlock.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { StyledCodeBlock } from '../MarkdownStyles';
 import { ComponentProps } from '../../utils/types';
+import { StyledCodeBlock } from '../MarkdownStyles';
 interface MarkdownCodeBlockPropsBase {
     children: React.ReactNode[];
     language?: string;

package/types/src/Markdown/renderers/index.d.ts

@@ -4,9 +4,9 @@ import MarkdownCode from './MarkdownCode';
 import MarkdownCodeBlock, { StyledCodeBlock } from './MarkdownCodeBlock';
 import MarkdownHeading from './MarkdownHeading';
 import MarkdownImage from './MarkdownImage';
+import MarkdownItem from './MarkdownItem';
 import MarkdownLink from './MarkdownLink';
 import MarkdownList from './MarkdownList';
-import MarkdownItem from './MarkdownItem';
 import MarkdownParagraph from './MarkdownParagraph';
 import { MarkdownTable, MarkdownTableHeadCell, MarkdownTableCell, MarkdownTableRow, MarkdownTableBody, MarkdownTableHead } from './MarkdownTable';
 export { MarkdownAnchorHeading, MarkdownBlockquote, MarkdownCodeBlock, MarkdownCode, MarkdownHeading, MarkdownImage, MarkdownItem, MarkdownLink, MarkdownList, MarkdownParagraph, MarkdownTable, MarkdownTableBody, MarkdownTableCell, MarkdownTableHead, MarkdownTableHeadCell, MarkdownTableRow, StyledCodeBlock, StyledHint, };

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

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

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

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

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

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

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

@@ -1,9 +1,11 @@
 import { OptionClickHandler, OnKeyDownHandler } from './Option';
 export interface RadioBarContext {
-    onClick?: OptionClickHandler;
+    disabled?: boolean;
     error?: boolean;
-    onKeyDown?: OnKeyDownHandler;
     firstValue?: any;
+    name?: string;
+    onClick?: OptionClickHandler;
+    onKeyDown?: OnKeyDownHandler;
     selectedValue?: any;
 }
 export declare const RadioBarContext: import("react").Context<RadioBarContext>;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ComponentProps } from '../utils/types';
 import Option from './Option';
+import { ComponentProps } from '../utils/types';
 type RadioListValueTypes = number | string | boolean | Record<string, unknown> | symbol;
 /** @public */
 type RadioListChangeHandler = (event: React.ChangeEvent<HTMLInputElement>, data: {
@@ -87,6 +87,7 @@ declare namespace RadioList {
         value: PropTypes.Requireable<any>;
     };
     var Option: typeof import("./Option").default;
+    var componentType: string;
 }
 export default RadioList;
 export { Option, RadioListValueTypes, RadioListChangeHandler };

package/types/src/ScreenReaderContent/docs/examples/SkipLink.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare function SkipLink(): React.JSX.Element;
+export default SkipLink;

package/types/src/Scroll/Inner.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { SpringValue } from '@react-spring/web';
+import PropTypes from 'prop-types';
 import { ComponentProps } from '../utils/types';
 interface InnerPropsBase {
     children?: React.ReactNode;

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { OptionClickHandler } from './OptionBase';
 import { ComponentProps } from '../utils/types';
+import type { OptionClickHandler } from './OptionBase';
 interface OptionPropsBase {
     /** @private */
     active?: boolean;

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 './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/Slider/docs/examples/Controlled.d.ts

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import { SliderChangeHandler } from '@splunk/react-ui/Slider';
 import { NumberChangeHandler } from '@splunk/react-ui/Number';
+import { SliderChangeHandler } from '@splunk/react-ui/Slider';
 declare class Controlled extends Component<object, {
     value?: number;
 }> {

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

@@ -10,7 +10,6 @@ interface PanelPropsBase {
      */
     elementRef?: React.Ref<HTMLDivElement>;
     /** See Icon documentation for more information.
-     * @excludeTheme prisma
      */
     icon?: React.ReactNode;
     /**

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

@@ -4,6 +4,7 @@ import { TableRequestMoveColumnHandler } from './Table';
 import { ComponentProps } from '../utils/types';
 type HeadAutosizeColumnHandler = (event: React.MouseEvent<HTMLHRElement>, data: {
     columnId?: string;
+    id?: string;
     index: number;
 }) => void;
 type HeadRequestMoveColumnHandler = TableRequestMoveColumnHandler;

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { UniqueIdentifier } from '@dnd-kit/core';
+import PropTypes from 'prop-types';
 import { HeadAutosizeColumnHandler, HeadRequestMoveColumnHandler, HeadRequestResizeColumnHandler } from './Head';
 import { ComponentProps } from '../utils/types';
 type HeadCellAutosizeColumnHandler = HeadAutosizeColumnHandler;
@@ -80,8 +80,7 @@ interface HeadCellPropsBase {
      */
     tooltip?: React.ReactNode;
     /**
-     * Truncate the text in the label. `truncate=false` is not compatible with `Table`'s
-     * `onRequestResize`.
+     * Truncate the text in the label.
      */
     truncate?: boolean;
     /**

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { UniqueIdentifier } from '@dnd-kit/core';
+import PropTypes from 'prop-types';
 import { HeadAutosizeColumnHandler, HeadRequestMoveColumnHandler, HeadRequestResizeColumnHandler } from './Head';
 import { HeadCellKeyDownHandler } from './HeadCell';
 import { ComponentProps } from '../utils/types';
@@ -40,7 +40,7 @@ interface HeadDropdownCellPropsBase {
      */
     closeReasons?: HeadDropdownCellPossibleCloseReason[];
     /**
-     * An id that is passed to the `onSort` callback and as `Table`'s `onRequestResizeColumn` callback.
+     * An id that is passed to the `onRequestOpen`, `onRequestClose` callback and as `Table`'s `onRequestResizeColumn` callback.
      */
     columnId?: string;
     /** @private. */

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

@@ -1,17 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ComponentProps } from '../utils/types';
 import { HeadAutosizeColumnHandler, HeadRequestResizeColumnHandler } from './Head';
+import { ComponentProps } from '../utils/types';
 type HeadInnerAutosizeColumnHandler = HeadAutosizeColumnHandler;
 type HeadInnerRequestResizeHandler = HeadRequestResizeColumnHandler;
 interface HeadInnerPropsBase {
     align?: 'left' | 'center' | 'right';
+    cellId?: string;
     clickable?: boolean;
     columnId?: string;
     elementRef?: React.Ref<HTMLButtonElement | HTMLDivElement>;
     focusWithin?: boolean;
     hasTooltip?: boolean;
-    id?: string;
     index?: number;
     isMenu?: boolean;
     label?: React.ReactNode;
@@ -24,16 +24,16 @@ interface HeadInnerPropsBase {
     variant?: 'toggleAll' | 'info' | 'actions';
 }
 type HeadInnerProps = ComponentProps<HeadInnerPropsBase, 'div'>;
-declare function HeadInner({ align, clickable, columnId, elementRef, focusWithin, hasTooltip, id, index, isMenu, label, onAutosizeColumn, onRequestResize, resizable, sortDir, truncate, variant, width: widthProp, ...otherProps }: HeadInnerProps): React.JSX.Element;
+declare function HeadInner({ align, clickable, cellId, columnId, elementRef, focusWithin, hasTooltip, index, isMenu, label, onAutosizeColumn, onRequestResize, resizable, sortDir, truncate, variant, width: widthProp, ...otherProps }: HeadInnerProps): React.JSX.Element;
 declare namespace HeadInner {
     var propTypes: {
         align: PropTypes.Requireable<string>;
+        cellId: PropTypes.Requireable<string>;
         clickable: PropTypes.Requireable<boolean>;
         columnId: PropTypes.Requireable<string>;
         elementRef: PropTypes.Requireable<object>;
         focusWithin: PropTypes.Requireable<boolean>;
         hasTooltip: PropTypes.Requireable<boolean>;
-        id: PropTypes.Requireable<string>;
         index: PropTypes.Requireable<number>;
         isMenu: PropTypes.Requireable<boolean>;
         label: PropTypes.Requireable<PropTypes.ReactNodeLike>;

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

@@ -1,6 +1,6 @@
-import { Transform } from '@dnd-kit/utilities';
 import { Activators, SensorInstance, SensorProps, SensorOptions, KeyboardCodes, KeyboardCoordinateGetter } from '@dnd-kit/core';
 import { Coordinates } from '@dnd-kit/core/dist/types/';
+import { Transform } from '@dnd-kit/utilities';
 export declare class Listeners {
     private target;
     private listeners;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import type { DraggableSyntheticListeners } from '@dnd-kit/core';
 import { ComponentProps } from '../utils/types';
+import type { DraggableSyntheticListeners } from '@dnd-kit/core';
 interface RowDragCellPropsBase {
     setActivatorNodeRef: (element: HTMLElement | null) => void;
     listeners?: DraggableSyntheticListeners;