update headless ui (#320)

package.json

@@ -57,7 +57,7 @@
     "@aboutbits/react-material-icons": "^2.0.0",
     "@aboutbits/react-toolbox": "^0.2.5",
     "@floating-ui/react": "^0.26.10",
-    "@headlessui/react": "^1.7.18",
+    "@headlessui/react": "^2.1.9",
     "axios": "^1.6.8",
     "axios-mock-adapter": "^2.0.0",
     "classnames": "^2.5.1",

src/components/dialog/Dialog/Dialog.tsx

@@ -1,4 +1,7 @@
-import { Dialog as HeadlessDialog } from '@headlessui/react'
+import {
+  Dialog as HeadlessDialog,
+  DialogPanel as HeadlessDialogPanel,
+} from '@headlessui/react'
 import classNames from 'classnames'
 import { MutableRefObject, ReactElement, useRef } from 'react'
 import { useTheme } from '../../../framework'
@@ -49,7 +52,7 @@ export function Dialog({
         onClose={onDismiss ?? (() => undefined)}
         {...props}
       >
-        <HeadlessDialog.Panel
+        <HeadlessDialogPanel
           ref={panelRef}
           aria-label={ariaLabel}
           className={classNames(
@@ -62,7 +65,7 @@ export function Dialog({
           )}
         >
           {children}
-        </HeadlessDialog.Panel>
+        </HeadlessDialogPanel>
       </HeadlessDialog>
     </DialogContext.Provider>
   )

src/components/menu/Menu.tsx

@@ -5,7 +5,11 @@ import {
   offset,
   useFloating,
 } from '@floating-ui/react'
-import { Menu as HeadlessMenu } from '@headlessui/react'
+import {
+  Menu as HeadlessMenu,
+  MenuButton as HeadlessMenuButton,
+  MenuItems as HeadlessMenuItems,
+} from '@headlessui/react'
 import classNames from 'classnames'
 import { Fragment, ReactElement, ReactNode, ReactPortal } from 'react'
 import { useTheme } from '../../framework'
@@ -52,7 +56,7 @@ export type MenuProps = {
 
 /**
  * A dropdown menu that uses the `Menu` component of [HeadlessUI](https://headlessui.com/react/dialog) and the anchor positioning of [Floating UI](https://floating-ui.com).
-Menu items are added as children using the [MenuItem](/docs/components-menu-menuitem--docs) component.
+ Menu items are added as children using the [MenuItem](/docs/components-menu-menuitem--docs) component.
  */
 export function Menu({ className, children, button, placement }: MenuProps) {
   const { menu } = useTheme()
@@ -72,23 +76,23 @@ export function Menu({ className, children, button, placement }: MenuProps) {
     <HeadlessMenu as="div" className={classNames(menu.container, className)}>
       {({ open }) => (
         <>
-          <HeadlessMenu.Button as={Fragment} ref={refs.setReference}>
+          <HeadlessMenuButton as={Fragment} ref={refs.setReference}>
             {typeof button === 'function'
               ? button({
                   placement: placementUnionToPlacementEnum(finalPlacement),
                   open,
                 })
               : button}
-          </HeadlessMenu.Button>
+          </HeadlessMenuButton>
           {open && (
             <FloatingPortal>
-              <HeadlessMenu.Items
+              <HeadlessMenuItems
                 ref={refs.setFloating}
                 className={menu.list.base}
                 style={floatingStyles}
               >
                 {children}
-              </HeadlessMenu.Items>
+              </HeadlessMenuItems>
             </FloatingPortal>
           )}
         </>