[IndexTable] Use correct index in the sticky header (#11383)

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Open it as a draft if it’s a work in progress
-->

### WHY are these changes introduced?

In #11342 I changed the index that's used when calculating the width of
the header cell. This didn't take into account selectable rows. This PR
checks if the `selectable` prop is set, if so then add `1` to the index,
otherwise, use the index directly.

I've added a new [storybook
story](http://localhost:6006/?path=/story/all-components-indextable--with-long-data-set-selectable)
to test this.

### How to 🎩

In Storybook test the following components:
-
http://localhost:6006/?path=/story/all-components-indextable--with-long-data-set-selectable
-
http://localhost:6006/?path=/story/all-components-indextable--with-long-data-set-non-selectable

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

### 🎩 checklist

- [x] Tested a
[snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases)
- [ ] 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: jhalvorson

.changeset/rotten-dodos-decide.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+[IndexTable] use the correct index for the sticky header when rows are selectable

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

@@ -6289,7 +6289,64 @@ export function WithNestedRowsWithThumbnailsOneCellNonSelectable() {
   );
 }
 
-export function WithLongDataSet() {
+export function WithLongDataSetNonSelectable() {
+  const orders = Array.from(Array(100).keys()).map((i) => ({
+    id: `${i}`,
+    order: i,
+    date: 'Jul 20 at 4:34pm',
+    customer: 'Jaydon Stanton',
+    total: `$969.44${i}`,
+    paymentStatus: <Badge progress="complete">Paid</Badge>,
+    fulfillmentStatus: <Badge progress="incomplete">Unfulfilled</Badge>,
+  }));
+
+  const resourceName = {
+    singular: 'order',
+    plural: 'orders',
+  };
+
+  const rowMarkup = orders.map(
+    (
+      {id, order, date, customer, total, paymentStatus, fulfillmentStatus},
+      index,
+    ) => (
+      <IndexTable.Row id={id} key={id} position={index}>
+        <IndexTable.Cell>
+          <Text variant="bodyMd" fontWeight="bold" as="span">
+            {order}
+          </Text>
+        </IndexTable.Cell>
+        <IndexTable.Cell>{date}</IndexTable.Cell>
+        <IndexTable.Cell>{customer}</IndexTable.Cell>
+        <IndexTable.Cell>{total}</IndexTable.Cell>
+        <IndexTable.Cell>{paymentStatus}</IndexTable.Cell>
+        <IndexTable.Cell>{fulfillmentStatus}</IndexTable.Cell>
+      </IndexTable.Row>
+    ),
+  );
+
+  return (
+    <LegacyCard>
+      <IndexTable
+        resourceName={resourceName}
+        itemCount={orders.length}
+        headings={[
+          {title: 'Order'},
+          {title: 'Date'},
+          {title: 'Customer'},
+          {title: 'Total', alignment: 'end'},
+          {title: 'Payment status'},
+          {title: 'Fulfillment status'},
+        ]}
+        selectable={false}
+      >
+        {rowMarkup}
+      </IndexTable>
+    </LegacyCard>
+  );
+}
+
+export function WithLongDataSetSelectable() {
   const orders = Array.from(Array(100).keys()).map((i) => ({
     id: `${i}`,
     order: i,
@@ -6333,6 +6390,21 @@ export function WithLongDataSet() {
     ),
   );
 
+  const bulkActions = [
+    {
+      content: 'Add tags',
+      onAction: () => console.log('Todo: implement bulk add tags'),
+    },
+    {
+      content: 'Remove tags',
+      onAction: () => console.log('Todo: implement bulk remove tags'),
+    },
+    {
+      content: 'Delete customers',
+      onAction: () => console.log('Todo: implement bulk delete'),
+    },
+  ];
+
   return (
     <LegacyCard>
       <IndexTable
@@ -6343,14 +6415,15 @@ export function WithLongDataSet() {
         }
         onSelectionChange={handleSelectionChange}
         headings={[
-          {title: 'Order'},
+          {title: 'Order', hidden: true},
           {title: 'Date'},
           {title: 'Customer'},
           {title: 'Total', alignment: 'end'},
           {title: 'Payment status'},
           {title: 'Fulfillment status'},
         ]}
-        selectable={false}
+        bulkActions={bulkActions}
+        selectable
       >
         {rowMarkup}
       </IndexTable>

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

@@ -1124,9 +1124,10 @@ function IndexTableBase({
   }
 
   function renderStickyHeading(heading: IndexTableHeading, index: number) {
+    const position = selectable ? index + 1 : index;
     const headingStyle =
-      tableHeadingRects.current && tableHeadingRects.current.length > index
-        ? {minWidth: tableHeadingRects.current[index].offsetWidth}
+      tableHeadingRects.current && tableHeadingRects.current.length > position
+        ? {minWidth: tableHeadingRects.current[position].offsetWidth}
         : undefined;
     const headingAlignment = heading.alignment || 'start';