ts-component-wrapper.ts

gistfile1.ts

// This should be declared as
// export function withActiveIndicator<T>(Component: FunctionComponent<T>): FunctionComponent<T>
// but styled components makes this extremely hard. For now, this approached brute forces the correct return type,
// so the result will be properly typed for the consumer, at the expense of some casts inside the function
export function withActiveIndicator<T>(Component: T): T {
  const Wrapper = styled(Component as any)`
    outline: 0;
    &:focus > :first-child {
      display: block;
    }
  `;

  type WrapperProps = ComponentProps<typeof Wrapper>;

  const Result: FunctionComponent<PropsWithChildren<T>> = (
    props: WrapperProps,
  ) => {
    const { children, ...rest } = props;
    return (
      <Wrapper {...rest}>
        <ActiveIndicator />
        {children}
      </Wrapper>
    );
  };

  return Result as any;
}