fix: table: add page sizes prop to table pagination (#393)

* chore: table: initial commit of render fixup

* chore: update console logs

* chore: table: fixes pagination sizes update to render proper num of rows

* chore: table: optimise size change in hook

* chore: table: update debug log comments

* chore: table: default page size

* fix: table: add page sizes prop to table pagination

* chore: select: fix flaky unit tests

* chore: merge latest main

* chore: update select snap

Co-authored-by: Dylan Kilgore <dkilgore@eightfold.ai>

src/components/Select/Select.test.tsx

@@ -122,32 +122,32 @@ describe('Select', () => {
     });
 
     test('Select is large', () => {
-        const wrapper = mount(<Select size={SelectSize.Large} />);
-        expect(wrapper.render()).toMatchSnapshot();
+        const { container } = render(<Select size={SelectSize.Large} />);
+        expect(container.firstChild).toMatchSnapshot();
     });
 
     test('Select is medium', () => {
-        const wrapper = mount(<Select size={SelectSize.Medium} />);
-        expect(wrapper.render()).toMatchSnapshot();
+        const { container } = render(<Select size={SelectSize.Medium} />);
+        expect(container.firstChild).toMatchSnapshot();
     });
 
     test('Select is small', () => {
-        const wrapper = mount(<Select size={SelectSize.Small} />);
-        expect(wrapper.render()).toMatchSnapshot();
+        const { container } = render(<Select size={SelectSize.Small} />);
+        expect(container.firstChild).toMatchSnapshot();
     });
 
     test('Select is rectangle shaped', () => {
-        const wrapper = mount(<Select shape={SelectShape.Rectangle} />);
-        expect(wrapper.render()).toMatchSnapshot();
+        const { container } = render(<Select shape={SelectShape.Rectangle} />);
+        expect(container.firstChild).toMatchSnapshot();
     });
 
     test('Select is pill shaped', () => {
-        const wrapper = mount(<Select shape={SelectShape.Pill} />);
-        expect(wrapper.render()).toMatchSnapshot();
+        const { container } = render(<Select shape={SelectShape.Pill} />);
+        expect(container.firstChild).toMatchSnapshot();
     });
 
     test('Select is underline shaped', () => {
-        const wrapper = mount(<Select shape={SelectShape.Underline} />);
-        expect(wrapper.render()).toMatchSnapshot();
+        const { container } = render(<Select shape={SelectShape.Underline} />);
+        expect(container.firstChild).toMatchSnapshot();
     });
 });