[@types/carbon-components-react] Bump to 7.6, type updates & fixes. (#38983)

* Bump to 7.6.

* Fix missing required id prop.

* Update InlineLoading.

* Update ToolbarSearch.

* Update Tooltip.

* Update SideNav props.

* Update Notification.

* Improve DataTable types.

* Lint fix.

* Fix extra new line.

* Reverting children type change on SideNav components due to carbon issue.

* Lint fix.

types/carbon-components-react/carbon-components-react-tests.tsx

@@ -14,7 +14,8 @@ interface Row1 extends DataTableRow {
     rowProp: string;
 }
 
-interface Header1 extends DataTableHeader {
+type Header1Key = "h1" | "h2" | "h3";
+interface Header1 extends DataTableHeader<Header1Key> {
     headerProp: number;
 }
 
@@ -49,18 +50,25 @@ const t2 = (
             let bap2 = props.getBatchActionProps<ExtraStuff>({ extra1: 'extra' });
             let s = bap2.extra1;
 
-            let hp = props.getHeaderProps({ header: { key: 'k', header: 'Test' } });
-            let k = hp.key;
+            let hp = props.getHeaderProps({ header: { key: 'h1', header: 'testh1', headerProp: 3 } });
+            let k: Header1Key = hp.key;
 
-            let hp2 = props.getHeaderProps<ExtraStuff>({ header: { key: 'k', header: 'Test' }, extra1: 'asdf' });
-            let k2 = hp.key;
+            let hp2 = props.getHeaderProps<ExtraStuff>({
+                header: { key: 'h2', header: 'Test', headerProp: 3 },
+                extra1: 'asdf',
+            });
+            k = hp.key;
             let e = hp2.extra1;
 
-            let rp = props.getRowProps({ row: { id: 'r1' } });
-            k = rp.key;
+            let hp3 = props.getHeaderProps({ header: { key: 'h3', header: 'testh1', headerProp: 5 }, someExtra: 2 });
+            let k3: Header1Key = hp.key;
+            let someExtra = hp3.someExtra;
 
-            let rp2 = props.getRowProps<ExtraStuff>({ row: { id: 'r1' }, extra1: 'asdf' });
-            k = rp2.key;
+            let rp = props.getRowProps({ row: { id: 'r1', rowProp: 'asdf' }, extra1: 'asdf' });
+            let rk: string = rp.key;
+
+            let rp2 = props.getRowProps<ExtraStuff>({ row: { id: 'r1', rowProp: 'edfg' }, extra1: 'asdf' });
+            rk = rp2.key;
             e = rp2.extra1;
 
             let sp = props.getSelectionProps();
@@ -76,7 +84,7 @@ const t2 = (
 
             props.selectAll();
             props.selectRow('qwerty');
-            props.sortBy('zxcv');
+            props.sortBy('h3');
 
             props.rows.forEach((denormalizedRow) => {
                 denormalizedRow.cells.forEach((cell) => {
@@ -165,3 +173,14 @@ const uisLinkT3 = (
 const uisLinkT4 = (
     <Link<TestCompProps> element={TestComp2} someProp={2}>ASDF</Link>
 );
+
+interface TestCompPropsOverwrite {
+    element?: "overwriteTest", // making this required will produce an error. The underlying component will never receive prop element so it's not allowed to be required.
+    someProp: string,
+}
+
+const TestComp3 = (props: TestCompPropsOverwrite) => (<div/>);
+
+const uisLinkT5 = (
+    <Link<TestCompPropsOverwrite> element={TestComp3} someProp="asdf">Testing Overwrite</Link>
+);

types/carbon-components-react/index.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for carbon-components-react 7.5
+// Type definitions for carbon-components-react 7.6
 // Project: https://github.com/carbon-design-system/carbon/tree/master/packages/react
 // Definitions by: Kyle Albert <https://github.com/kalbert312>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped

types/carbon-components-react/lib/components/DataTable/DataTable.d.ts

@@ -24,11 +24,11 @@ import TableToolbarSearch from "./TableToolbarSearch";
 
 // region Row Types
 
-export interface DataTableRow {
-    disabled?: boolean,
-    id: string,
-    isExpanded?: boolean,
-    isSelected?: boolean,
+export interface DataTableRow<ID extends string = string> {
+    disabled?: boolean;
+    id: ID;
+    isExpanded?: boolean;
+    isSelected?: boolean;
 }
 
 export interface SortRowData {
@@ -83,9 +83,9 @@ export interface DataTableCustomSelectionProps<R extends DataTableRow = DataTabl
 
 // region Header Types
 
-export interface DataTableHeader {
-    header: NonNullable<React.ReactNode>,
-    key: string,
+export interface DataTableHeader<K extends string = string> {
+    header: NonNullable<React.ReactNode>;
+    key: K;
 }
 
 export interface DataTableCustomHeaderData<H extends DataTableHeader = DataTableHeader> {
@@ -94,28 +94,28 @@ export interface DataTableCustomHeaderData<H extends DataTableHeader = DataTable
     onClick?(event: React.MouseEvent<HTMLElement>): void,
 }
 
-export interface DataTableCustomHeaderProps<H extends DataTableHeader = DataTableHeader> {
-    isSortable?: boolean,
-    isSortHeader: boolean,
-    key: H["key"],
-    onClick(event: React.MouseEvent<HTMLElement>): void,
-    sortDirection: DataTableSortState,
+export interface DataTableCustomHeaderProps<H extends { key: string } = DataTableHeader> {
+    isSortable?: boolean;
+    isSortHeader: boolean;
+    key: H['key'];
+    onClick(event: React.MouseEvent<HTMLElement>): void;
+    sortDirection: DataTableSortState;
 }
 
 // endregion Header Types
 
 // region Cell Types
 
-export interface DataTableCell {
-    errors?: any[] | null,
-    id: string,
+export interface DataTableCell<V = any, H extends DataTableHeader = DataTableHeader> {
+    errors?: any[] | null;
+    id: string;
     info: {
-        header: DataTableHeader["key"],
-    },
-    isEditable: boolean,
-    isEditing: boolean,
-    isValid: boolean,
-    value?: any,
+        header: H['key'];
+    };
+    isEditable: boolean;
+    isEditing: boolean;
+    isValid: boolean;
+    value?: V;
 }
 
 // endregion CellTypes
@@ -179,7 +179,7 @@ export interface DataTableProps<R extends DataTableRow = DataTableRow, H extends
     headers: H[];
     locale?: string;
     radio?: boolean;
-    render?(props: DataTableCustomRenderProps): React.ReactNode;
+    render?(props: DataTableCustomRenderProps<R, H>): React.ReactNode;
     rows: R[];
     sortRow?(cellA: any, cellB: any, data: SortRowData): number;
 }

types/carbon-components-react/lib/components/Dropdown/Dropdown.d.ts

@@ -1,11 +1,19 @@
 import * as React from "react";
-import { DownshiftTypedProps, InternationalProps, ReactInputAttr, ThemeProps, ValidityProps } from "../../../typings/shared";
+import {
+    DownshiftTypedProps,
+    InternationalProps,
+    ReactInputAttr,
+    RequiresIdProps,
+    ThemeProps,
+    ValidityProps
+} from "../../../typings/shared";
 import { ListBoxProps } from "../ListBox";
 import { ListBoxMenuIconTranslationKey } from "../ListBox/ListBoxMenuIcon";
 
 interface InheritedProps<ItemType> extends
     DownshiftTypedProps<ItemType>,
     InternationalProps<ListBoxMenuIconTranslationKey>,
+    RequiresIdProps,
     ThemeProps,
     ValidityProps
 {

types/carbon-components-react/lib/components/InlineLoading/InlineLoading.d.ts

@@ -3,11 +3,16 @@ import { EmbeddedIconProps, ReactDivAttr } from "../../../typings/shared";
 
 interface InheritedProps extends ReactDivAttr, EmbeddedIconProps { }
 
+export type InlineLoadingStatus = 'active' | 'error' | 'finished' | 'inactive';
 export interface InlineLoadingProps extends InheritedProps {
-    description?: string,
-    onSuccess?(): void,
-    success?: boolean,
-    successDelay?: number,
+    description?: string;
+    onSuccess?(): void;
+    /**
+     * @deprecated
+     */
+    success?: boolean;
+    successDelay?: number;
+    status?: InlineLoadingStatus;
 }
 
 declare const InlineLoading: React.FC<InlineLoadingProps>;

types/carbon-components-react/lib/components/Notification/Notification.d.ts

@@ -9,6 +9,10 @@ interface SharedProps {
     notificationType?: NotificationType,
 }
 
+interface ContrastProps {
+    lowContrast?: boolean,
+}
+
 export interface NotificationContentProps {
     caption: NonNullable<React.ReactNode>,
     subtitle: NonNullable<React.ReactNode>,
@@ -68,6 +72,7 @@ export declare class NotificationTextDetails extends React.Component<Notificatio
 type ExcludedToastDivAttributes = "role" | "title";
 interface ToastNotificationInheritedProps extends
     Omit<ReactDivAttr, ExcludedToastDivAttributes>,
+    ContrastProps,
     NotificationContentProps,
     NotificationBaseProps
 {
@@ -86,6 +91,7 @@ export declare class ToastNotification extends React.Component<ToastNotification
 interface InlineNotificationInheritedProps extends
     Omit<ReactDivAttr, "title">,
     Omit<NotificationContentProps, "caption">,
+    ContrastProps,
     NotificationBaseProps
 { }
 

types/carbon-components-react/lib/components/ToolbarSearch/ToolbarSearch.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { ReactInputAttr, SizingProps } from "../../../typings/shared";
+import { ReactAttr, ReactInputAttr, SizingProps } from '../../../typings/shared';
 
 interface InheritedProps extends
     Omit<ReactInputAttr, "placeholder">,
@@ -7,8 +7,9 @@ interface InheritedProps extends
 { }
 
 export interface ToolbarSearchProps extends InheritedProps {
-    labelText?: React.ReactNode,
-    placeHolderText?: string,
+    labelId?: ReactAttr['id'];
+    labelText?: React.ReactNode;
+    placeHolderText?: string;
 }
 
 declare class ToolbarSearch extends React.Component<ToolbarSearchProps> { }

types/carbon-components-react/lib/components/Tooltip/Tooltip.d.ts

@@ -1,22 +1,28 @@
 import * as React from "react";
-import { Direction, EmbeddedIconProps, MenuOffsetData, ReactDivAttr } from "../../../typings/shared";
+import { Direction, EmbeddedIconProps, MenuOffsetData, ReactAttr, ReactDivAttr } from "../../../typings/shared";
 
-type ExcludedAttributes = "aria-labelledby" | "onBlur" | "onContextMenu" | "onFocus" | "onMouseOut" | "onMouseOver" | "role";
+type ExcludedAttributes = "onBlur" | "onChange" | "onContextMenu" | "onFocus" | "onMouseOut" | "onMouseOver" | "role";
 interface InheritedProps extends
     Omit<ReactDivAttr, ExcludedAttributes>,
     EmbeddedIconProps
 { }
 
+type TooltipOnChangeEvent<T extends Element> = React.FocusEvent<T> | React.KeyboardEvent<T> | React.MouseEvent<T>;
 export interface TooltipProps extends InheritedProps {
-    direction?: Direction,
-    iconDescription?: string,
-    iconName?: string,
-    menuOffset?: MenuOffsetData | ((menuBody: HTMLElement, menuDirection: TooltipProps["direction"]) => Required<MenuOffsetData> | undefined)
-    open?: boolean,
-    renderIcon?: React.RefForwardingComponent<any, any>,
-    showIcon?: boolean,
-    triggerClassName?: string,
-    triggerText?: React.ReactNode,
+    defaultOpen?: boolean;
+    direction?: Direction;
+    iconName?: string;
+    menuOffset?:
+        MenuOffsetData
+        | ((menuBody: HTMLElement, menuDirection: TooltipProps['direction']) => Required<MenuOffsetData> | undefined);
+    onChange?(event: TooltipOnChangeEvent<HTMLDivElement>, data: { open: boolean }): void; // optional/required depending on static carbon lib config
+    open?: boolean;
+    renderIcon?: React.RefForwardingComponent<any, any>;
+    showIcon?: boolean;
+    tooltipId?: ReactAttr['id'];
+    triggerClassName?: ReactAttr['className'];
+    triggerId?: ReactAttr['id'];
+    triggerText?: React.ReactNode;
 }
 
 declare const Tooltip: React.RefForwardingComponent<any, TooltipProps>;

types/carbon-components-react/lib/components/UIShell/Link.d.ts

@@ -1,12 +1,12 @@
 import * as React from "react";
-import { ReactAnchorAttr, ShapeOf } from "../../../typings/shared";
+import { Overwrite, ReactAnchorAttr, SideNavSharedProps } from '../../../typings/shared';
 
 type InnerElementProps<P> = Omit<P, "element">;
-export interface LinkPropsBase<P = ReactAnchorAttr> {
-    element?: string | React.JSXElementConstructor<InnerElementProps<P>>, // required but has default value
+export interface LinkPropsBase<P = ReactAnchorAttr> extends SideNavSharedProps {
+    element?: string | React.JSXElementConstructor<InnerElementProps<P>>; // required but has default value
 }
 
-export type LinkProps<P extends object = ReactAnchorAttr, IP = P> = ShapeOf<LinkPropsBase<IP>, P>;
+export type LinkProps<P extends object = ReactAnchorAttr, IP = P> = Overwrite<P, LinkPropsBase<IP>>;
 
 declare function Link<P extends object = ReactAnchorAttr>(
     props: React.PropsWithChildren<LinkProps<P>>,

types/carbon-components-react/lib/components/UIShell/SideNav.d.ts

@@ -9,13 +9,14 @@ interface InheritedProps extends InternationalProps<SideNavTranslationKey> {
 }
 
 export interface SideNavProps extends InheritedProps {
-    defaultExpanded?: boolean,
-    expanded?: boolean,
-    isChildOfHeader?: boolean,
-    isFixedNav?: boolean,
-    isPersistent?: boolean,
-    isRail?: boolean,
-    onToggle?(event: React.FocusEvent<HTMLElement>, focus: boolean): void,
+    addMouseListeners?: boolean;
+    defaultExpanded?: boolean;
+    expanded?: boolean;
+    isChildOfHeader?: boolean;
+    isFixedNav?: boolean;
+    isPersistent?: boolean;
+    isRail?: boolean;
+    onToggle?(event: React.FocusEvent<HTMLElement>, focus: boolean): void;
 }
 
 declare const SideNav: React.RefForwardingComponent<HTMLElement, SideNavProps>;

types/carbon-components-react/lib/components/UIShell/SideNavFooter.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
-import { ReactAttr } from "../../../typings/shared";
+import { ReactAttr, SideNavSharedProps } from '../../../typings/shared';
 
-interface InheritedProps {
+interface InheritedProps extends SideNavSharedProps {
     className?: ReactAttr["className"],
 }
 

types/carbon-components-react/lib/components/UIShell/SideNavHeader.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
-import { ReactAttr, RenderIconProps } from "../../../typings/shared";
+import { ReactAttr, RenderIconProps, SideNavSharedProps } from '../../../typings/shared';
 
-interface InheritedProps {
+interface InheritedProps extends SideNavSharedProps {
     children?: ReactAttr["children"],
     className?: ReactAttr["className"],
     renderIcon: NonNullable<RenderIconProps["renderIcon"]>,

types/carbon-components-react/lib/components/UIShell/SideNavItem.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
-import { ReactAttr, RequiresChildrenProps } from "../../../typings/shared";
+import { ReactAttr, RequiresChildrenProps, SideNavSizingProps } from '../../../typings/shared';
 
-interface InheritedProps extends RequiresChildrenProps {
+interface InheritedProps extends RequiresChildrenProps, SideNavSizingProps {
     className?: ReactAttr["className"],
 }
 

types/carbon-components-react/lib/components/UIShell/SideNavItems.d.ts

@@ -1,12 +1,12 @@
 import * as React from "react";
-import { ReactAttr, RequiresChildrenProps } from "../../../typings/shared";
+import { ReactAttr, SideNavSharedProps } from '../../../typings/shared';
 
-interface InheritedProps extends RequiresChildrenProps {
+interface InheritedProps extends SideNavSharedProps {
+    children: ReactAttr["children"],
     className?: ReactAttr["className"],
 }
 
-export interface SideNavItemsProps extends InheritedProps {
-}
+export interface SideNavItemsProps extends InheritedProps {}
 
 declare const SideNavItems: React.FC<SideNavItemsProps>;
 

types/carbon-components-react/lib/components/UIShell/SideNavLink.d.ts

@@ -1,10 +1,18 @@
 import * as React from "react";
-import { ReactAttr, RenderIconProps, RequiresChildrenProps } from "../../../typings/shared";
+import {
+    ReactAttr,
+    RenderIconProps,
+    RequiresChildrenProps,
+    SideNavSharedProps,
+    SideNavSizingProps,
+} from '../../../typings/shared';
 import { LinkProps } from "./Link";
 
 interface InheritedProps extends
     RenderIconProps,
-    RequiresChildrenProps<string>
+    RequiresChildrenProps<string>,
+    SideNavSharedProps,
+    SideNavSizingProps
 {
     className?: ReactAttr["className"],
 }

types/carbon-components-react/lib/components/UIShell/SideNavMenu.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
-import { ReactAttr, RenderIconProps } from "../../../typings/shared";
+import { ReactAttr, RenderIconProps, SideNavSharedProps, SideNavSizingProps } from '../../../typings/shared';
 
-interface InheritedProps extends RenderIconProps {
+interface InheritedProps extends RenderIconProps, SideNavSharedProps, SideNavSizingProps {
     children?: ReactAttr["children"],
     className?: ReactAttr["className"],
     title: NonNullable<ReactAttr["title"]>,

types/carbon-components-react/typings/shared.d.ts

@@ -10,6 +10,7 @@ export interface ReactLIAttr<T = HTMLLIElement> extends React.LiHTMLAttributes<T
 export type ReactCreateElementParam = Parameters<typeof React.createElement>[0];
 
 export type ShapeOf<B extends object, E extends object = { [key: string]: any }> = (E extends never ? {} : E) & B;
+export type Overwrite<T, U> = [T] extends [never] ? U : Omit<T, keyof U> & U;
 
 export type Direction = "bottom" | "left" | "right" | "top";
 export type ListBoxBaseItemType = object | string;
@@ -62,3 +63,11 @@ export interface ValidityProps {
     invalid?: boolean,
     invalidText?: string,
 }
+
+export interface SideNavSharedProps {
+    isSideNavExpanded?: boolean;
+}
+
+export interface SideNavSizingProps {
+    large?: boolean;
+}