Fixed IndexTable bulk header not working (#7453)

### WHY are these changes introduced?

There was a [change](#6583) that
updated how index table behaves on small screens. However, the variable
setting small screen state is not correctly updated on resize causing
the not to be incorrect when moving from large -> small or small ->
large.

### WHAT is this pull request doing?

Updating the value on resize

### How to 🎩

Load `indextable--small-screen-with-all-of-its-elements` on a large
screen then resize to small.

[Spin
link](https://admin.web.am-test-it-ba.andrew-musgrave.us.spin.dev/store/shop1/orders?inContextTimeframe=none)

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

Author: AndrewMusgrave

.changeset/tidy-wasps-cheat.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed IndexTable not rendering bulk actions on resize

polaris-react/src/components/IndexTable/IndexTable.tsx

@@ -299,8 +299,8 @@ function IndexTableBase({
   }, [handleCanScrollRight]);
 
   const handleIsSmallScreen = useCallback(() => {
-    setSmallScreen(smallScreen);
-  }, [smallScreen]);
+    setSmallScreen(isBreakpointsXS());
+  }, []);
 
   const [canFitStickyColumn, setCanFitStickyColumn] = useState(true);
 

polaris-react/src/components/IndexTable/tests/IndexTable.test.tsx

@@ -383,6 +383,14 @@ describe('<IndexTable>', () => {
   });
 
   describe('BulkActions', () => {
+    const originalInnerWidth = window.innerWidth;
+
+    afterEach(() => {
+      Object.defineProperty(window, 'innerWidth', {
+        value: originalInnerWidth,
+      });
+    });
+
     it('toggles all resources selected when paginatedSelectionAllAction is triggered', () => {
       const onSelectionChangeSpy = jest.fn();
       const index = mountWithApp(
@@ -452,6 +460,65 @@ describe('<IndexTable>', () => {
         true,
       );
     });
+
+    it('passes smallScreen to bulk actions', () => {
+      const promotedActions = [{content: 'PromotedAction'}];
+
+      const indexTable = mountWithApp(
+        <IndexTable
+          {...defaultProps}
+          selectable
+          selectedItemsCount={1}
+          itemCount={2}
+          promotedBulkActions={promotedActions}
+        >
+          {mockTableItems.map(mockRenderCondensedRow)}
+        </IndexTable>,
+      );
+
+      indexTable.find(BulkActions)!.trigger('onToggleAll');
+
+      expect(indexTable).toContainReactComponent(BulkActions, {
+        smallScreen: expect.any(Boolean),
+      });
+    });
+
+    it('passes an updated smallScreen value to bulk actions after resize', () => {
+      Object.defineProperty(window, 'innerWidth', {
+        value: 1000,
+      });
+
+      const promotedActions = [{content: 'PromotedAction'}];
+
+      const indexTable = mountWithApp(
+        <IndexTable
+          {...defaultProps}
+          selectable
+          selectedItemsCount={1}
+          itemCount={2}
+          promotedBulkActions={promotedActions}
+        >
+          {mockTableItems.map(mockRenderCondensedRow)}
+        </IndexTable>,
+      );
+
+      indexTable.find(BulkActions)!.trigger('onToggleAll');
+
+      expect(indexTable).toContainReactComponent(BulkActions, {
+        smallScreen: false,
+      });
+
+      indexTable.act(() => {
+        Object.defineProperty(window, 'innerWidth', {
+          value: 300,
+        });
+        window.dispatchEvent(new Event('resize'));
+      });
+
+      expect(indexTable).toContainReactComponent(BulkActions, {
+        smallScreen: true,
+      });
+    });
   });
 
   describe('condensed', () => {