🤖 Merge PR DefinitelyTyped#72963 fix(tonic-ui__react) newly added props are optional by @derekhawker

Author: derekhawker

types/tonic-ui__react/index.d.ts

@@ -260,7 +260,7 @@ export interface AccordionProps extends Omit<TonicProps, "children"> {
 
 export interface AccordionContentProps extends TonicProps {
     TransitionComponent?: ComponentType;
-    TransitionProps?: { appear: boolean };
+    TransitionProps?: Record<string, unknown> | Omit<TransitionProps, "children">;
 }
 
 export interface AccordionHeaderProps extends TonicProps {
@@ -466,12 +466,12 @@ export interface DrawerProps extends Omit<TonicProps, "children"> {
 
 export interface DrawerContentProps extends TonicProps {
     TransitionComponent?: ComponentType;
-    TransitionProps?: { appear: boolean };
+    TransitionProps?: Record<string, unknown> | Omit<TransitionProps, "children">;
 }
 
 export interface DrawerOverlayProps extends TonicProps {
     TransitionComponent?: ComponentType;
-    TransitionProps?: { appear: boolean };
+    TransitionProps?: Record<string, unknown> | Omit<TransitionProps, "children">;
 }
 
 export interface FlexProps extends
@@ -575,7 +575,7 @@ export interface MenuContentProps extends TonicProps {
     PopperComponent: ComponentType;
     PopperProps: Record<string, unknown>;
     TransitionComponent?: ComponentType;
-    TransitionProps?: { appear: boolean };
+    TransitionProps?: Record<string, unknown> | Omit<TransitionProps, "children">;
 }
 
 export interface MenuGroupProps extends TonicProps {
@@ -588,10 +588,10 @@ export interface MenuItemProps extends TonicProps {
 }
 
 export interface MenuListProps extends TonicProps {
-    PopperComponent: ComponentType;
-    PopperProps: Record<string, unknown>;
+    PopperComponent?: ComponentType;
+    PopperProps?: Record<string, unknown>;
     TransitionComponent?: ComponentType;
-    TransitionProps?: { appear: boolean };
+    TransitionProps?: Record<string, unknown> | Omit<TransitionProps, "children">;
 }
 
 export interface MenuToggleProps extends Omit<TonicProps, "children"> {
@@ -601,6 +601,7 @@ export interface MenuToggleProps extends Omit<TonicProps, "children"> {
             state: { getMenuToggleProps: () => _ExtendedCSSProperties },
             props: _ExtendedCSSProperties,
         ) => ReactNode);
+    disabled?: boolean;
 }
 
 export interface MenuToggleIconProps extends Omit<TonicProps, "children"> {
@@ -631,12 +632,12 @@ export interface ModalProps extends Omit<TonicProps, "children"> {
 
 export interface ModalContentProps extends TonicProps {
     TransitionComponent?: ComponentType;
-    TransitionProps?: { appear: boolean };
+    TransitionProps?: Record<string, unknown> | Omit<TransitionProps, "children">;
 }
 
 export interface ModalOverlayProps extends TonicProps {
     TransitionComponent?: ComponentType;
-    TransitionProps?: { appear: boolean };
+    TransitionProps?: Record<string, unknown> | Omit<TransitionProps, "children">;
 }
 
 export interface OverflowTooltipProps extends Omit<TonicProps, "children"> {
@@ -750,6 +751,7 @@ export interface PopoverContentProps extends TonicProps {
 }
 
 export interface PopoverTriggerProps extends Omit<TonicProps, "children"> {
+    shouldWrapChildren?: boolean;
     children:
         | ReactNode
         | ((args: { getPopoverTriggerProps: () => TonicProps }) => ReactNode);

types/tonic-ui__react/tonic-ui__react-tests.tsx

@@ -2,7 +2,6 @@ import {
     Accordion,
     AccordionContent,
     AccordionItem,
-    AccordionItemProps,
     AccordionToggle,
     AccordionToggleIcon,
     Box,
@@ -16,6 +15,11 @@ import {
     Input,
     LightMode,
     Link,
+    Menu,
+    MenuItem,
+    MenuList,
+    MenuToggle,
+    MenuToggleIcon,
     Modal,
     ModalBody,
     ModalContent,
@@ -404,8 +408,11 @@ const TreeApp = () => {
 
 const PopoverTest = () => {
     return (
-        <Popover>
-            <PopoverTrigger>
+        <Popover
+            disabled={false} // Use the `disabled` prop to control whether the popover will be displayed
+            trigger="hover"
+        >
+            <PopoverTrigger shouldWrapChildren>
                 <Button>Open Popover</Button>
             </PopoverTrigger>
             <PopoverContent
@@ -450,3 +457,27 @@ const AccordionApp = () => {
         </Accordion>
     );
 };
+
+const MenuApp = () => {
+    return (
+        <Menu>
+            <MenuToggle disabled={true}>
+                {({ getMenuToggleProps }) => (
+                    <Button {...getMenuToggleProps()}>
+                        <MenuToggleIcon />
+                    </Button>
+                )}
+            </MenuToggle>
+            <MenuList
+                width="max-content"
+                PopperComponent={PopoverArrow}
+                PopperProps={{ arrowWidth: 20, arrowHeight: 20, randomProp: 123 }}
+                TransitionComponent={Box}
+                TransitionProps={{ appear: false, in: false, randomProp: 123 }}
+            >
+                <MenuItem>List item 1</MenuItem>
+                <MenuItem>List item 2</MenuItem>
+            </MenuList>
+        </Menu>
+    );
+};