# Focusable HOC

A HOC which designed to wrap components and provide info about focus state<br/>

1. Provide for wrapped component

| propName | propType | isRequired | description |
|----------|----------|------------|-------------|
| focusableOnFocus | func | false | This callback need to be applied for onFocus event |
| focusableOnBlur | func | false | This callback need to be applied for onBlur event |
| focusableIsFocused | bool | false | Provide current focus state |
| focusableIsFocusVisible | bool | false | Provide current focus visible state |

## Usage Example
In order to create the wrapped component:

```js
import * as React from 'react';
import {withFocusable} from 'wix-ui-core/hocs/Focusable';

interface IInputProps {
  children: React.ReactNode;
  focusableOnFocus: any;
  focusableOnBlur: any;
  focusableIsFocusVisible: boolean;
  focusableIsFocused: boolean;
}

class Input extends React.Component<IInputProps> {
  render() {
    const {children, ...rest} = this.props;
    return (
      <input
        onFocus={rest.focusableOnFocus}
        onBlur={rest.focusableOnBlur}
        className={this.props.className}
      />
    );
  }
}

const FocusableInput = withFocusable(Input);

export default () => (
  <FocusableInput data-hook="focusable-Input"/>
);
```

The HOC adds `wds-focusable` to the wrapped component's `className`, plus `wds-focusable--focus` while it is focused and `wds-focusable--focus-visible` while focus came from the keyboard. Style focus in the component's own sheet with native `:focus-visible`, or with the `FocusRing` utility block (`src/common/FocusRing`).