chore(wip-deps): bump headless

PHS-TSA · May 9, 2024 · 304489c · 304489c
1 parent 0a0797c
commit 304489c
Show file tree

Hide file tree

Showing 7 changed files with 121 additions and 79 deletions.
diff --git a/deno.json b/deno.json
@@ -26,7 +26,7 @@
     "$fresh/": "https://deno.land/x/fresh@1.6.8/",
     "$tabler_icons/": "https://deno.land/x/tabler_icons_tsx@0.0.6/tsx/",
     "@deno/gfm": "https://deno.land/x/gfm@0.6.0/mod.ts",
-    "@headlessui/react": "https://esm.sh/v135/*@headlessui/react@1.7.17",
+    "@headlessui/react": "https://esm.sh/v135/*@headlessui/react@2.0.3",
     "@headlessui/tailwindcss": "npm:@headlessui/tailwindcss@0.2.0",
     "@mdx-js/mdx": "npm:@mdx-js/mdx@3.0.1",
     "@preact/signals": "https://esm.sh/v135/*@preact/signals@1.2.3",
@@ -63,8 +63,22 @@
   },
   "scopes": {
     "https://esm.sh/v135/": {
+      "@floating-ui/core": "https://esm.sh/v135/*@floating-ui/core@1.6.1",
+      "@floating-ui/dom": "https://esm.sh/v135/*@floating-ui/dom@1.6.5",
+      "@floating-ui/react": "https://esm.sh/v135/*@floating-ui/react@0.26.13",
+      "@floating-ui/react/": "https://esm.sh/v135/*@floating-ui/react@0.26.13/",
+      "@floating-ui/react-dom": "https://esm.sh/v135/*@floating-ui/react-dom@2.0.9",
+      "@floating-ui/utils": "https://esm.sh/v135/*@floating-ui/utils@0.2.2",
+      "@floating-ui/utils/": "https://esm.sh/v135/*@floating-ui/utils@0.2.2/",
+      "@react-aria/focus": "https://esm.sh/v135/*@react-aria/focus@3.17.0",
+      "@react-aria/interactions": "https://esm.sh/v135/*@react-aria/interactions@3.21.2",
+      "@react-aria/ssr": "https://esm.sh/v135/*@react-aria/ssr@3.9.3",
+      "@react-aria/utils": "https://esm.sh/v135/*@react-aria/utils@3.24.0",
+      "@react-stately/utils": "https://esm.sh/v135/*@react-stately/utils@3.10.0",
       "@preact/signals-react": "https://esm.sh/v135/*@preact/signals@1.2.3",
       "client-only": "https://esm.sh/v135/client-only@0.0.1",
+      "clsx": "https://esm.sh/v135/clsx@2.1.1",
+      "node:process": "https://esm.sh/v135/node_process.js",
       "react-dom": "https://esm.sh/v135/preact@10.21.0/compat",
       "react": "https://esm.sh/v135/preact@10.21.0/compat",
       "react/jsx-runtime": "https://esm.sh/v135/preact@10.21.0/jsx-runtime",
@@ -90,7 +104,10 @@
   "nodeModulesDir": true,
   "lint": {
     "rules": {
-      "tags": ["fresh", "recommended"],
+      "tags": [
+        "fresh",
+        "recommended"
+      ],
       "include": [
         "ban-untagged-todo",
         "explicit-function-return-type",
@@ -105,5 +122,9 @@
       ]
     }
   },
-  "exclude": ["**/_fresh/*", "**/*.gen.ts", "src/content/"]
+  "exclude": [
+    "**/_fresh/*",
+    "**/*.gen.ts",
+    "src/content/"
+  ]
 }
diff --git a/src/fresh.gen.ts b/src/fresh.gen.ts
diff --git a/src/islands/Chatbot.tsx b/src/islands/Chatbot.tsx
@@ -1,10 +1,11 @@
+import { IS_BROWSER } from "$fresh/runtime.ts";
 import { render } from "@deno/gfm";
-import { Transition } from "@headlessui/react";
+import { Fieldset, Input, Transition } from "@headlessui/react";
 import { useSignal, useSignalEffect } from "@preact/signals";
 import { set } from "idb-keyval";
 import type { JSX, RenderableProps } from "preact";
+import { Fragment } from "preact";
 import { Suspense } from "preact/compat";
-import { useId } from "preact/hooks";
 import { Loading } from "../components/Loading.tsx";
 import { chat } from "../sdk/chat/index.ts";
 import { getThread } from "../sdk/chat/thread.ts";
@@ -43,8 +44,7 @@ export function Chatbot(
         leaveTo={tw`opacity-0`}
       >
         {isOpen.value && (
-          // biome-ignore lint/complexity/noUselessFragments: It's necessary.
-          <Suspense fallback={<></>}>
+          <Suspense fallback={<Fragment />}>
             <ChatbotBox class="absolute bottom-20 right-0" />
           </Suspense>
         )}
@@ -70,7 +70,6 @@ type Db = DbItem[];
 
 function ChatbotBox(props: JSX.HTMLAttributes<HTMLDivElement>): JSX.Element {
   const messageValue = useSignal("");
-  const inputId = useId();
   const isAsking = useSignal(false);
   const thread = useIndexedDB<string>(
     "thread",
@@ -150,14 +149,13 @@ function ChatbotBox(props: JSX.HTMLAttributes<HTMLDivElement>): JSX.Element {
           isAsking.value = false;
         }}
       >
-        <label for={inputId}>Ask A Question, Any Question!</label>
-        <div class="relative">
-          <input
-            id={inputId}
+        <Fieldset disabled={!IS_BROWSER} class="relative">
+          <label>Ask A Question, Any Question!</label>
+          <Input
             value={messageValue.value}
             autoComplete="off"
             class="pr-10 w-full rounded-lg dark:text-slate-950 whitespace-normal"
-            onInput={(e) => {
+            onInput={(e: JSX.TargetedInputEvent<HTMLInputElement>) => {
               messageValue.value = (e.target as HTMLInputElement).value;
             }}
           />
@@ -168,7 +166,7 @@ function ChatbotBox(props: JSX.HTMLAttributes<HTMLDivElement>): JSX.Element {
           >
             <IconSend class="dark:text-slate-950" />
           </button>
-        </div>
+        </Fieldset>
       </form>
     </div>
   );

diff --git a/src/components/Checkbox.tsx → src/islands/Checkbox.tsx b/src/components/Checkbox.tsx → src/islands/Checkbox.tsx
@@ -1,31 +1,30 @@
+import { IS_BROWSER } from "$fresh/runtime.ts";
+import { Checkbox as Checkmark, Field, Label } from "@headlessui/react";
 import type { JSX } from "preact";
 
 export interface CheckboxProps {
   name: string;
-  id: string;
   labelText: string;
   required?: boolean;
 }
 
 export function Checkbox({
   name,
-  id,
   labelText,
   required,
 }: CheckboxProps): JSX.Element {
   return (
-    <div class="top-16 flex w-72 flex-col items-center gap-4">
-      <label class="text-lg" for={id}>
-        {labelText}
-      </label>
-      <input
+    <Field
+      disabled={!IS_BROWSER}
+      class="top-16 flex w-72 flex-col items-center gap-4"
+    >
+      <Label class="text-lg">{labelText}</Label>
+      <Checkmark
         name={name}
-        type="checkbox"
         /* Removal of ring based on https://romansorin.com/blog/disabling-the-tailwind-input-ring */
         class="cursor-default rounded border-2 border-slate-500 bg-slate-200 shadow-md focus:outline-none focus:ring-1 focus:ring-offset-0 focus-visible:border-blue-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-slate-800"
-        id={id}
         required={required}
       />
-    </div>
+    </Field>
   );
 }
diff --git a/src/islands/HeaderMenu.tsx b/src/islands/HeaderMenu.tsx
@@ -1,4 +1,9 @@
-import { Popover, Transition } from "@headlessui/react";
+import {
+  Popover,
+  PopoverButton,
+  PopoverPanel,
+  Transition,
+} from "@headlessui/react";
 import type { JSX } from "preact";
 import { IconChevronDown } from "../utils/icons.ts";
 import type { Menu, MenuItem } from "../utils/site-organization.ts";
@@ -81,39 +86,59 @@ function PopoverMenu({
   active,
 }: Menu & WithActive): JSX.Element {
   return (
-    <Popover class="relative">
-      <Popover.Button class={`h-8 ${prettyFocus} ${makeBorderStyle(active)}`}>
-        <span class={`flex flex-row ${makeTextStyle(active)}`}>
-          {title} <IconChevronDown class="w-6 h-6" aria-hidden="true" />
-        </span>
-      </Popover.Button>
+    // <Popover>
+    //   <PopoverButton class={`h-8 ${prettyFocus} ${makeBorderStyle(active)}`}>
+    //   </PopoverButton>
+    //   <Transition
+    //     enter={tw`transition ease-out duration-200`}
+    //     enterFrom={tw`opacity-0 translate-y-1`}
+    //     enterTo={tw`opacity-100 translate-y-0`}
+    //     leave={tw`transition ease-in duration-150`}
+    //     leaveFrom={tw`opacity-100 translate-y-0`}
+    //     leaveTo={tw`opacity-0 translate-y-1`}
+    //   >
+    //     <PopoverPanel anchor="bottom" class="max-w-full">
+    //       <div class="absolute left-0 right-auto top-1 z-10 grid max-w-fit origin-top-right grid-flow-row gap-x-4 gap-y-0.5 divide-y divide-slate-200 rounded-md bg-slate-50 px-4 py-1 shadow-lg ring-1 ring-slate-950/5 focus:outline-none sm:left-auto sm:right-0 dark:divide-slate-800 dark:bg-slate-950 dark:ring-slate-50/5">
+    //         <a href={`${url}`} class={makeTextStyle(false)}>
+    //           About {title}
+    //         </a>
+    //       </div>
+    //     </PopoverPanel>
+    //   </Transition>
+    // </Popover>
 
+    <Popover>
+      <PopoverButton class="flex h-8 flex-row whitespace-nowrap py-1 text-slate-500 focus:outline-none data-[active]:font-bold data-[current]:font-bold data-[active]:text-slate-700 data-[hover]:text-slate-700 data-[focus]:outline-1 data-[focus]:outline-white dark:text-slate-400 dark:data-[hover]:text-slate-200 data-[active]:dark:text-slate-200">
+        {title} <IconChevronDown class="w-6 h-6" aria-hidden="true" />
+      </PopoverButton>
       <Transition
-        enter={tw`transition ease-out duration-200`}
-        enterFrom={tw`opacity-0 translate-y-1`}
-        enterTo={tw`opacity-100 translate-y-0`}
-        leave={tw`transition ease-in duration-150`}
-        leaveFrom={tw`opacity-100 translate-y-0`}
-        leaveTo={tw`opacity-0 translate-y-1`}
+        enter="transition ease-out duration-200"
+        enterFrom="opacity-0 translate-y-1"
+        enterTo="opacity-100 translate-y-0"
+        leave="transition ease-in duration-150"
+        leaveFrom="opacity-100 translate-y-0"
+        leaveTo="opacity-0 translate-y-1"
       >
-        <Popover.Panel class="max-w-full">
-          <div class="absolute left-0 right-auto top-1 z-10 grid max-w-fit origin-top-right grid-flow-row gap-x-4 gap-y-0.5 divide-y divide-slate-200 rounded-md bg-slate-50 px-4 py-1 shadow-lg ring-1 ring-slate-950/5 focus:outline-none sm:left-auto sm:right-0 dark:divide-slate-800 dark:bg-slate-950 dark:ring-slate-50/5">
-            <a href={`${url}`} class={makeTextStyle(false)}>
-              About {title}
-            </a>
+        <PopoverPanel
+          anchor="bottom"
+          class="divide-y divide-white/5 rounded-xl bg-white/5 text-sm/6 [--anchor-gap:var(--spacing-5)]"
+        >
+          <div class="p-3">
             {items.map(
               (link: MenuItem): JSX.Element => (
                 <a
                   href={`${url}${link.href}`}
                   key={link}
-                  class={makeTextStyle(false)}
+                  class={`block rounded-lg py-2 px-3 transition hover:bg-white/5 ${makeTextStyle(
+                    false,
+                  )}`}
                 >
                   {link.name}
                 </a>
               ),
             )}
           </div>
-        </Popover.Panel>
+        </PopoverPanel>
       </Transition>
     </Popover>
   );

diff --git a/src/islands/Selector.tsx b/src/islands/Selector.tsx
@@ -1,5 +1,13 @@
 import { IS_BROWSER } from "$fresh/runtime.ts";
-import { Combobox, Transition } from "@headlessui/react";
+import {
+  Combobox,
+  ComboboxButton,
+  ComboboxInput,
+  ComboboxOption,
+  ComboboxOptions,
+  Label,
+  Transition,
+} from "@headlessui/react";
 import { useSignal } from "@preact/signals";
 import { Fragment, type JSX } from "preact";
 import { IconCheck, IconChevronDown } from "../utils/icons.ts";
@@ -42,13 +50,15 @@ export function Selector<T extends string, U extends T>({
         disabled={!IS_BROWSER}
         value={current.value}
         onChange={(newValue) => {
-          current.value = newValue;
+          if (newValue) {
+            current.value = newValue;
+          }
         }}
       >
-        <Combobox.Label class="text-lg">{question}</Combobox.Label>
+        <Label class="text-lg">{question}</Label>
         <div class="relative mt-1 w-min">
           <div class="relative w-full cursor-default rounded-lg bg-slate-200 text-left shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-slate-50/75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm dark:bg-slate-800 dark:focus-visible:ring-slate-950/75 dark:focus-visible:ring-offset-teal-700">
-            <Combobox.Input
+            <ComboboxInput
               class="rounded border-2 border-slate-500 bg-slate-200 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-slate-800"
               autoComplete="off"
               required={required}
@@ -59,12 +69,12 @@ export function Selector<T extends string, U extends T>({
                 }
               }}
             />
-            <Combobox.Button class="absolute inset-y-0 right-0 flex items-center pr-2">
+            <ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
               <IconChevronDown
                 class="h-5 w-5 text-slate-400"
                 aria-hidden="true"
               />
-            </Combobox.Button>
+            </ComboboxButton>
           </div>
           <Transition
             as={Fragment}
@@ -78,14 +88,14 @@ export function Selector<T extends string, U extends T>({
               query.value = "";
             }}
           >
-            <Combobox.Options class="absolute z-10 mt-1 max-h-60 w-full max-w-full overflow-auto rounded-md bg-slate-200 text-base shadow-lg ring-1 ring-slate-950/5 focus:outline-none sm:text-sm dark:bg-slate-800">
+            <ComboboxOptions class="absolute z-10 mt-1 max-h-60 w-full max-w-full overflow-auto rounded-md bg-slate-200 text-base shadow-lg ring-1 ring-slate-950/5 focus:outline-none sm:text-sm dark:bg-slate-800">
               {filtered.length === 0 && query.value !== "" ? (
                 <div class="relative cursor-default select-none px-4 py-2 text-slate-700">
                   No results found
                 </div>
               ) : (
                 filtered.map((item) => (
-                  <Combobox.Option
+                  <ComboboxOption
                     key={item.name}
                     class="relative cursor-default select-none rounded-md py-2 pl-10 pr-4 ui-active:bg-green-500 ui-active:text-slate-50 ui-not-active:text-slate-900 dark:ui-active:bg-green-700 ui-not-active:dark:text-slate-100"
                     value={item}
@@ -110,10 +120,10 @@ export function Selector<T extends string, U extends T>({
                         )}
                       </>
                     )}
-                  </Combobox.Option>
+                  </ComboboxOption>
                 ))
               )}
-            </Combobox.Options>
+            </ComboboxOptions>
           </Transition>
         </div>
       </Combobox>