change dropdown to tsx

Parts/DropDown.tsx

@@ -1,9 +1,9 @@
 import React, { cloneElement, isValidElement, useEffect, useImperativeHandle, useRef, useState } from "react";
-import { createPopper } from "@popperjs/core";
+import { createPopper, Placement } from "@popperjs/core";
 import { usePopper } from 'react-popper';
 
 import tw, { styled } from "twin.macro"
- 
+
 
 import { colors, colorsDisabled, colorsHover, textColors, textColorsHover } from "./Colors";
 
@@ -16,7 +16,16 @@ const DropDownItem = styled.button(({ type }) => [
 ])
 export { DropDownItem }
 
-let Dropdown = React.forwardRef(({ children, dropdownCss, onValueChanged, button, buttonProps, popper, placement, hover, ...props }, ref) => {
+let Dropdown = React.forwardRef(({ children, dropdownCss = null, onValueChanged = null, button, buttonProps = null, popper = null, placement = null, hover = null, ...props }: {
+  children: React.ReactNode,
+  dropdownCss?: any,
+  onValueChanged?: (value: boolean) => void,
+  button?: React.ReactNode,
+  buttonProps?: any,
+  popper?: any,
+  placement?: Placement,
+  hover?: boolean,
+}, ref) => {
   // dropdown props
   const [overButton, setOverButton] = React.useState(false);
   const [overDropDown, setOverDropDown] = React.useState(false);
@@ -85,11 +94,14 @@ let Dropdown = React.forwardRef(({ children, dropdownCss, onValueChanged, button
   let childrenWithProps = React.Children.map(children, (item) => {
     if (!item)
       return;
+    //check that item is not only ReactNode
+    if (!isValidElement(item))
+      return;
     let click = item.props?.onClick;
     let close = item.props?.closeOnClick ?? true;
-    return cloneElement(item, { key: children.indexOf ? children.indexOf(item) : 0, onClick: () => { close && closeDropdownPopover(); click && click() } });
-  });
 
+    return cloneElement(item as any, { key: Array.isArray(children) ? children.indexOf(item) : 0, onClick: () => { close && closeDropdownPopover(); click && click() } });
+  });
   return (
     <>
       <button
@@ -116,7 +128,7 @@ let Dropdown = React.forwardRef(({ children, dropdownCss, onValueChanged, button
           dropdownPopoverShow ? tw`block` : tw`hidden`,
           tw`bg-trinary text-base z-50 float-left rounded-xl overflow-hidden text-left shadow-lg`,
           dropdownCss,
-          props.css
+          (props as any).css
         ]}
       >
         {childrenWithProps}