Implement focus visible provider

[nickoola]

No description provided.

[nickoola]

Interesting discussion about context re-render:
facebook/react#15156

And cool article to check re-render with context:
https://frontarm.com/james-k-nelson/react-context-performance/

[simonrelet]

I'm having difficulties seeing how this will be used.

For example the Button component is structured as following:

// Button.tsx
class Button extends PureComponent<P, S> {
  // ...
}

// index.tsx
const StyledButton = styled(Button)`
  /* [...] */
`

So in order to use the hook we need to transform the Button to a functional component:

// Button.tsx
function Button({ className }) {
  const { focusVisible, onFocus, onBlur } = useFocusVisible()
  // ...

  // Simplified for the example
  return (
    <button
      onFocus={onFocus}
      onBlur={onBlur}
      className={cc([className, prefix({ focusVisible })])}
    />
  )
}

// index.tsx
const StyledButton = styled(Button)`
  /* ... */

  &.kirk-focusVisible {
    /* ... */
  }
`

Is that right?

[nickoola]

Setted to false as initial value cause not the common behavior.

[nickoola]

I'm having difficulties seeing how this will be used.

For example the Button component is structured as following:

// Button.tsx
class Button extends PureComponent<P, S> {
  // ...
}

// index.tsx
const StyledButton = styled(Button)`
  /* [...] */
`

So in order to use the hook we need to transform the Button to a functional component:

// Button.tsx
function Button({ className }) {
  const { focusVisible, onFocus, onBlur } = useFocusVisible()
  // ...

  // Simplified for the example
  return (
    <button
      onFocus={onFocus}
      onBlur={onBlur}
      className={cc([className, prefix({ focusVisible })])}
    />
  )
}

// index.tsx
const StyledButton = styled(Button)`
  /* ... */

  &.kirk-focusVisible {
    /* ... */
  }
`

Is that right?

Yes it'll be used this way + having the FocusVisibleProvider as wrapper like we do with MediaSizeProvider

[nickoola]

@simonrelet I use PropsWithChildren as type for children instead of interface like:

interface FocusVisibleProviderProps {
  children: ReactNode
}

Not typescript expert so just want to know if it's the right way.

[simonrelet]

I have rarely seen PropsWithChildren before, but I don't feel comfortable having a component with props but no exported prop types.

If we really want to avoid the children?: React.ReactNode part maybe we can write:

export type FocusVisibleProviderProps = PropsWithChildren<{}>

But the empty type (<{}>) still feels weird.

Having the extended type declaration (children?: React.ReactNode) wouldn't bother me much.

Not sure my comment helps here 😅.

[nickoola]

I don't really have strong opinion for this point so I'll fallback with:

type FocusVisibleProviderProps = {
  children: ReactNode
}

[simonrelet]

Nice work 👍

[gabrielagabriel]

Could you "illustrate" this PR? Thanks

[gabrielagabriel]

Nice refactor! Great improvement on code readability 🦉