From d56b018b0d6fcbedf0053400c80def5efddd53ab Mon Sep 17 00:00:00 2001 From: Kyle Albert <5498623+kalbert312@users.noreply.github.com> Date: Tue, 8 Oct 2019 17:15:51 -0400 Subject: [PATCH] [@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. --- .../carbon-components-react-tests.tsx | 39 +++++++++++---- types/carbon-components-react/index.d.ts | 2 +- .../lib/components/DataTable/DataTable.d.ts | 48 +++++++++---------- .../lib/components/Dropdown/Dropdown.d.ts | 10 +++- .../InlineLoading/InlineLoading.d.ts | 13 +++-- .../components/Notification/Notification.d.ts | 6 +++ .../ToolbarSearch/ToolbarSearch.d.ts | 7 +-- .../lib/components/Tooltip/Tooltip.d.ts | 28 ++++++----- .../lib/components/UIShell/Link.d.ts | 8 ++-- .../lib/components/UIShell/SideNav.d.ts | 15 +++--- .../lib/components/UIShell/SideNavFooter.d.ts | 4 +- .../lib/components/UIShell/SideNavHeader.d.ts | 4 +- .../lib/components/UIShell/SideNavItem.d.ts | 4 +- .../lib/components/UIShell/SideNavItems.d.ts | 8 ++-- .../lib/components/UIShell/SideNavLink.d.ts | 12 ++++- .../lib/components/UIShell/SideNavMenu.d.ts | 4 +- .../typings/shared.d.ts | 9 ++++ 17 files changed, 142 insertions(+), 79 deletions(-) diff --git a/types/carbon-components-react/carbon-components-react-tests.tsx b/types/carbon-components-react/carbon-components-react-tests.tsx index 93db8196f7..fd63b7a789 100644 --- a/types/carbon-components-react/carbon-components-react-tests.tsx +++ b/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 { headerProp: number; } @@ -49,18 +50,25 @@ const t2 = ( let bap2 = props.getBatchActionProps({ 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({ header: { key: 'k', header: 'Test' }, extra1: 'asdf' }); - let k2 = hp.key; + let hp2 = props.getHeaderProps({ + 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({ 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({ 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 = ( element={TestComp2} someProp={2}>ASDF ); + +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) => (
); + +const uisLinkT5 = ( + element={TestComp3} someProp="asdf">Testing Overwrite +); diff --git a/types/carbon-components-react/index.d.ts b/types/carbon-components-react/index.d.ts index 49f2cd9d36..ded8908702 100644 --- a/types/carbon-components-react/index.d.ts +++ b/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 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped diff --git a/types/carbon-components-react/lib/components/DataTable/DataTable.d.ts b/types/carbon-components-react/lib/components/DataTable/DataTable.d.ts index f367dbb275..22bc4ad88d 100644 --- a/types/carbon-components-react/lib/components/DataTable/DataTable.d.ts +++ b/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 { + disabled?: boolean; + id: ID; + isExpanded?: boolean; + isSelected?: boolean; } export interface SortRowData { @@ -83,9 +83,9 @@ export interface DataTableCustomSelectionProps, - key: string, +export interface DataTableHeader { + header: NonNullable; + key: K; } export interface DataTableCustomHeaderData { @@ -94,28 +94,28 @@ export interface DataTableCustomHeaderData): void, } -export interface DataTableCustomHeaderProps { - isSortable?: boolean, - isSortHeader: boolean, - key: H["key"], - onClick(event: React.MouseEvent): void, - sortDirection: DataTableSortState, +export interface DataTableCustomHeaderProps { + isSortable?: boolean; + isSortHeader: boolean; + key: H['key']; + onClick(event: React.MouseEvent): void; + sortDirection: DataTableSortState; } // endregion Header Types // region Cell Types -export interface DataTableCell { - errors?: any[] | null, - id: string, +export interface DataTableCell { + 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): React.ReactNode; rows: R[]; sortRow?(cellA: any, cellB: any, data: SortRowData): number; } diff --git a/types/carbon-components-react/lib/components/Dropdown/Dropdown.d.ts b/types/carbon-components-react/lib/components/Dropdown/Dropdown.d.ts index 6ceb9e51f5..24ac082ab5 100644 --- a/types/carbon-components-react/lib/components/Dropdown/Dropdown.d.ts +++ b/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 extends DownshiftTypedProps, InternationalProps, + RequiresIdProps, ThemeProps, ValidityProps { diff --git a/types/carbon-components-react/lib/components/InlineLoading/InlineLoading.d.ts b/types/carbon-components-react/lib/components/InlineLoading/InlineLoading.d.ts index ce2e48441a..d408bb7811 100644 --- a/types/carbon-components-react/lib/components/InlineLoading/InlineLoading.d.ts +++ b/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; diff --git a/types/carbon-components-react/lib/components/Notification/Notification.d.ts b/types/carbon-components-react/lib/components/Notification/Notification.d.ts index 316640ebd6..ca9ea12d30 100644 --- a/types/carbon-components-react/lib/components/Notification/Notification.d.ts +++ b/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, subtitle: NonNullable, @@ -68,6 +72,7 @@ export declare class NotificationTextDetails extends React.Component, + ContrastProps, NotificationContentProps, NotificationBaseProps { @@ -86,6 +91,7 @@ export declare class ToastNotification extends React.Component, Omit, + ContrastProps, NotificationBaseProps { } diff --git a/types/carbon-components-react/lib/components/ToolbarSearch/ToolbarSearch.d.ts b/types/carbon-components-react/lib/components/ToolbarSearch/ToolbarSearch.d.ts index 4db462c665..8834ca6d75 100644 --- a/types/carbon-components-react/lib/components/ToolbarSearch/ToolbarSearch.d.ts +++ b/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, @@ -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 { } diff --git a/types/carbon-components-react/lib/components/Tooltip/Tooltip.d.ts b/types/carbon-components-react/lib/components/Tooltip/Tooltip.d.ts index 7b9aaf0521..da4f05412b 100644 --- a/types/carbon-components-react/lib/components/Tooltip/Tooltip.d.ts +++ b/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, EmbeddedIconProps { } +type TooltipOnChangeEvent = React.FocusEvent | React.KeyboardEvent | React.MouseEvent; export interface TooltipProps extends InheritedProps { - direction?: Direction, - iconDescription?: string, - iconName?: string, - menuOffset?: MenuOffsetData | ((menuBody: HTMLElement, menuDirection: TooltipProps["direction"]) => Required | undefined) - open?: boolean, - renderIcon?: React.RefForwardingComponent, - showIcon?: boolean, - triggerClassName?: string, - triggerText?: React.ReactNode, + defaultOpen?: boolean; + direction?: Direction; + iconName?: string; + menuOffset?: + MenuOffsetData + | ((menuBody: HTMLElement, menuDirection: TooltipProps['direction']) => Required | undefined); + onChange?(event: TooltipOnChangeEvent, data: { open: boolean }): void; // optional/required depending on static carbon lib config + open?: boolean; + renderIcon?: React.RefForwardingComponent; + showIcon?: boolean; + tooltipId?: ReactAttr['id']; + triggerClassName?: ReactAttr['className']; + triggerId?: ReactAttr['id']; + triggerText?: React.ReactNode; } declare const Tooltip: React.RefForwardingComponent; diff --git a/types/carbon-components-react/lib/components/UIShell/Link.d.ts b/types/carbon-components-react/lib/components/UIShell/Link.d.ts index b542d40fc3..4a1176a96c 100644 --- a/types/carbon-components-react/lib/components/UIShell/Link.d.ts +++ b/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

= Omit; -export interface LinkPropsBase

{ - element?: string | React.JSXElementConstructor>, // required but has default value +export interface LinkPropsBase

extends SideNavSharedProps { + element?: string | React.JSXElementConstructor>; // required but has default value } -export type LinkProps

= ShapeOf, P>; +export type LinkProps

= Overwrite>; declare function Link

( props: React.PropsWithChildren>, diff --git a/types/carbon-components-react/lib/components/UIShell/SideNav.d.ts b/types/carbon-components-react/lib/components/UIShell/SideNav.d.ts index bed4f86780..6ef855170c 100644 --- a/types/carbon-components-react/lib/components/UIShell/SideNav.d.ts +++ b/types/carbon-components-react/lib/components/UIShell/SideNav.d.ts @@ -9,13 +9,14 @@ interface InheritedProps extends InternationalProps { } export interface SideNavProps extends InheritedProps { - defaultExpanded?: boolean, - expanded?: boolean, - isChildOfHeader?: boolean, - isFixedNav?: boolean, - isPersistent?: boolean, - isRail?: boolean, - onToggle?(event: React.FocusEvent, focus: boolean): void, + addMouseListeners?: boolean; + defaultExpanded?: boolean; + expanded?: boolean; + isChildOfHeader?: boolean; + isFixedNav?: boolean; + isPersistent?: boolean; + isRail?: boolean; + onToggle?(event: React.FocusEvent, focus: boolean): void; } declare const SideNav: React.RefForwardingComponent; diff --git a/types/carbon-components-react/lib/components/UIShell/SideNavFooter.d.ts b/types/carbon-components-react/lib/components/UIShell/SideNavFooter.d.ts index bd3ab31530..c6f550d9f5 100644 --- a/types/carbon-components-react/lib/components/UIShell/SideNavFooter.d.ts +++ b/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"], } diff --git a/types/carbon-components-react/lib/components/UIShell/SideNavHeader.d.ts b/types/carbon-components-react/lib/components/UIShell/SideNavHeader.d.ts index 5346c05d9f..c3b7b7e6b9 100644 --- a/types/carbon-components-react/lib/components/UIShell/SideNavHeader.d.ts +++ b/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, diff --git a/types/carbon-components-react/lib/components/UIShell/SideNavItem.d.ts b/types/carbon-components-react/lib/components/UIShell/SideNavItem.d.ts index 011c9f657d..3efd66dcbc 100644 --- a/types/carbon-components-react/lib/components/UIShell/SideNavItem.d.ts +++ b/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"], } diff --git a/types/carbon-components-react/lib/components/UIShell/SideNavItems.d.ts b/types/carbon-components-react/lib/components/UIShell/SideNavItems.d.ts index 16361d1073..5cfc9cefbe 100644 --- a/types/carbon-components-react/lib/components/UIShell/SideNavItems.d.ts +++ b/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; diff --git a/types/carbon-components-react/lib/components/UIShell/SideNavLink.d.ts b/types/carbon-components-react/lib/components/UIShell/SideNavLink.d.ts index 2c434199fc..c3a1e9025c 100644 --- a/types/carbon-components-react/lib/components/UIShell/SideNavLink.d.ts +++ b/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 + RequiresChildrenProps, + SideNavSharedProps, + SideNavSizingProps { className?: ReactAttr["className"], } diff --git a/types/carbon-components-react/lib/components/UIShell/SideNavMenu.d.ts b/types/carbon-components-react/lib/components/UIShell/SideNavMenu.d.ts index 64fbc8d5ed..36ce6c895f 100644 --- a/types/carbon-components-react/lib/components/UIShell/SideNavMenu.d.ts +++ b/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, diff --git a/types/carbon-components-react/typings/shared.d.ts b/types/carbon-components-react/typings/shared.d.ts index d033e12db4..25b719ba7b 100644 --- a/types/carbon-components-react/typings/shared.d.ts +++ b/types/carbon-components-react/typings/shared.d.ts @@ -10,6 +10,7 @@ export interface ReactLIAttr extends React.LiHTMLAttributes[0]; export type ShapeOf = (E extends never ? {} : E) & B; +export type Overwrite = [T] extends [never] ? U : Omit & 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; +}