Bump @headlessui/react to v2 (#389)

* bump `@headlessui/react` version * remove `as={Fragment}` from `<Transition>` and `<TransitionChild>` This is now the default in Headless UI v2. * replace dot notation with concrete imports
laravel · Jun 6, 2024 · 438424c · 438424c
1 parent b3500ea
commit 438424c
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 27 deletions.
diff --git a/src/Console/InstallsInertiaStacks.php b/src/Console/InstallsInertiaStacks.php
@@ -190,7 +190,7 @@ protected function installInertiaReactStack()
  // NPM Packages...
  $this->updateNodePackages(function ($packages) {
  return [
- '@headlessui/react' => '^1.4.2',
+ '@headlessui/react' => '^2.0.0',
  '@inertiajs/react' => '^1.0.0',
  '@tailwindcss/forms' => '^0.5.3',
  '@vitejs/plugin-react' => '^4.2.0',

diff --git a/stubs/inertia-react-ts/resources/js/Components/Dropdown.tsx b/stubs/inertia-react-ts/resources/js/Components/Dropdown.tsx
@@ -1,4 +1,4 @@
-import { useState, createContext, useContext, Fragment, PropsWithChildren, Dispatch, SetStateAction } from 'react';
+import { useState, createContext, useContext, PropsWithChildren, Dispatch, SetStateAction } from 'react';
 import { Link, InertiaLinkProps } from '@inertiajs/react';
 import { Transition } from '@headlessui/react';
 
@@ -58,7 +58,6 @@ const Content = ({ align = 'right', width = '48', contentClasses = 'py-1 bg-whit
  return (
  <>
  <Transition
- as={Fragment}
  show={open}
  enter="transition ease-out duration-200"
  enterFrom="opacity-0 scale-95"

diff --git a/stubs/inertia-react-ts/resources/js/Components/Modal.tsx b/stubs/inertia-react-ts/resources/js/Components/Modal.tsx
@@ -1,5 +1,5 @@
-import { Fragment, PropsWithChildren } from 'react';
-import { Dialog, Transition } from '@headlessui/react';
+import { PropsWithChildren } from 'react';
+import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react';
 
 export default function Modal({
  children,
@@ -28,15 +28,14 @@ export default function Modal({
  }[maxWidth];
 
  return (
- <Transition show={show} as={Fragment} leave="duration-200">
+ <Transition show={show} leave="duration-200">
  <Dialog
  as="div"
  id="modal"
  className="fixed inset-0 flex overflow-y-auto px-4 py-6 sm:px-0 items-center z-50 transform transition-all"
  onClose={close}
  >
- <Transition.Child
- as={Fragment}
+ <TransitionChild
  enter="ease-out duration-300"
  enterFrom="opacity-0"
  enterTo="opacity-100"
@@ -45,23 +44,22 @@ export default function Modal({
  leaveTo="opacity-0"
  >
  <div className="absolute inset-0 bg-gray-500/75 dark:bg-gray-900/75" />
- </Transition.Child>
+ </TransitionChild>
 
- <Transition.Child
- as={Fragment}
+ <TransitionChild
  enter="ease-out duration-300"
  enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
  enterTo="opacity-100 translate-y-0 sm:scale-100"
  leave="ease-in duration-200"
  leaveFrom="opacity-100 translate-y-0 sm:scale-100"
  leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
  >
- <Dialog.Panel
+ <DialogPanel
  className={`mb-6 bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto ${maxWidthClass}`}
  >
  {children}
- </Dialog.Panel>
- </Transition.Child>
+ </DialogPanel>
+ </TransitionChild>
  </Dialog>
  </Transition>
  );

diff --git a/stubs/inertia-react/resources/js/Components/Dropdown.jsx b/stubs/inertia-react/resources/js/Components/Dropdown.jsx
@@ -1,4 +1,4 @@
-import { useState, createContext, useContext, Fragment } from 'react';
+import { useState, createContext, useContext } from 'react';
 import { Link } from '@inertiajs/react';
 import { Transition } from '@headlessui/react';
 
@@ -50,7 +50,6 @@ const Content = ({ align = 'right', width = '48', contentClasses = 'py-1 bg-whit
  return (
  <>
  <Transition
- as={Fragment}
  show={open}
  enter="transition ease-out duration-200"
  enterFrom="opacity-0 scale-95"

diff --git a/stubs/inertia-react/resources/js/Components/Modal.jsx b/stubs/inertia-react/resources/js/Components/Modal.jsx
@@ -1,5 +1,4 @@
-import { Fragment } from 'react';
-import { Dialog, Transition } from '@headlessui/react';
+import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react';
 
 export default function Modal({ children, show = false, maxWidth = '2xl', closeable = true, onClose = () => {} }) {
  const close = () => {
@@ -17,15 +16,14 @@ export default function Modal({ children, show = false, maxWidth = '2xl', closea
  }[maxWidth];
 
  return (
- <Transition show={show} as={Fragment} leave="duration-200">
+ <Transition show={show} leave="duration-200">
  <Dialog
  as="div"
  id="modal"
  className="fixed inset-0 flex overflow-y-auto px-4 py-6 sm:px-0 items-center z-50 transform transition-all"
  onClose={close}
  >
- <Transition.Child
- as={Fragment}
+ <TransitionChild
  enter="ease-out duration-300"
  enterFrom="opacity-0"
  enterTo="opacity-100"
@@ -34,23 +32,22 @@ export default function Modal({ children, show = false, maxWidth = '2xl', closea
  leaveTo="opacity-0"
  >
  <div className="absolute inset-0 bg-gray-500/75 dark:bg-gray-900/75" />
- </Transition.Child>
+ </TransitionChild>
 
- <Transition.Child
- as={Fragment}
+ <TransitionChild
  enter="ease-out duration-300"
  enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
  enterTo="opacity-100 translate-y-0 sm:scale-100"
  leave="ease-in duration-200"
  leaveFrom="opacity-100 translate-y-0 sm:scale-100"
  leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
  >
- <Dialog.Panel
+ <DialogPanel
  className={`mb-6 bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto ${maxWidthClass}`}
  >
  {children}
- </Dialog.Panel>
- </Transition.Child>
+ </DialogPanel>
+ </TransitionChild>
  </Dialog>
  </Transition>
  );