({
title,
description,
variant: propsVariant,
selectionVariant = 'multiple',
id,
defaultOpen = false,
open: propsOpen,
anchorRef: providedAnchorRef,
onCancel: propsOnCancel,
onClearSelection: propsOnClearSelection,
onSubmit: propsOnSubmit,
width = 'medium',
maxHeight = 'large',
...props
})
| 62 | } |
| 63 | |
| 64 | const Panel: React.FC<SelectPanelProps> = ({ |
| 65 | title, |
| 66 | description, |
| 67 | variant: propsVariant, |
| 68 | selectionVariant = 'multiple', |
| 69 | id, |
| 70 | |
| 71 | defaultOpen = false, |
| 72 | open: propsOpen, |
| 73 | anchorRef: providedAnchorRef, |
| 74 | |
| 75 | onCancel: propsOnCancel, |
| 76 | onClearSelection: propsOnClearSelection, |
| 77 | onSubmit: propsOnSubmit, |
| 78 | |
| 79 | width = 'medium', |
| 80 | maxHeight = 'large', |
| 81 | ...props |
| 82 | }) => { |
| 83 | const [internalOpen, setInternalOpen] = React.useState(defaultOpen) |
| 84 | |
| 85 | const responsiveVariants = Object.assign( |
| 86 | {regular: 'anchored', narrow: 'full-screen'}, // defaults |
| 87 | typeof propsVariant === 'string' ? {regular: propsVariant} : propsVariant, |
| 88 | ) |
| 89 | const currentVariant = useResponsiveValue(responsiveVariants, 'anchored') |
| 90 | |
| 91 | // sync open state with props |
| 92 | if (propsOpen !== undefined && internalOpen !== propsOpen) setInternalOpen(propsOpen) |
| 93 | |
| 94 | // TODO: replace this hack with clone element? |
| 95 | |
| 96 | // 🚨 Hack for good API! |
| 97 | // we strip out Anchor from children and wire it up to Dialog |
| 98 | // with additional props for accessibility |
| 99 | let Anchor: React.ReactElement | undefined |
| 100 | const anchorRef = useProvidedRefOrCreate(providedAnchorRef) |
| 101 | |
| 102 | const onAnchorClick = () => { |
| 103 | if (!internalOpen) setInternalOpen(true) |
| 104 | else onInternalCancel() |
| 105 | } |
| 106 | |
| 107 | const contents = React.Children.map(props.children, child => { |
| 108 | if (React.isValidElement(child) && child.type === SelectPanelButton) { |
| 109 | Anchor = React.cloneElement(child, { |
| 110 | // @ts-ignore TODO |
| 111 | ref: anchorRef, |
| 112 | onClick: child.props.onClick || onAnchorClick, |
| 113 | 'aria-haspopup': true, |
| 114 | 'aria-expanded': internalOpen, |
| 115 | }) |
| 116 | return null |
| 117 | } |
| 118 | return child |
| 119 | }) |
| 120 | |
| 121 | const onInternalClose = React.useCallback(() => { |
nothing calls this directly
no test coverage detected