feat(dropdownitems): add DropdownItemCheckbox and DropdownItemRadio

[ChrisCoastal]

re #916 and #941

• I have followed the Your First Code Contribution section of the Contributing guide

This commit follows from the conversation in #941 and #916 - adding functionality to the Dropdown component to include Dropdown.ItemRadio and Dropdown.ItemCheckbox.
It also fixes a bug in DropdownItem.tsx that will only ever set the selectIndex to null. Currently, however, selectedIndex isn't used anywhere, so possibly it should just be removed (or maybe there is conditional styling that should be added to reflect its state)?

Related to #916 and #941

There are no breaking API changes. Both FloatingUI Typeahead functionality and Arrow Navigation will work for the new item components (tabbing through the dropdown also works) in accordance with WCAG.

Additional considerations:

• Storybook will still need to be updated to reflect the new component options (I wasn't able to get the Storybook dev server running, but am happy to do that work as well if the changes look good).
• These changes don't address any issues Flowbite users are running into when trying to place text inputs as children of DropdownItem (and the FloatingUI Typeahead catching all the input keystrokes). The component could possibly be updated to not accept children or offer a warning in development.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
flowbite-react	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 26, 2023 8:23pm

[rluders]

@ChrisCoastal looks promising. Could you please rebase it with master and also add an example to the documentation? Thanks! :)

[rluders]

@ChrisCoastal gently ping. :)

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (7461173) 99.54% compared to head (51cc4b2) 93.75%.
Report is 162 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1095      +/-   ##
==========================================
- Coverage   99.54%   93.75%   -5.80%     
==========================================
  Files         163      215      +52     
  Lines        6621     9274    +2653     
  Branches      401      507     +106     
==========================================
+ Hits         6591     8695    +2104     
- Misses         30      579     +549     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[ChrisCoastal]

Thanks for the gentle bump @rluders. I've done the rebase and updated the docs. Please let me know what you think and if I can make any further changes. 🙃🙏

[tulup-conner]

I'm not a fan of this idea, personally. I think the best direction we could take here is to revert <Dropdown.Item> to <li> and allow the user to create whatever they want. There is a spec on flowbite.com for Dropdowns with checkboxes and Dropdowns with radios, but I think we can easily achieve that by adding a <Checkbox/> inside each <Dropdown.Item>. We can provide the simple JSX template for that as opposed to implementing functionality to fully control them, which adds complexity to the API that I just don't think serves any purpose.

Thoughts on this?

[ChrisCoastal]

@tulup-conner I agree with you. I think that it is maybe best not to implement the Dropdown.Checkbox and Dropdown.Radio in the React lib at all. As long as Floating UI is being used (for Typeahead and Focus Trapping within the Dropdown) the element within each <li> that Floating interacts with must be a <button> (and an <input> should not be placed within <button> according to the W3C spec).

Honestly, as long as Floating UI is being used as it is now, my feeling would be that the Dropdown.Item component should not accept children at all, but rather props that define text and/or icon within. This would put guardrails on how the component is used.

I think this would also address what was actually at the heart of the issue that started this: devs trying to put <input type='text'> within the Dropdown.Item component and wondering why the text field is unresponsive.

Whether or not that kind of implementation is consistent with the API you want for the lib (passing props rather than children), I'm not sure.