stubs/inertia-react-ts/app/javascript/Components/Dropdown.tsx in kaze-0.5.0 vs stubs/inertia-react-ts/app/javascript/Components/Dropdown.tsx in kaze-0.6.0

@@ -1,99 +1,131 @@
-import { useState, createContext, useContext, Fragment, PropsWithChildren, Dispatch, SetStateAction } from 'react';
-import { Link, InertiaLinkProps } from '@inertiajs/react';
-import { Transition } from '@headlessui/react';
+import {
+  useState,
+  createContext,
+  useContext,
+  Fragment,
+  PropsWithChildren,
+  Dispatch,
+  SetStateAction,
+} from 'react'
+import { Link, InertiaLinkProps } from '@inertiajs/react'
+import { Transition } from '@headlessui/react'
 
 const DropDownContext = createContext<{
-    open: boolean;
-    setOpen: Dispatch<SetStateAction<boolean>>;
-    toggleOpen: () => void;
+  open: boolean
+  setOpen: Dispatch<SetStateAction<boolean>>
+  toggleOpen: () => void
 }>({
-    open: false,
-    setOpen: () => {},
-    toggleOpen: () => {},
-});
+  open: false,
+  setOpen: () => {},
+  toggleOpen: () => {},
+})
 
 const Dropdown = ({ children }: PropsWithChildren) => {
-    const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(false)
 
-    const toggleOpen = () => {
-        setOpen((previousState) => !previousState);
-    };
+  const toggleOpen = () => {
+    setOpen((previousState) => !previousState)
+  }
 
-    return (
-        <DropDownContext.Provider value={{ open, setOpen, toggleOpen }}>
-            <div className="relative">{children}</div>
-        </DropDownContext.Provider>
-    );
-};
+  return (
+    <DropDownContext.Provider value={{ open, setOpen, toggleOpen }}>
+      <div className="relative">{children}</div>
+    </DropDownContext.Provider>
+  )
+}
 
 const Trigger = ({ children }: PropsWithChildren) => {
-    const { open, setOpen, toggleOpen } = useContext(DropDownContext);
+  const { open, setOpen, toggleOpen } = useContext(DropDownContext)
 
-    return (
-        <>
-            <div onClick={toggleOpen}>{children}</div>
+  return (
+    <>
+      <div onClick={toggleOpen}>{children}</div>
 
-            {open && <div className="fixed inset-0 z-40" onClick={() => setOpen(false)}></div>}
-        </>
-    );
-};
+      {open && (
+        <div
+          className="fixed inset-0 z-40"
+          onClick={() => setOpen(false)}
+        ></div>
+      )}
+    </>
+  )
+}
 
-const Content = ({ align = 'right', width = '48', contentClasses = 'py-1 bg-white dark:bg-gray-700', children }: PropsWithChildren<{ align?: 'left'|'right', width?: '48', contentClasses?: string }>) => {
-    const { open, setOpen } = useContext(DropDownContext);
+const Content = ({
+  align = 'right',
+  width = '48',
+  contentClasses = 'py-1 bg-white dark:bg-gray-700',
+  children,
+}: PropsWithChildren<{
+  align?: 'left' | 'right'
+  width?: '48'
+  contentClasses?: string
+}>) => {
+  const { open, setOpen } = useContext(DropDownContext)
 
-    let alignmentClasses = 'origin-top';
+  let alignmentClasses = 'origin-top'
 
-    if (align === 'left') {
-        alignmentClasses = 'ltr:origin-top-left rtl:origin-top-right start-0';
-    } else if (align === 'right') {
-        alignmentClasses = 'ltr:origin-top-right rtl:origin-top-left end-0';
-    }
+  if (align === 'left') {
+    alignmentClasses = 'ltr:origin-top-left rtl:origin-top-right start-0'
+  } else if (align === 'right') {
+    alignmentClasses = 'ltr:origin-top-right rtl:origin-top-left end-0'
+  }
 
-    let widthClasses = '';
+  let widthClasses = ''
 
-    if (width === '48') {
-        widthClasses = 'w-48';
-    }
+  if (width === '48') {
+    widthClasses = 'w-48'
+  }
 
-    return (
-        <>
-            <Transition
-                as={Fragment}
-                show={open}
-                enter="transition ease-out duration-200"
-                enterFrom="opacity-0 scale-95"
-                enterTo="opacity-100 scale-100"
-                leave="transition ease-in duration-75"
-                leaveFrom="opacity-100 scale-100"
-                leaveTo="opacity-0 scale-95"
-            >
-                <div
-                    className={`absolute z-50 mt-2 rounded-md shadow-lg ${alignmentClasses} ${widthClasses}`}
-                    onClick={() => setOpen(false)}
-                >
-                    <div className={`rounded-md ring-1 ring-black ring-opacity-5 ` + contentClasses}>{children}</div>
-                </div>
-            </Transition>
-        </>
-    );
-};
-
-const DropdownLink = ({ className = '', children, ...props }: InertiaLinkProps) => {
-    return (
-        <Link
-            {...props}
+  return (
+    <>
+      <Transition
+        as={Fragment}
+        show={open}
+        enter="transition ease-out duration-200"
+        enterFrom="opacity-0 scale-95"
+        enterTo="opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="opacity-100 scale-100"
+        leaveTo="opacity-0 scale-95"
+      >
+        <div
+          className={`absolute z-50 mt-2 rounded-md shadow-lg ${alignmentClasses} ${widthClasses}`}
+          onClick={() => setOpen(false)}
+        >
+          <div
             className={
-                'block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out ' +
-                className
+              `rounded-md ring-1 ring-black ring-opacity-5 ` + contentClasses
             }
-        >
+          >
             {children}
-        </Link>
-    );
-};
+          </div>
+        </div>
+      </Transition>
+    </>
+  )
+}
 
-Dropdown.Trigger = Trigger;
-Dropdown.Content = Content;
-Dropdown.Link = DropdownLink;
+const DropdownLink = ({
+  className = '',
+  children,
+  ...props
+}: InertiaLinkProps) => {
+  return (
+    <Link
+      {...props}
+      className={
+        'block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out ' +
+        className
+      }
+    >
+      {children}
+    </Link>
+  )
+}
 
-export default Dropdown;
+Dropdown.Trigger = Trigger
+Dropdown.Content = Content
+Dropdown.Link = DropdownLink
+
+export default Dropdown