Function SelectPanelFooter

packages/react/src/drafts/SelectPanel2/SelectPanel.tsx:476–517

({...props})

const FooterContext = React.createContext<boolean>(false)
const SelectPanelFooter = ({...props}) => {
  const {onCancel, selectionVariant} = React.useContext(SelectPanelContext)

  const hidePrimaryActions = selectionVariant === 'instant'
  const buttonSize = useResponsiveValue(responsiveButtonSizes, 'small')

  if (hidePrimaryActions && !props.children) {
    // nothing to render
    // todo: we can inform them the developer footer will render nothing
    return null
  }

  return (
    <FooterContext.Provider value={true}>
      <Box
        sx={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          flexShrink: 0,
          padding: hidePrimaryActions ? 2 : 3,
          minHeight: '44px',
          borderTop: '1px solid',
          borderColor: 'border.default',
        }}
      >
        <Box sx={{flexGrow: hidePrimaryActions ? 1 : 0}}>{props.children}</Box>

        {hidePrimaryActions ? null : (
          <Box sx={{display: 'flex', gap: 2}}>
            <Button type="button" size={buttonSize} onClick={() => onCancel()}>
              Cancel
            </Button>
            <Button type="submit" size={buttonSize} variant="primary">
              Save
            </Button>
          </Box>
        )}
      </Box>
    </FooterContext.Provider>
  )
}

const SecondaryButton: React.FC<ButtonProps> = props => {
  const size = useResponsiveValue(responsiveButtonSizes, 'small')