Files
headlessui/packages/@headlessui-react/src/hooks/use-flags.ts
T
Robin Malfait 00cc8c50e3 Add Alert & RadioGroup components (#274)
* add Alert component

* expose Alert

* rename forgotten FLYOUT to POPOVER

* use PopoverRenderPropArg

* organize imports in a consistent way

* ensure Portals behave as expected

Portals can be nested from a React perspective, however in the DOM they
are rendered as siblings, this is mostly fine.

However, when they are rendered inside a Dialog, the Dialog itself is
marked with `role="modal"` which makes all the other content inert. This
means that rendering Menu.Items in a Portal or an Alert in a portal
makes it non-interactable. Alerts are not even announced.

To fix  this, we ensure that we make the `root` of the Portal the actual
dialog. This allows you to still interact with it, because an open modal
is the "root" for the assistive technology.

But there is a catch, a Dialog in a Dialog *can* render as a sibling,
because you force the focus into the new Dialog. So we also ensured that
Dialogs are always rendered in the portal root, and not inside another
Dialog.

* add dialog with alert example

* add internal Description component

* add internal Label component

* add RadioGroup component

* expose RadioGroup

* add RadioGroup example

* ensure to include tha RadioGroup.Option own id

* update changelog

* split documentation
2021-04-02 15:55:40 +02:00

13 lines
557 B
TypeScript

import { useState, useCallback } from 'react'
export function useFlags(initialFlags = 0) {
let [flags, setFlags] = useState(initialFlags)
let addFlag = useCallback((flag: number) => setFlags(flags => flags | flag), [setFlags])
let hasFlag = useCallback((flag: number) => Boolean(flags & flag), [flags])
let removeFlag = useCallback((flag: number) => setFlags(flags => flags & ~flag), [setFlags])
let toggleFlag = useCallback((flag: number) => setFlags(flags => flags ^ flag), [setFlags])
return { addFlag, hasFlag, removeFlag, toggleFlag }
}