[IndexTable][ResourceList] Set SelectAllActions sticky bottom offset based on closest scrollable ancestor

.changeset/smart-badgers-yawn.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed the position of `SelectAllActions` when inside of an offset scrollable container

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

@@ -6,6 +6,10 @@ import type {
   IndexTableRowProps,
 } from '@shopify/polaris';
 import {
+  Frame,
+  Button,
+  Modal,
+  Scrollable,
   useBreakpoints,
   InlineStack,
   LegacyCard,
@@ -6776,3 +6780,123 @@ export function WithLongDataSetSelectable() {
     </LegacyCard>
   );
 }
+
+export function WithinAModal() {
+  const [active, setActive] = useState(true);
+  const [checked, setChecked] = useState(false);
+
+  const toggleActive = useCallback(() => setActive((active) => !active), []);
+
+  const handleCheckbox = useCallback((value) => setChecked(value), []);
+
+  const activator = <Button onClick={toggleActive}>Open</Button>;
+
+  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 {selectedResources, allResourcesSelected, handleSelectionChange} =
+    useIndexResourceState(orders);
+
+  const rowMarkup = orders.map(
+    (
+      {id, order, date, customer, total, paymentStatus, fulfillmentStatus},
+      index,
+    ) => (
+      <IndexTable.Row
+        id={id}
+        key={id}
+        selected={selectedResources.includes(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>
+    ),
+  );
+
+  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'),
+    },
+  ];
+
+  const table = (
+    <IndexTable
+      resourceName={resourceName}
+      itemCount={orders.length}
+      selectedItemsCount={
+        allResourcesSelected ? 'All' : selectedResources.length
+      }
+      onSelectionChange={handleSelectionChange}
+      headings={[
+        {title: 'Order', hidden: true},
+        {title: 'Date'},
+        {title: 'Customer'},
+        {title: 'Total', alignment: 'end'},
+        {title: 'Payment status'},
+        {title: 'Fulfillment status'},
+      ]}
+      bulkActions={bulkActions}
+      selectable
+    >
+      {rowMarkup}
+    </IndexTable>
+  );
+
+  return (
+    <Frame>
+      <div style={{height: '500px'}}>
+        <Modal
+          noScroll
+          activator={activator}
+          open={active}
+          onClose={toggleActive}
+          title="Import customers by CSV"
+          primaryAction={{
+            content: 'Import customers',
+            onAction: toggleActive,
+          }}
+          secondaryActions={[
+            {
+              content: 'Cancel',
+              onAction: toggleActive,
+            },
+          ]}
+        >
+          <Box>
+            <Scrollable style={{height: '65dvh'}}>{table}</Scrollable>
+          </Box>
+        </Modal>
+      </div>
+    </Frame>
+  );
+}

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

@@ -225,6 +225,7 @@ function IndexTableBase({
     selectAllActionsAbsoluteOffset,
     selectAllActionsMaxWidth,
     selectAllActionsOffsetLeft,
+    selectAllActionsOffsetBottom,
     computeTableDimensions,
     isScrolledPastTop,
     selectAllActionsPastTopOffset,
@@ -657,6 +658,9 @@ function IndexTableBase({
       <div
         className={selectAllActionsClassNames}
         style={{
+          insetBlockEnd: isSelectAllActionsSticky
+            ? selectAllActionsOffsetBottom
+            : undefined,
           insetBlockStart: isSelectAllActionsSticky
             ? undefined
             : selectAllActionsAbsoluteOffset,

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

@@ -109,6 +109,7 @@ describe('<IndexTable>', () => {
       selectAllActionsAbsoluteOffset: 0,
       selectAllActionsMaxWidth: 0,
       selectAllActionsOffsetLeft: 0,
+      selectAllActionsOffsetBottom: 0,
       computeTableDimensions: jest.fn(),
       isScrolledPastTop: false,
       scrollbarPastTopOffset: 0,
@@ -790,6 +791,7 @@ describe('<IndexTable>', () => {
         selectAllActionsAbsoluteOffset: 0,
         selectAllActionsMaxWidth: 0,
         selectAllActionsOffsetLeft: 0,
+        selectAllActionsOffsetBottom: 0,
         computeTableDimensions,
         isScrolledPastTop: false,
         scrollbarPastTopOffset: 0,

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

@@ -15,6 +15,9 @@ import {
   BlockStack,
   Box,
   InlineStack,
+  Frame,
+  Modal,
+  Scrollable,
 } from '@shopify/polaris';
 
 export default {
@@ -1310,7 +1313,7 @@ export function WithPagination() {
 }
 
 export function WithBulkActionsAndPagination() {
-  const [selectedItems, setSelectedItems] = useState([]);
+  const [selectedItems, setSelectedItems] = useState<string[] | 'All'>([]);
 
   const resourceName = {
     singular: 'customer',
@@ -1386,3 +1389,110 @@ export function WithBulkActionsAndPagination() {
     </Card>
   );
 }
+
+export function WithinAModal() {
+  const [active, setActive] = useState(true);
+  const [checked, setChecked] = useState(false);
+  const [selectedItems, setSelectedItems] = useState<string[] | 'All'>([]);
+
+  const toggleActive = () => setActive((active) => !active);
+
+  const activator = <Button onClick={toggleActive}>Open</Button>;
+
+  const resourceName = {
+    singular: 'customer',
+    plural: 'customers',
+  };
+
+  const items = Array.from({length: 50}, (_, num) => {
+    return {
+      id: `${num}`,
+      url: '#',
+      name: `Mae Jemison ${num}`,
+      location: 'Decatur, USA',
+      orders: 20,
+      amountSpent: '$24,00',
+    };
+  });
+
+  const promotedBulkActions = [
+    {
+      content: 'Edit customers',
+      onAction: () => console.log('Todo: implement bulk edit'),
+    },
+  ];
+
+  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'),
+    },
+  ];
+
+  const listMarkup = (
+    <ResourceList
+      resourceName={resourceName}
+      items={items}
+      bulkActions={bulkActions}
+      promotedBulkActions={promotedBulkActions}
+      selectedItems={selectedItems}
+      onSelectionChange={setSelectedItems}
+      renderItem={(item) => {
+        const {id, url, name, location} = item;
+        const media = <Avatar customer size="md" name={name} />;
+
+        return (
+          <ResourceItem
+            id={id}
+            url={url}
+            media={media}
+            accessibilityLabel={`View details for ${name}`}
+          >
+            <h3>
+              <Text fontWeight="bold" as="span">
+                {name}
+              </Text>
+            </h3>
+            <div>{location}</div>
+          </ResourceItem>
+        );
+      }}
+    />
+  );
+
+  return (
+    <Frame>
+      <div style={{height: '500px'}}>
+        <Modal
+          noScroll
+          activator={activator}
+          open={active}
+          onClose={toggleActive}
+          title="Import customers by CSV"
+          primaryAction={{
+            content: 'Import customers',
+            onAction: toggleActive,
+          }}
+          secondaryActions={[
+            {
+              content: 'Cancel',
+              onAction: toggleActive,
+            },
+          ]}
+        >
+          <Box>
+            <Scrollable style={{height: '65dvh'}}>{listMarkup}</Scrollable>
+          </Box>
+        </Modal>
+      </div>
+    </Frame>
+  );
+}

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

@@ -179,6 +179,7 @@ export function ResourceList<TItemType extends ResourceListItemData>({
     selectAllActionsAbsoluteOffset,
     selectAllActionsMaxWidth,
     selectAllActionsOffsetLeft,
+    selectAllActionsOffsetBottom,
     computeTableDimensions,
     isScrolledPastTop,
     selectAllActionsPastTopOffset,
@@ -582,6 +583,9 @@ export function ResourceList<TItemType extends ResourceListItemData>({
           ? undefined
           : selectAllActionsAbsoluteOffset,
         width: selectAllActionsMaxWidth,
+        bottom: isSelectAllActionsSticky
+          ? selectAllActionsOffsetBottom
+          : undefined,
         left: isSelectAllActionsSticky ? selectAllActionsOffsetLeft : undefined,
       }}
     >

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

@@ -79,6 +79,7 @@ describe('<ResourceList />', () => {
     selectAllActionsAbsoluteOffset: 0,
     selectAllActionsMaxWidth: 0,
     selectAllActionsOffsetLeft: 0,
+    selectAllActionsOffsetBottom: 0,
     computeTableDimensions: jest.fn(),
     scrollbarPastTopOffset: 0,
     selectAllActionsPastTopOffset: 0,
@@ -1339,6 +1340,7 @@ describe('<ResourceList />', () => {
         selectAllActionsAbsoluteOffset: 0,
         selectAllActionsMaxWidth: 0,
         selectAllActionsOffsetLeft: 0,
+        selectAllActionsOffsetBottom: 0,
         computeTableDimensions,
         scrollbarPastTopOffset: 0,
         selectAllActionsPastTopOffset: 0,