Robin Malfait
00cc8c50e3
* 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
27 lines
495 B
TypeScript
27 lines
495 B
TypeScript
import React, {
|
|
createContext,
|
|
useContext,
|
|
|
|
// Types
|
|
ReactNode,
|
|
} from 'react'
|
|
|
|
let ForcePortalRootContext = createContext(false)
|
|
|
|
export function usePortalRoot() {
|
|
return useContext(ForcePortalRootContext)
|
|
}
|
|
|
|
interface ForcePortalRootProps {
|
|
force: boolean
|
|
children: ReactNode
|
|
}
|
|
|
|
export function ForcePortalRoot(props: ForcePortalRootProps) {
|
|
return (
|
|
<ForcePortalRootContext.Provider value={props.force}>
|
|
{props.children}
|
|
</ForcePortalRootContext.Provider>
|
|
)
|
|
}
|