add examples with multiple elements

packages/@headlessui-react/pages/listbox/multiple-elements.tsx

@@ -0,0 +1,137 @@
+import * as React from 'react'
+import { Listbox } from '@headlessui/react'
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(' ')
+}
+
+const people = [
+  'Wade Cooper',
+  'Arlene Mccoy',
+  'Devon Webb',
+  'Tom Cook',
+  'Tanya Fox',
+  'Hellen Schmidt',
+  'Caroline Schultz',
+  'Mason Heaney',
+  'Claudie Smitham',
+  'Emil Schaefer',
+]
+
+export default function Home() {
+  return (
+    <div className="flex justify-center w-screen h-full p-12 space-x-4 bg-gray-50">
+      <PeopleList />
+
+      <div>
+        <label htmlFor="email" className="block text-sm font-medium leading-5 text-gray-700">
+          Email
+        </label>
+        <div className="relative mt-1 rounded-md shadow-sm">
+          <input
+            className="block w-full form-input sm:text-sm sm:leading-5"
+            placeholder="[email protected]"
+          />
+        </div>
+      </div>
+
+      <PeopleList />
+    </div>
+  )
+}
+
+function PeopleList() {
+  const [active, setActivePerson] = React.useState(people[2])
+
+  // Choose a random person on mount
+  React.useEffect(() => {
+    setActivePerson(people[Math.floor(Math.random() * people.length)])
+  }, [])
+
+  return (
+    <div className="w-64">
+      <div className="space-y-1">
+        <Listbox
+          value={active}
+          onChange={value => {
+            console.log('value:', value)
+            setActivePerson(value)
+          }}
+        >
+          <Listbox.Label className="block text-sm font-medium leading-5 text-gray-700">
+            Assigned to
+          </Listbox.Label>
+
+          <div className="relative">
+            <span className="inline-block w-full rounded-md shadow-sm">
+              <Listbox.Button className="relative w-full py-2 pl-3 pr-10 text-left transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md cursor-default focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5">
+                <span className="block truncate">{active}</span>
+                <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+                  <svg
+                    className="w-5 h-5 text-gray-400"
+                    viewBox="0 0 20 20"
+                    fill="none"
+                    stroke="currentColor"
+                  >
+                    <path
+                      d="M7 7l3-3 3 3m0 6l-3 3-3-3"
+                      strokeWidth="1.5"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                </span>
+              </Listbox.Button>
+            </span>
+
+            <div className="absolute w-full mt-1 bg-white rounded-md shadow-lg">
+              <Listbox.Options className="py-1 overflow-auto text-base leading-6 rounded-md shadow-xs max-h-60 focus:outline-none sm:text-sm sm:leading-5">
+                {people.map(name => (
+                  <Listbox.Option
+                    key={name}
+                    value={name}
+                    className={({ active }) => {
+                      return classNames(
+                        'relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-none',
+                        active ? 'text-white bg-indigo-600' : 'text-gray-900'
+                      )
+                    }}
+                  >
+                    {({ active, selected }) => (
+                      <>
+                        <span
+                          className={classNames(
+                            'block truncate',
+                            selected ? 'font-semibold' : 'font-normal'
+                          )}
+                        >
+                          {name}
+                        </span>
+                        {selected && (
+                          <span
+                            className={classNames(
+                              'absolute inset-y-0 right-0 flex items-center pr-4',
+                              active ? 'text-white' : 'text-indigo-600'
+                            )}
+                          >
+                            <svg className="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+                              <path
+                                fillRule="evenodd"
+                                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                                clipRule="evenodd"
+                              />
+                            </svg>
+                          </span>
+                        )}
+                      </>
+                    )}
+                  </Listbox.Option>
+                ))}
+              </Listbox.Options>
+            </div>
+          </div>
+        </Listbox>
+      </div>
+    </div>
+  )
+}

packages/@headlessui-react/pages/menu/multiple-elements.tsx

@@ -0,0 +1,86 @@
+import * as React from 'react'
+import { Menu } from '@headlessui/react'
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(' ')
+}
+
+export default function Home() {
+  return (
+    <div className="flex justify-center w-screen h-full p-12 space-x-4 bg-gray-50">
+      <Dropdown />
+
+      <div>
+        <div className="relative rounded-md shadow-sm">
+          <input
+            className="block w-full form-input sm:text-sm sm:leading-5"
+            placeholder="[email protected]"
+          />
+        </div>
+      </div>
+
+      <Dropdown />
+    </div>
+  )
+}
+
+function Dropdown() {
+  function resolveClass({ active, disabled }) {
+    return classNames(
+      'block w-full text-left px-4 py-2 text-sm leading-5 text-gray-700',
+      active && 'bg-gray-100 text-gray-900',
+      disabled && 'cursor-not-allowed opacity-50'
+    )
+  }
+
+  return (
+    <div className="relative inline-block text-left">
+      <Menu>
+        <span className="inline-flex rounded-md shadow-sm">
+          <Menu.Button className="inline-flex justify-center w-full px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800">
+            <span>Options</span>
+            <svg className="w-5 h-5 ml-2 -mr-1" viewBox="0 0 20 20" fill="currentColor">
+              <path
+                fillRule="evenodd"
+                d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                clipRule="evenodd"
+              />
+            </svg>
+          </Menu.Button>
+        </span>
+
+        <Menu.Items className="absolute right-0 w-56 mt-2 origin-top-right bg-white border border-gray-200 divide-y divide-gray-100 rounded-md shadow-lg outline-none">
+          <div className="px-4 py-3">
+            <p className="text-sm leading-5">Signed in as</p>
+            <p className="text-sm font-medium leading-5 text-gray-900 truncate">[email protected]</p>
+          </div>
+
+          <div className="py-1">
+            <Menu.Item as="a" href="#account-settings" className={resolveClass}>
+              Account settings
+            </Menu.Item>
+            <Menu.Item>
+              {data => (
+                <a href="#support" className={resolveClass(data)}>
+                  Support
+                </a>
+              )}
+            </Menu.Item>
+            <Menu.Item as="a" disabled href="#new-feature" className={resolveClass}>
+              New feature (soon)
+            </Menu.Item>
+            <Menu.Item as="a" href="#license" className={resolveClass}>
+              License
+            </Menu.Item>
+          </div>
+
+          <div className="py-1">
+            <Menu.Item as="a" href="#sign-out" className={resolveClass}>
+              Sign out
+            </Menu.Item>
+          </div>
+        </Menu.Items>
+      </Menu>
+    </div>
+  )
+}

packages/@headlessui-react/playground-utils/resolve-all-examples.ts

@@ -23,11 +23,11 @@ export async function resolveAllExamples(...paths: string[]) {
     }
 
     const bucket: ExamplesType = {
-      name: file.name.replace(/-/g, ' ').replace(/.tsx?/g, ''),
+      name: file.name.replace(/-/g, ' ').replace(/\.tsx?/g, ''),
       path: [...paths, file.name]
         .join('/')
         .replace(/^pages/, '')
-        .replace(/.tsx?/g, '')
+        .replace(/\.tsx?/g, '')
         .replace(/\/+/g, '/'),
     }
 

packages/@headlessui-vue/examples/src/App.vue

@@ -67,7 +67,7 @@
       <!-- TODO: Position this in the correct spot -->
       <div
         v-if="sourceCode"
-        class="container fixed bottom-0 left-0 right-0 my-12 overflow-scroll rounded-md max-h-96"
+        class="container fixed bottom-0 left-0 right-0 hidden my-12 overflow-scroll rounded-md max-h-96"
         v-html="sourceCode"
       />
     </main>