Update to latest Headless UI insiders release (#1823)

* Remove as=div from dialogs

* Explicitly specifiy `as` for a few types

These have changed in Headless UI v2

* Update to insiders build of Headless UI

v2 isn’t tagged yet but this is pretty close

* Remove unncessary `as=“div”` for tab groups

* Use a stable scrollbar gutter on supported browsers

* Manually offset sidebar on Safari when scroll locked

* Revert "Manually offset sidebar on Safari when scroll locked"

This reverts commit f22c48f.

Safari users generally have overlay scrollbars and it’ll eventually gain support for stable scrollbar gutters so this seems fine.

* Move prop

* Switch away from as=“div” for Transition

Transitions default to fragments now and the more idiomatic way to do this is to just put the div inside the transition.

* Remove `as` prop from comobobx demo

* Update listbox element types

Author: thecrypticace

package-lock.json

@@ -14,7 +14,7 @@
   "dependencies": {
     "@badrap/bar-of-progress": "^0.1.1",
     "@docsearch/react": "^3.3.3",
-    "@headlessui/react": "^1.7.18",
+    "@headlessui/react": "^0.0.0-insiders.4acf9e2",
     "@heroicons/react": "^2.1.1",
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",

package.json

@@ -79,7 +79,6 @@ function ColorPalette({ name, value }) {
         </div>
       </div>
       <Transition
-        className="absolute bottom-full left-1/2 mb-3.5 pb-1 -translate-x-1/2"
         show={state === 'copied'}
         enter="transform ease-out duration-200 transition origin-bottom"
         enterFrom="scale-95 translate-y-0.5 opacity-0"
@@ -88,22 +87,24 @@ function ColorPalette({ name, value }) {
         leaveFrom="opacity-100"
         leaveTo="opacity-0"
       >
-        <div className="relative bg-sky-500 text-white font-mono text-[0.625rem] leading-6 font-medium px-1.5 rounded-lg">
-          Copied
-          <svg
-            aria-hidden="true"
-            width="16"
-            height="6"
-            viewBox="0 0 16 6"
-            className="text-sky-500 absolute top-full left-1/2 -mt-px -ml-2"
-          >
-            <path
-              fillRule="evenodd"
-              clipRule="evenodd"
-              d="M15 0H1V1.00366V1.00366V1.00371H1.01672C2.72058 1.0147 4.24225 2.74704 5.42685 4.72928C6.42941 6.40691 9.57154 6.4069 10.5741 4.72926C11.7587 2.74703 13.2803 1.0147 14.9841 1.00371H15V0Z"
-              fill="currentColor"
-            />
-          </svg>
+        <div className="absolute bottom-full left-1/2 mb-3.5 pb-1 -translate-x-1/2">
+          <div className="relative bg-sky-500 text-white font-mono text-[0.625rem] leading-6 font-medium px-1.5 rounded-lg">
+            Copied
+            <svg
+              aria-hidden="true"
+              width="16"
+              height="6"
+              viewBox="0 0 16 6"
+              className="text-sky-500 absolute top-full left-1/2 -mt-px -ml-2"
+            >
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M15 0H1V1.00366V1.00366V1.00371H1.01672C2.72058 1.0147 4.24225 2.74704 5.42685 4.72928C6.42941 6.40691 9.57154 6.4069 10.5741 4.72926C11.7587 2.74703 13.2803 1.0147 14.9841 1.00371H15V0Z"
+                fill="currentColor"
+              />
+            </svg>
+          </div>
         </div>
       </Transition>
     </div>

src/components/ColorPaletteReference.js

@@ -76,12 +76,7 @@ export function NavPopover({ display = 'md:hidden', className, ...props }) {
           />
         </svg>
       </button>
-      <Dialog
-        as="div"
-        className={clsx('fixed z-50 inset-0', display)}
-        open={isOpen}
-        onClose={setIsOpen}
-      >
+      <Dialog open={isOpen} onClose={setIsOpen} className={clsx('fixed z-50 inset-0', display)}>
         <Dialog.Overlay className="fixed inset-0 bg-black/20 backdrop-blur-sm dark:bg-slate-900/80" />
         <div className="fixed top-4 right-4 w-full max-w-xs bg-white rounded-lg shadow-lg p-6 text-base font-semibold text-slate-900 dark:bg-slate-800 dark:text-slate-400 dark:highlight-white/5">
           <button

src/components/Header.js

@@ -111,7 +111,7 @@ export function SnippetGroup({ children, style = 'plain', actions, ...props }) {
 
   return (
     <Wrapper {...props}>
-      <Tab.Group as="div" onChange={setSelectedIndex}>
+      <Tab.Group onChange={setSelectedIndex}>
         <div className="flex">
           <Tab.List className="flex text-slate-400 text-xs leading-6 overflow-hidden rounded-tl-xl pt-2">
             {children.map((child, tabIndex) => (