| 341 | }) |
| 342 | |
| 343 | const SelectPanelHeader: React.FC<React.PropsWithChildren & {onBack?: () => void}> = ({children, onBack, ...props}) => { |
| 344 | const [slots, childrenWithoutSlots] = useSlots(children, { |
| 345 | searchInput: SelectPanelSearchInput, |
| 346 | }) |
| 347 | |
| 348 | const {title, description, panelId, onCancel, onClearSelection} = React.useContext(SelectPanelContext) |
| 349 | |
| 350 | return ( |
| 351 | <Box |
| 352 | sx={{ |
| 353 | display: 'flex', |
| 354 | flexDirection: 'column', |
| 355 | // gap: 2, |
| 356 | padding: 2, |
| 357 | borderBottom: '1px solid', |
| 358 | borderColor: 'border.default', |
| 359 | }} |
| 360 | {...props} |
| 361 | > |
| 362 | <Box |
| 363 | sx={{ |
| 364 | display: 'flex', |
| 365 | justifyContent: 'space-between', |
| 366 | alignItems: description ? 'start' : 'center', |
| 367 | marginBottom: slots.searchInput ? 2 : 0, |
| 368 | }} |
| 369 | > |
| 370 | <Box sx={{display: 'flex'}}> |
| 371 | {onBack ? ( |
| 372 | <Tooltip text="Back" direction="s"> |
| 373 | <IconButton |
| 374 | type="button" |
| 375 | variant="invisible" |
| 376 | icon={ArrowLeftIcon} |
| 377 | aria-label="Back" |
| 378 | onClick={() => onBack()} |
| 379 | /> |
| 380 | </Tooltip> |
| 381 | ) : null} |
| 382 | |
| 383 | <Box sx={{marginLeft: onBack ? 1 : 2, marginTop: description ? '2px' : 0}}> |
| 384 | {/* heading element is intentionally hardcoded to h1, it is not customisable |
| 385 | see https://github.com/github/primer/issues/2578 for context |
| 386 | */} |
| 387 | <Heading as="h1" id={`${panelId}--title`} sx={{fontSize: 14, fontWeight: 600}}> |
| 388 | {title} |
| 389 | </Heading> |
| 390 | {description ? ( |
| 391 | <Text id={`${panelId}--description`} sx={{fontSize: 0, color: 'fg.muted', display: 'block'}}> |
| 392 | {description} |
| 393 | </Text> |
| 394 | ) : null} |
| 395 | </Box> |
| 396 | </Box> |
| 397 | |
| 398 | <Box> |
| 399 | {/* Will not need tooltip after https://github.com/primer/react/issues/2008 */} |
| 400 | {onClearSelection ? ( |