feat(PageItem): use "as" property as an anchor element

[dilame]

This Pull Request addresses the issue of limited routing flexibility in the PageItem component (#6753). By introducing the anchorAs prop, it allows the specification of a custom component for rendering links, thereby enabling seamless integration with custom routing libraries like Next.js's <Link>.

Changes Made:

• Added a new prop anchorAs to PageItemProps.
• Updated the PageItem component to use anchorAs as the component type for rendering the link.
• Ensured backward compatibility by defaulting anchorAs to the existing Anchor component from @restart/ui/Anchor.

Benefits:

• Enhances the flexibility and usability of PageItem in applications with custom routing requirements.
• Allows integration with Next.js's Link component or any other custom component for link rendering.
• Maintains backward compatibility, ensuring that existing implementations are unaffected.

I believe this enhancement will significantly benefit developers working with custom routing solutions and look forward to feedback and suggestions.

[kyletsang]

Could you change anchorAs to as? Should be fine to use that as the link is the main component in here anyway.

[dilame]

@kyletsang there seem to be a conflict with interface BsPrefixRefForwardingComponent, because it accepts interface BsPrefixProps extends AsProp in constructor, so if i just rename anchorAs to as i receive error

TS2322: Type ({ children, ...props }: any) => Element is not assignable to type ("li" & ElementType<any>) | undefined
Type ({ children, ...props }: any) => Element is not assignable to type "li" & FunctionComponent<any>
Type ({ children, ...props }: any) => Element is not assignable to type "li"
helpers.ts(17, 3): The expected type comes from property as which is declared here on type
IntrinsicAttributes & Omit<Omit<DetailedHTMLProps<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & { ...; }, BsPrefixProps<...> & PageItemProps> & BsPrefixProps<...> & PageItemProps & { ...; }

[kyletsang]

Try removing the anchorAs definition entirely in PageItemProps. The as prop is already inherited from the base interface.

[dilame]

That's exactly what i did. If you look at the error message from TypeScript, you will see that there is a conflict with the base interface.
The error is produced by this code from test

<PageItem
          as={({ children, ...props }) => (
            <a {...props} data-anchor="custom">
              {children}
            </a>
          )}
        />

[kyletsang]

Try the following:

it('should support custom anchor element', () => {
  const Component = ({ children, ...props }) => (
    <a {...props} data-anchor="custom">
      {children}
    </a>
  );
  const { container } = render(<PageItem as={Component} />);
  const pageItemElem = container.firstElementChild!;
  const pageItemInnerElem = pageItemElem.firstElementChild!;
  pageItemInnerElem.getAttribute('data-anchor')!.should.equal('custom');
});

[dilame]

Thanks, it works.

I was not able to change commit message, should i create a new PR, or you will manage it with squash?

[kyletsang]

Yeah that's fine, I'll squash it. Thanks!

[dilame]

I also kindly ask you to release a new version to NPM, it's already my second PR that i'm waiting to use in my project:)

[kyletsang]

I just published v2.10.0.

Thanks for the contributions!