From a3b0d6cd66ce93b4da62ab83248a917ba2a51612 Mon Sep 17 00:00:00 2001 From: Felix Habib Date: Fri, 12 Jul 2024 16:37:46 +1000 Subject: [PATCH] Fix issue in Toast component key handling --- .changeset/strange-otters-carry.md | 10 +++ .../lib/components/useToast/ToastContext.tsx | 5 +- .../src/__snapshots__/contract.test.ts.snap | 80 +++++++++++++++---- .../generate-component-docs/src/generate.ts | 39 ++++----- 4 files changed, 98 insertions(+), 36 deletions(-) create mode 100644 .changeset/strange-otters-carry.md diff --git a/.changeset/strange-otters-carry.md b/.changeset/strange-otters-carry.md new file mode 100644 index 00000000000..c3d5ff63f68 --- /dev/null +++ b/.changeset/strange-otters-carry.md @@ -0,0 +1,10 @@ +--- +'braid-design-system': patch +--- + +--- +updated: + - Toast +--- + +Fix warning in React 18.3.0 when using useToast. \ No newline at end of file diff --git a/packages/braid-design-system/src/lib/components/useToast/ToastContext.tsx b/packages/braid-design-system/src/lib/components/useToast/ToastContext.tsx index 422f140d48a..ead29db9d43 100644 --- a/packages/braid-design-system/src/lib/components/useToast/ToastContext.tsx +++ b/packages/braid-design-system/src/lib/components/useToast/ToastContext.tsx @@ -168,10 +168,11 @@ export const useToast = () => { return useCallback( (toast: Toast) => { const id = `${toastCounter++}`; - const dedupeKey = toast.key ?? id; + const { key, ...rest } = toast; + const dedupeKey = key ?? id; addToast({ - ...toast, + ...rest, vanillaTheme, id, dedupeKey, diff --git a/packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap b/packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap index 8476eff22b3..d0b7de6f62d 100644 --- a/packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap +++ b/packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap @@ -119,6 +119,7 @@ exports[`Autosuggest 1`] = ` ref?: | (instance: HTMLInputElement | null) => void | RefObject + | string required?: boolean reserveMessageSpace?: boolean scrollToTopOnMobile?: boolean @@ -167,6 +168,7 @@ exports[`Badge 1`] = ` ref?: | (instance: HTMLSpanElement | null) => void | RefObject + | string tabIndex?: number title?: string tone?: @@ -316,6 +318,8 @@ exports[`Box 1`] = ` | "inline" | "list" | "none" + aria-braillelabel?: string + aria-brailleroledescription?: string aria-busy?: | "false" | "true" @@ -329,6 +333,7 @@ exports[`Box 1`] = ` | true aria-colcount?: number aria-colindex?: number + aria-colindextext?: string aria-colspan?: number aria-controls?: string aria-current?: @@ -342,6 +347,7 @@ exports[`Box 1`] = ` | false | true aria-describedby?: string + aria-description?: string aria-details?: string aria-disabled?: | "false" @@ -448,6 +454,7 @@ exports[`Box 1`] = ` aria-roledescription?: string aria-rowcount?: number aria-rowindex?: number + aria-rowindextext?: string aria-rowspan?: number aria-selected?: | "false" @@ -713,8 +720,10 @@ exports[`Box 1`] = ` | "s" | "samp" | "script" + | "search" | "section" | "select" + | "set" | "slot" | "small" | "source" @@ -757,6 +766,7 @@ exports[`Box 1`] = ` contentEditable?: | "false" | "inherit" + | "plaintext-only" | "true" | false | true @@ -770,7 +780,7 @@ exports[`Box 1`] = ` cursor?: | "default" | "pointer" - dangerouslySetInnerHTML?: { __html: string; } + dangerouslySetInnerHTML?: { __html: string | TrustedHTML; } data?: DataAttributeMap datatype?: string dateTime?: string @@ -1100,9 +1110,7 @@ exports[`Box 1`] = ` onPointerDown?: PointerEventHandler onPointerDownCapture?: PointerEventHandler onPointerEnter?: PointerEventHandler - onPointerEnterCapture?: PointerEventHandler onPointerLeave?: PointerEventHandler - onPointerLeaveCapture?: PointerEventHandler onPointerMove?: PointerEventHandler onPointerMoveCapture?: PointerEventHandler onPointerOut?: PointerEventHandler @@ -1270,10 +1278,12 @@ exports[`Box 1`] = ` ref?: | (instance: HTMLElement | null) => void | RefObject + | string rel?: string required?: boolean resource?: string results?: number + rev?: string reversed?: boolean right?: 0 role?: @@ -1658,8 +1668,10 @@ exports[`BoxRenderer 1`] = ` | "s" | "samp" | "script" + | "search" | "section" | "select" + | "set" | "slot" | "small" | "source" @@ -2059,6 +2071,7 @@ exports[`Button 1`] = ` ref?: | (instance: HTMLButtonElement | null) => void | RefObject + | string size?: | "small" | "standard" @@ -2112,6 +2125,7 @@ exports[`ButtonIcon 1`] = ` ref?: | (instance: HTMLButtonElement | null) => void | RefObject + | string size?: | "large" | "small" @@ -2152,6 +2166,8 @@ exports[`ButtonLink 1`] = ` | "inline" | "list" | "none" + aria-braillelabel?: string + aria-brailleroledescription?: string aria-busy?: | "false" | "true" @@ -2165,6 +2181,7 @@ exports[`ButtonLink 1`] = ` | true aria-colcount?: number aria-colindex?: number + aria-colindextext?: string aria-colspan?: number aria-controls?: string aria-current?: @@ -2178,6 +2195,7 @@ exports[`ButtonLink 1`] = ` | false | true aria-describedby?: string + aria-description?: string aria-details?: string aria-disabled?: | "false" @@ -2284,6 +2302,7 @@ exports[`ButtonLink 1`] = ` aria-roledescription?: string aria-rowcount?: number aria-rowindex?: number + aria-rowindextext?: string aria-rowspan?: number aria-selected?: | "false" @@ -2302,19 +2321,22 @@ exports[`ButtonLink 1`] = ` aria-valuetext?: string autoCapitalize?: string autoCorrect?: string + autoFocus?: boolean autoSave?: string bleed?: boolean bleedY?: boolean children?: ReactNode color?: string + content?: string contentEditable?: | "false" | "inherit" + | "plaintext-only" | "true" | false | true contextMenu?: string - dangerouslySetInnerHTML?: { __html: string; } + dangerouslySetInnerHTML?: { __html: string | TrustedHTML; } data?: DataAttributeMap datatype?: string defaultChecked?: boolean @@ -2468,9 +2490,7 @@ exports[`ButtonLink 1`] = ` onPointerDown?: PointerEventHandler onPointerDownCapture?: PointerEventHandler onPointerEnter?: PointerEventHandler - onPointerEnterCapture?: PointerEventHandler onPointerLeave?: PointerEventHandler - onPointerLeaveCapture?: PointerEventHandler onPointerMove?: PointerEventHandler onPointerMoveCapture?: PointerEventHandler onPointerOut?: PointerEventHandler @@ -2520,13 +2540,13 @@ exports[`ButtonLink 1`] = ` onWheel?: WheelEventHandler onWheelCapture?: WheelEventHandler ping?: string - placeholder?: string prefix?: string property?: string radioGroup?: string ref?: | (instance: HTMLAnchorElement | null) => void | RefObject + | string referrerPolicy?: | "" | "no-referrer" @@ -2540,6 +2560,7 @@ exports[`ButtonLink 1`] = ` rel?: string resource?: string results?: number + rev?: string role?: | "alert" | "alertdialog" @@ -2705,6 +2726,7 @@ exports[`Checkbox 1`] = ` ref?: | (instance: HTMLInputElement | null) => void | RefObject + | string required?: boolean reserveMessageSpace?: boolean size?: @@ -2741,6 +2763,7 @@ exports[`CheckboxStandalone 1`] = ` ref?: | (instance: HTMLInputElement | null) => void | RefObject + | string required?: boolean size?: | "small" @@ -2955,6 +2978,7 @@ exports[`Dropdown 1`] = ` ref?: | (instance: HTMLSelectElement | null) => void | RefObject + | string required?: boolean reserveMessageSpace?: boolean secondaryLabel?: ReactNode @@ -3160,8 +3184,10 @@ exports[`Heading 1`] = ` | "s" | "samp" | "script" + | "search" | "section" | "select" + | "set" | "slot" | "small" | "source" @@ -3369,8 +3395,10 @@ exports[`Hidden 1`] = ` | "s" | "samp" | "script" + | "search" | "section" | "select" + | "set" | "slot" | "small" | "source" @@ -6467,6 +6495,8 @@ exports[`Link 1`] = ` | "inline" | "list" | "none" + aria-braillelabel?: string + aria-brailleroledescription?: string aria-busy?: | "false" | "true" @@ -6480,6 +6510,7 @@ exports[`Link 1`] = ` | true aria-colcount?: number aria-colindex?: number + aria-colindextext?: string aria-colspan?: number aria-controls?: string aria-current?: @@ -6493,6 +6524,7 @@ exports[`Link 1`] = ` | false | true aria-describedby?: string + aria-description?: string aria-details?: string aria-disabled?: | "false" @@ -6599,6 +6631,7 @@ exports[`Link 1`] = ` aria-roledescription?: string aria-rowcount?: number aria-rowindex?: number + aria-rowindextext?: string aria-rowspan?: number aria-selected?: | "false" @@ -6617,18 +6650,21 @@ exports[`Link 1`] = ` aria-valuetext?: string autoCapitalize?: string autoCorrect?: string + autoFocus?: boolean autoSave?: string children?: ReactNode className?: ClassValue color?: string + content?: string contentEditable?: | "false" | "inherit" + | "plaintext-only" | "true" | false | true contextMenu?: string - dangerouslySetInnerHTML?: { __html: string; } + dangerouslySetInnerHTML?: { __html: string | TrustedHTML; } data?: DataAttributeMap datatype?: string defaultChecked?: boolean @@ -6777,9 +6813,7 @@ exports[`Link 1`] = ` onPointerDown?: PointerEventHandler onPointerDownCapture?: PointerEventHandler onPointerEnter?: PointerEventHandler - onPointerEnterCapture?: PointerEventHandler onPointerLeave?: PointerEventHandler - onPointerLeaveCapture?: PointerEventHandler onPointerMove?: PointerEventHandler onPointerMoveCapture?: PointerEventHandler onPointerOut?: PointerEventHandler @@ -6829,13 +6863,13 @@ exports[`Link 1`] = ` onWheel?: WheelEventHandler onWheelCapture?: WheelEventHandler ping?: string - placeholder?: string prefix?: string property?: string radioGroup?: string ref?: | (instance: HTMLAnchorElement | null) => void | RefObject + | string referrerPolicy?: | "" | "no-referrer" @@ -6849,6 +6883,7 @@ exports[`Link 1`] = ` rel?: string resource?: string results?: number + rev?: string role?: | "alert" | "alertdialog" @@ -7265,6 +7300,7 @@ exports[`PasswordField 1`] = ` ref?: | (instance: HTMLInputElement | null) => void | RefObject + | string required?: boolean reserveMessageSpace?: boolean secondaryLabel?: ReactNode @@ -7303,6 +7339,7 @@ exports[`Radio 1`] = ` ref?: | (instance: HTMLInputElement | null) => void | RefObject + | string tone?: | "critical" | "neutral" @@ -7361,6 +7398,7 @@ exports[`RadioItem 1`] = ` ref?: | (instance: HTMLInputElement | null) => void | RefObject + | string value: | number | readonly string[] @@ -7740,8 +7778,10 @@ exports[`Text 1`] = ` | "s" | "samp" | "script" + | "search" | "section" | "select" + | "set" | "slot" | "small" | "source" @@ -7861,6 +7901,7 @@ exports[`TextField 1`] = ` ref?: | (instance: HTMLInputElement | null) => void | RefObject + | string required?: boolean reserveMessageSpace?: boolean secondaryLabel?: ReactNode @@ -7906,6 +7947,8 @@ exports[`TextLink 1`] = ` | "inline" | "list" | "none" + aria-braillelabel?: string + aria-brailleroledescription?: string aria-busy?: | "false" | "true" @@ -7919,6 +7962,7 @@ exports[`TextLink 1`] = ` | true aria-colcount?: number aria-colindex?: number + aria-colindextext?: string aria-colspan?: number aria-controls?: string aria-current?: @@ -7932,6 +7976,7 @@ exports[`TextLink 1`] = ` | false | true aria-describedby?: string + aria-description?: string aria-details?: string aria-disabled?: | "false" @@ -8038,6 +8083,7 @@ exports[`TextLink 1`] = ` aria-roledescription?: string aria-rowcount?: number aria-rowindex?: number + aria-rowindextext?: string aria-rowspan?: number aria-selected?: | "false" @@ -8056,17 +8102,20 @@ exports[`TextLink 1`] = ` aria-valuetext?: string autoCapitalize?: string autoCorrect?: string + autoFocus?: boolean autoSave?: string children?: ReactNode color?: string + content?: string contentEditable?: | "false" | "inherit" + | "plaintext-only" | "true" | false | true contextMenu?: string - dangerouslySetInnerHTML?: { __html: string; } + dangerouslySetInnerHTML?: { __html: string | TrustedHTML; } data?: DataAttributeMap datatype?: string defaultChecked?: boolean @@ -8222,9 +8271,7 @@ exports[`TextLink 1`] = ` onPointerDown?: PointerEventHandler onPointerDownCapture?: PointerEventHandler onPointerEnter?: PointerEventHandler - onPointerEnterCapture?: PointerEventHandler onPointerLeave?: PointerEventHandler - onPointerLeaveCapture?: PointerEventHandler onPointerMove?: PointerEventHandler onPointerMoveCapture?: PointerEventHandler onPointerOut?: PointerEventHandler @@ -8274,13 +8321,13 @@ exports[`TextLink 1`] = ` onWheel?: WheelEventHandler onWheelCapture?: WheelEventHandler ping?: string - placeholder?: string prefix?: string property?: string radioGroup?: string ref?: | (instance: HTMLAnchorElement | null) => void | RefObject + | string referrerPolicy?: | "" | "no-referrer" @@ -8294,6 +8341,7 @@ exports[`TextLink 1`] = ` rel?: string resource?: string results?: number + rev?: string role?: | "alert" | "alertdialog" @@ -8459,6 +8507,7 @@ exports[`Textarea 1`] = ` ref?: | (instance: HTMLTextAreaElement | null) => void | RefObject + | string required?: boolean reserveMessageSpace?: boolean secondaryLabel?: ReactNode @@ -8553,6 +8602,7 @@ exports[`Toggle 1`] = ` ref?: | (instance: HTMLInputElement | null) => void | RefObject + | string size?: | "small" | "standard" diff --git a/packages/generate-component-docs/src/generate.ts b/packages/generate-component-docs/src/generate.ts index 5467f0f995d..0a545c829cd 100644 --- a/packages/generate-component-docs/src/generate.ts +++ b/packages/generate-component-docs/src/generate.ts @@ -57,6 +57,24 @@ export interface HookDoc { returnType: NormalisedPropType; } +const unionAliases = { + ReactNode: [ + 'string', + 'number', + 'false', + 'true', + 'ReactElement>', + 'Iterable', + 'ReactPortal', + ], + ReactNodeNoStrings: [ + 'false', + 'true', + 'ReactElement>', + 'ReactNodeArray', + ], +} as const; + export type ExportDoc = ComponentDoc | HookDoc; function extractTypeInfo(file: string, options: CompilerOptions) { @@ -223,28 +241,11 @@ function extractTypeInfo(file: string, options: CompilerOptions) { checker.typeToString(unionItem), ); - if ( - isEqual(types.slice(0, 7), [ - 'string', - 'number', - 'false', - 'true', - 'ReactElement>', - 'ReactFragment', - 'ReactPortal', - ]) - ) { + if (isEqual(types.slice(0, 7), unionAliases.ReactNode)) { return 'ReactNode'; } - if ( - isEqual(types, [ - 'false', - 'true', - 'ReactElement>', - 'ReactNodeArray', - ]) - ) { + if (isEqual(types, unionAliases.ReactNodeNoStrings)) { return 'ReactNodeNoStrings'; }