Dropdown state handling is missing features!

[TheFrenchBuck]

Hi team,

I used to really enjoy this library, but over time, I have found several major usability issues.

I am very disappointed and frustrated that simple onChange props, as well as onClose={handleMenuClose} and onOpen={handleOpen}, are not being handled.

To make this even more frustrating, this feature exists in the Dialog component, so why is it taking so long to be available in other components?

In this case, I want to change a state that originally came from the parent. It should be simple to do that, but it is not !

import React, { Dispatch, Fragment, MutableRefObject, SetStateAction, useCallback, useEffect, useRef, useState } from "react";
import Menu from "@/components/Base/Headless/Menu";

type PropsTypes = {
  columnData;
  colDropDownState: {
    dropDownOpen: boolean;
    setDropDownOpen: Dispatch<SetStateAction<boolean>>;
  }
}
const DropdownExample = ({ columnData,colDropDownState }:PropsTypes) => {
  const [isMenuVisible, setMenuVisible] = useState(false);

  // Handle closing the menu
  const closeMenu = () => {
    setMenuVisible(false);
    // want i want to do when menu is closed
    colDropDownState.setDropDownOpen(false)
  };

  // Handle opening the menu
  const openMenu = () => {
    setMenuVisible(true);
    // want i want to do when menu is closed
    colDropDownState.setDropDownOpen(true)

  };

  // Example action handlers
  const handleEdit = (index) => {
    console.log("Edit Action for column:", index);
  };

  const handleAdd = (index) => {
    console.log("Add Action for column:", index);
  };

  const handleDelete = (index) => {
    console.log("Delete Action for column:", index);
  };

  // Navigation items for the menu
  const menuItems = [
    {
      name: "Edit",
      icon: "Pencil",
      action: handleEdit,
      current: false,
    },
    {
      name: "Add",
      icon: "Plus",
      action: handleAdd,
      current: false,
    },
    {
      name: "Delete",
      icon: "Trash2",
      action: handleDelete,
      current: false,
    },
  ];

  return (
    <div className="flex justify-center z-50 w-full h-7 items-center">
      <Fragment>
          <Menu
            onClose={closeMenu} // this not supported !!!
            onOpen={openMenu} // this not supported !!!
            className={`dropcolumn${columnData.columnIndex}`}
          >
            <Menu.Items className="w-40 py-2 mt-2 rounded-lg shadow-xl bg-white">
              {menuItems.map((item, index) => (
                <Menu.Item
                  key={index}
                  className={"p-0 flex w-full"}
                  onClick={() => item.action(columnData.columnIndex)}
                >
                  <div className='flex items-center cursor-pointer flex-grow'>
                    <Lucide icon={item.icon} className="w-4 h-4 mr-2" />
                    {item.name}
                  </div>
                </Menu.Item>
              ))}
            </Menu.Items>
          </Menu>
      </Fragment>
    </div>
  );
};

export default DropdownExample;