Fix unknown properties type issues

[MAILPOET-5102]

mailpoet/assets/js/src/automation/editor/components/header/document_actions.tsx

@@ -1,8 +1,7 @@
-import { ComponentProps, ComponentType, Ref } from 'react';
 import {
   __experimentalText as Text,
   Button,
-  Dropdown as WpDropdown,
+  Dropdown,
   VisuallyHidden,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
@@ -14,13 +13,6 @@ import { AutomationStatus } from '../../../listing/automation';
 
 // See: https://github.com/WordPress/gutenberg/blob/eff0cab2b3181c004dbd15398e570ecec28a3726/packages/edit-site/src/components/header/document-actions/index.js
 
-// property "popoverProps" is missing in WpDropdown type definition
-const Dropdown: ComponentType<
-  ComponentProps<typeof WpDropdown> & {
-    popoverProps?: { anchorRef?: Ref<HTMLElement> };
-  }
-> = WpDropdown;
-
 function DocumentActions({ children }): JSX.Element {
   const { automationName, automationStatus, showIconLabels } = useSelect(
     (select) => ({
@@ -48,9 +40,9 @@ function DocumentActions({ children }): JSX.Element {
         {children && (
           <Dropdown
             popoverProps={{
-              anchorRef: titleRef.current,
+              placement: 'bottom-start',
+              anchor: titleRef.current,
             }}
-            position="bottom center"
             renderToggle={({ isOpen, onToggle }) => (
               <>
                 <a

mailpoet/assets/js/src/automation/editor/components/panel/step-name.tsx

@@ -19,6 +19,9 @@ export function StepName({
       className="mailpoet-step-name-dropdown"
       contentClassName="mailpoet-step-name-popover"
       position="bottom left"
+      popoverProps={{
+        placement: 'bottom-start',
+      }}
       renderToggle={({ isOpen, onToggle }) => (
         <PlainBodyTitle
           title={currentName.length > 0 ? currentName : defaultName}

mailpoet/assets/js/src/types/index.ts

@@ -1,6 +1,9 @@
-import { ComponentProps, ComponentType } from 'react';
+import { ComponentProps, ComponentPropsWithoutRef, ComponentType } from 'react';
 import { ColorPalette, FontSizePicker } from '@wordpress/components';
 import { ConfirmDialog } from '@wordpress/components/build-types/confirm-dialog';
+import { FormTokenFieldProps } from '@wordpress/components/build-types/form-token-field/types';
+// eslint-disable-next-line import/no-named-default
+import { default as WPPopover } from '@wordpress/components/build-types/popover';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as keyboardShortutsStore } from '@wordpress/keyboard-shortcuts';
 import { store as interfaceStore } from '@wordpress/interface';
@@ -47,6 +50,33 @@ declare module '@wordpress/components' {
   export const __experimentalConfirmDialog: ComponentType<
     ComponentProps<typeof ConfirmDialog>
   >;
+
+  // New property for declaring forward compatibility is not set on types
+  // eslint-disable-next-line @typescript-eslint/no-shadow,@typescript-eslint/no-namespace
+  export namespace CustomSelectControl {
+    interface Props {
+      __nextUnconstrainedWidth: boolean;
+    }
+  }
+
+  // New property on Dropdown is not set in @types/wordpress__components
+  // eslint-disable-next-line @typescript-eslint/no-shadow,@typescript-eslint/no-namespace
+  export namespace Dropdown {
+    interface Props {
+      popoverProps?: Omit<
+        ComponentPropsWithoutRef<typeof WPPopover>,
+        'children'
+      >;
+    }
+  }
+
+  // New properties on FormTokenField is not set in @types/wordpress__components
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  export namespace FormTokenField {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface -- There is no other usable way hot to tell define interface using other interface
+    export interface Props extends FormTokenFieldProps {}
+  }
+
   export const __experimentalText: any;
   export const __unstableComposite: typeof Composite;
   export const __unstableCompositeGroup: typeof CompositeGroup;