{"size": 776, "ext": "js", "max_stars_repo_path": "src/Header/index.js", "max_stars_repo_name": "Trinitonn/react-sm-select", "max_stars_repo_stars_event_min_datetime": "2019-03-05T15:01:00.000Z", "max_stars_repo_stars_event_max_datetime": "2021-12-27T18:23:29.000Z", "max_issues_repo_path": "src/Header/index.js", "max_issues_repo_name": "Trinitonn/react-sm-select", "max_issues_repo_issues_event_min_datetime": "2019-04-26T17:45:58.000Z", "max_issues_repo_issues_event_max_datetime": "2019-10-30T13:14:23.000Z", "max_forks_repo_path": "src/Header/index.js", "max_forks_repo_name": "Trinitonn/react-sm-select", "max_forks_repo_forks_event_min_datetime": "2019-03-28T17:42:01.000Z", "max_forks_repo_forks_event_max_datetime": "2019-12-02T09:36:10.000Z"}
{"max_stars_count": 6, "max_issues_count": 7, "max_forks_count": 3, "avg_line_length": 26.7586206897, "max_line_length": 98, "alphanum_fraction": 0.6237113402}
import React from 'react';
import { classes } from '../utils';

export { Value } from './Value';
export { DefArrow } from './DefArrow';
export { DefLoading } from './DefLoading';

export const Header = ({ children, disabled, expanded, focused, selected, nodeRef, onClick }) => (
  <div
    className={classes('Header', {
      'Header--focusedActive':  !disabled && (focused || expanded),
      'Header--expanded': expanded,
      'Header--disabled': disabled,
      'Header--focusedDisabled': disabled && focused,
      'Header--selected': !disabled && (focused && selected)
    })}
    tabIndex="0"
    role="combobox"
    aria-expanded={expanded}
    aria-readonly="true"
    aria-disabled={disabled}
    ref={nodeRef}
    onClick={onClick}
  >
    {children}
  </div>
);

