Next batch of Vue components (#282)

* add little editor hack

By adding a html`..` to the template strings editors can get syntax
highlighting for these template strings. Even better, prettier can even
format the contents inside those because now it is "aware" of what kind
of content is inside of these template strings.

You might notice that for the Menu component I have a jsx`..`, this is
another little hack, this only provides us with syntax highlighting and
not with prettier support.

The reason why we have this is that for some reason, when you have:

html`
  <MenuItem>
`

It will be formatted as:

html`
  <menuitem>
`

There might exist a better name we can use instead of jsx, but for now,
this will do. Having syntax highlighting is already 10x better than what
we had before!

* add Alert component

* update changelog

* update REACT readme for Alert component

* expose Alert component

* add Disclosure component

* expose Disclosure component

* add FocusTrap component

* add FocusTrap example

* expose FocusTrap

* update test utils

We've been making some changes in the React utils, so we have to update
them here as well!

* add Popover component

* expose Popover

* drop unused state

* type Disclosure's API object

* add Portal component

* add Portal example

* expose Portal component

* use correct containElement assertion

* add useInertOthers hook

* add Dialog component

* fix various typo's

* expose Dialog

* add Popover example

* force focus on the Popover button on click

* drop own id when using labels

We are nesting the Label and Description components, if we also add the
id of ourselves we get strange results when using Voice Over.

First you would hear the contents (which includes the labels and
descriptions) then you would hear the labels and descriptions again.

We don't want to hear things twice!

* add Dialog example

* ensure to stop propagation

Otherwise if you nest a Menu inside a Dialog and you press `Escape` the
Dialog will close as well, which is not the expected behaviour.

* improve focus management

When you trigger a Popover using a `click` event, then start using `Tab`
the next `a`-tags do not contain the default focus styles. These only
happen when you trigger it using the keyboard first.

Using a tabindex="0" does make it "focusable" and the default browser
styles will be visible. If we remove the tabindex in a
requestAnimationFrame or a setTimeout then the focus styles will be
removed as well.

This should not cause to many issues (fingers crossed) because the
document.activeElement was already referring to the correct element!

* remove Alert component

There are a lot of unknowns and context dependendant questions to
implement Alerts in a good way. The current Alert component just had a
role set, and it had no JS attached.

We will revisit this, once we start working on Alert Dialogs,
Notification center notifications (dismissable, hide after x time, ...)

* ensure Popover.Overlay auto shows/hides based on Popover state

* enable focus trapping based on `open` prop

Only enable focus trapping in the Dialog when `open` is true, regardless
of the `static` prop.

* handle attrs on Dialog manually

* add low level Description component

* add low level Label component

* add RadioGroup component

* expose RadioGroup

* update README with links to new components

* update changelog with all the changes

* add RadioGroup example

* improve type in test

* cleanup internal Dialog Description

We have a low level Description component abstraction that can be used
instead of the Dialog specifiction Description.

* refactor raw window events to a shared useWindowEvent

* passthrough prop bag via context for abstract Description

The Description component is a generic low level component that is
re-used. This causes an issue that the render prop "bag"/"slot" doesn't
contain the data from let's say a Dialog component.

This commit will ensure that you can specify a bag (React) and slot
(Vue) on the DescriptionProvider, so that the Description component can
read it from the context.

* improve render function in React

These contain a few changes that are purely internal changes. Nothing
changes / breaks in the public API of the components.

- Instead of using multiple arguments in your `render()` functions, we now
use an object.
- `propsBag` / `bag` is renamed to `slot`.
- We also provide a `name` to the render function, so that we can use
  that to improve error messages.

* use the new internal render api (React)

* improve render function in Vue

* use the new internal render api (Vue)

Author: RobinMalfait

CHANGELOG.md

@@ -22,24 +22,30 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Add `Disclosure`, `Disclosure.Button` and `Disclosure.Panel` components ([#220](https://github.com/tailwindlabs/headlessui/pull/220))
 - Add `Dialog`, `Dialog.Overlay`, `Dialog.Tile` and `Dialog.Description` components ([#220](https://github.com/tailwindlabs/headlessui/pull/220))
-- Add `Portal` component ([#220](https://github.com/tailwindlabs/headlessui/pull/220))
+- Add `Portal` and `Portal.Group` component ([#220](https://github.com/tailwindlabs/headlessui/pull/220))
 - Add `Switch.Description` component, which adds the `aria-describedby` to the actual Switch ([#220](https://github.com/tailwindlabs/headlessui/pull/220))
 - Add `FocusTrap` component ([#220](https://github.com/tailwindlabs/headlessui/pull/220))
-- Add `Popover` component ([#220](https://github.com/tailwindlabs/headlessui/pull/220))
+- Add `Popover`, `Popover.Button`, `Popover.Overlay`, `Popover.Panel` and `Popover.Group` components ([#220](https://github.com/tailwindlabs/headlessui/pull/220))
 - All components that accept a `className`, can now also receive a function with the renderProp argument ([#257](https://github.com/tailwindlabs/headlessui/pull/257))
-- Add `RadioGroup` component ([#274](https://github.com/tailwindlabs/headlessui/pull/274))
-- Add `Alert` component ([#274](https://github.com/tailwindlabs/headlessui/pull/274))
+- Add `RadioGroup`, `RadioGroup.Option`, `RadioGroup.Label` and `RadioGroup.Description` components ([#274](https://github.com/tailwindlabs/headlessui/pull/274))
 
 ## [Unreleased - Vue]
 
 ### Fixes
 
 - Fix incorrect `DOM` node from ref ([#249](https://github.com/tailwindlabs/headlessui/pull/249))
 - Fix broken behaviour since Vue 3.0.5 ([#279](https://github.com/tailwindlabs/headlessui/pull/279))
+- Stop propagating keyboard/mouse events ([#282](https://github.com/tailwindlabs/headlessui/pull/282))
 
 ### Added
 
 - Add `SwitchDescription` component, which adds the `aria-describedby` to the actual Switch ([#220](https://github.com/tailwindlabs/headlessui/pull/220))
+- Add `Disclosure`, `DisclosureButton`, `DisclosurePanel` components ([#282](https://github.com/tailwindlabs/headlessui/pull/282))
+- Add `Dialog`, `DialogOverlay`, `DialogTitle` and `DialogDescription` components ([#282](https://github.com/tailwindlabs/headlessui/pull/282))
+- Add `Portal` and `PortalGroup` components ([#282](https://github.com/tailwindlabs/headlessui/pull/282))
+- Add `FocusTrap` component ([#282](https://github.com/tailwindlabs/headlessui/pull/282))
+- Add `Popover`, `PopoverButton`, `PopoverOverlay`, `PopoverPanel` and `PopoverGroup` components ([#282](https://github.com/tailwindlabs/headlessui/pull/282))
+- Add `RadioGroup`, `RadioGroupOption`, `RadioGroupLabel` and `RadioGroupDescription` components ([#282](https://github.com/tailwindlabs/headlessui/pull/282))
 
 ## [@headlessui/react@v0.3.2] - 2021-04-02
 

packages/@headlessui-react/README.md

@@ -37,7 +37,6 @@ _This project is still in early development. New components will be added regula
 - [Dialog](./src/components/dialog/README.md)
 - [Popover](./src/components/popover/README.md)
 - [Radio Group](./src/components/radio-group/README.md)
-- [Alert](./src/components/alert/README.md)
 
 ### Roadmap
 

packages/@headlessui-react/pages/dialog/dialog-with-alert.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from 'react'
-import { Popover, Portal } from '@headlessui/react'
+import React, { forwardRef, Fragment } from 'react'
+import { Popover, Portal, Transition } from '@headlessui/react'
 import { usePopper } from '../../playground-utils/hooks/use-popper'
 import { PropsOf as Props } from '../../src/types'
 
@@ -43,14 +43,36 @@ export default function Home() {
 
       <Popover.Group as="nav" ar-label="Mythical University" className="flex space-x-3">
         <Popover as="div" className="relative">
-          <Button>Normal</Button>
-          <Popover.Panel className="absolute flex flex-col w-64 bg-gray-100 border-2 border-blue-900">
-            {links.map((link, i) => (
-              <Link key={link} hidden={i === 2}>
-                Normal - {link}
-              </Link>
-            ))}
-          </Popover.Panel>
+          {({ open }) => (
+            <>
+              <Transition
+                as={Fragment}
+                show={open}
+                enter="transition ease-out duration-300 transform"
+                enterFrom="opacity-0"
+                enterTo="opacity-100"
+                leave="transition ease-in duration-300 transform"
+                leaveFrom="opacity-100"
+                leaveTo="opacity-0"
+              >
+                <Popover.Overlay
+                  static
+                  className="bg-opacity-75 bg-gray-500 fixed inset-0 z-20"
+                ></Popover.Overlay>
+              </Transition>
+
+              <Popover.Button className="px-3 py-2 bg-gray-300 border-2 border-transparent focus:outline-none focus:border-blue-900 relative z-30">
+                Normal
+              </Popover.Button>
+              <Popover.Panel className="absolute flex flex-col w-64 bg-gray-100 border-2 border-blue-900 z-30">
+                {links.map((link, i) => (
+                  <Link key={link} hidden={i === 2}>
+                    Normal - {link}
+                  </Link>
+                ))}
+              </Popover.Panel>
+            </>
+          )}
         </Popover>
 
         <Popover as="div" className="relative">