Robin Malfait
58ff88698b
* make jest monorepo aware
* add @testing-library/jest-dom for custom matchers
This way we can use expect(element).toHaveAttribute(key, value?)
* abstract keys enum
* change type to unknown, because we don't know the return value
* update use-id hook, make it suspense aware
Thanks Reach UI!
* hoist the disposables collection
* add accessbility assertions for listbox
Also made it consistent for the Menu component and simplified some of the assertions
* add use-computed hook
This allows us re-render when hooks change, but also return a value. So this is a combination of useEffect and a useState value.
* add Listbox component
* bump dependencies
* add listbox example
* add lint-staged
This way we will only lint the files that have been staged and ready to be committed instead of the whole codebase
* add missing prevent defaults
* improve tests to verify that we can actually update the value of the listbox
* scroll the active listbox item into view
* small optimization, only focus "Nothing" on pointer leave when we are the active item
We used to always go to "Nothing" on pointer leave. And while this code
doesn't get called often, it *gets* called if you are using your arrow
keys and the mouse pointer is still over the list.
* bump dependencies
Also moved the tailwind dependencies to the root
* fix typo
* drop the default Transition inside the Menu and Listbox components
* update examples to reflect drop of default Transition wrapper
* rename Listbox.{Items,Item} to Listbox.{Options,Option}
Also rename all instances of `item` to `option` in tests and comments
and what have you...
* fix typo
* drop disabled prop, use aria-disabled only
85 lines
3.4 KiB
TypeScript
85 lines
3.4 KiB
TypeScript
import * as React from 'react'
|
|
import { Menu, Transition } from '@headlessui/react'
|
|
|
|
function classNames(...classes) {
|
|
return classes.filter(Boolean).join(' ')
|
|
}
|
|
|
|
export default function Home() {
|
|
function resolveClass({ active, disabled }) {
|
|
return classNames(
|
|
'flex justify-between w-full px-4 py-2 text-sm leading-5 text-left',
|
|
active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
|
|
disabled && 'cursor-not-allowed opacity-50'
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="flex justify-center w-screen h-full p-12 bg-gray-50">
|
|
<div className="relative inline-block text-left">
|
|
<Menu>
|
|
{({ open }) => (
|
|
<>
|
|
<span className="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>
|
|
|
|
<Transition
|
|
show={open}
|
|
enter="transition duration-100 ease-out"
|
|
enterFrom="transform scale-95 opacity-0"
|
|
enterTo="transform scale-100 opacity-100"
|
|
leave="transition duration-75 ease-out"
|
|
leaveFrom="transform scale-100 opacity-100"
|
|
leaveTo="transform scale-95 opacity-0"
|
|
>
|
|
<Menu.Items
|
|
static
|
|
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">
|
|
tom@example.com
|
|
</p>
|
|
</div>
|
|
|
|
<div className="py-1">
|
|
<Menu.Item as="a" href="#account-settings" className={resolveClass}>
|
|
Account settings
|
|
</Menu.Item>
|
|
<Menu.Item as="a" href="#support" className={resolveClass}>
|
|
Support
|
|
</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>
|
|
</Transition>
|
|
</>
|
|
)}
|
|
</Menu>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|