fix(pagination): active element incorrect position on first load

[arindam1997007]

Closes #3151

📝 Description

Fixed Active Element positionon on first load, when pagination is rendered initially with display:hidden

⛳️ Current behavior (updates)

On first load, instead of left arrow button, Page 1 active element is displayed

🚀 New behavior

Active Element position is fixed even on first load, using IntersectionObserver.

💣 Is this a breaking change (Yes/No):

No

📝 Additional Information

According to code submitted by users which can be reproduced, issue occurs if pagination component is rendered using display:hidden for the first time, and then switching to display:block.

Using IntersectionObserver, checking for display of pagination componenet in the viewport, and then running the required functions.

https://github.com/nextui-org/nextui/assets/23236141/9c5d1a2e-a06c-49b5-beba-8711b1beca0f

Summary by CodeRabbit

• Bug Fixes

  • Resolved an issue with the Pagination component where the active element's position was incorrect when display: hidden was applied.

• New Features

  • Introduced a new SubTabs component to manage tabs and content display within the pagination story.
  • Added multiple new SVG icon components: ChevronDownIcon, PlusIcon, SearchIcon, and VerticalDotsIcon.
  • Introduced a TableData component with advanced table features like filtering, sorting, pagination, and customizable column visibility.

• Enhancements

  • Improved the usePagination function with better scrolling behavior and visibility checks.
  • Enhanced table data management with predefined columns, status options, and user information for display purposes.