[IndexFilters] Remove IndexFiltersManager, reinstate useSetIndexFiltersMode (#10745)

### WHY are these changes introduced?

We recently removed the logic to disable page actions when in filtering
mode, so the work to extract the filtering state into global context is
no longer required, and should be cleaned up. This PR reverts things to
how they were before https://github.com/Shopify/polaris/pull/10490/files
merged.

### WHAT is this pull request doing?

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [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 on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [x] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

Author: mrcthms

.changeset/spicy-pugs-begin.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': major
+---
+
+[IndexFilters] Remove IndexFiltersManager in AppProvider

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

@@ -16,7 +16,6 @@ import {
   ScrollLockManager,
   ScrollLockManagerContext,
 } from '../../utilities/scroll-lock-manager';
-import {IndexFiltersManager} from '../../utilities/index-filters';
 import {
   StickyManager,
   StickyManagerContext,
@@ -168,7 +167,7 @@ export class AppProvider extends Component<AppProviderProps, State> {
                     <PortalsManager>
                       <FocusManager>
                         <EphemeralPresenceManager>
-                          <IndexFiltersManager>{children}</IndexFiltersManager>
+                          {children}
                         </EphemeralPresenceManager>
                       </FocusManager>
                     </PortalsManager>

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

@@ -1122,107 +1122,3 @@ export function WithQueryFieldAndFiltersHidden() {
     </Card>
   );
 }
-
-export function WrappedInAPage() {
-  return (
-    <Page
-      backAction={{content: 'Products', url: '#'}}
-      title="3/4 inch Leather pet collar"
-      titleMetadata={<Badge status="success">Paid</Badge>}
-      subtitle="Perfect for any pet"
-      compactTitle
-      primaryAction={{content: 'Save'}}
-      secondaryActions={[
-        {
-          content: 'Delete',
-          destructive: true,
-          icon: DeleteMinor,
-          accessibilityLabel: 'Delete action label',
-          onAction: () => console.log('Delete action'),
-        },
-        {
-          content: 'View on your store',
-          icon: ViewMinor,
-          onAction: () => console.log('View on your store action'),
-        },
-      ]}
-      actionGroups={[
-        {
-          title: 'Promote',
-          icon: MobileVerticalDotsMajor,
-          actions: [
-            {
-              content: 'Share on Facebook',
-              accessibilityLabel: 'Individual action label',
-              onAction: () => console.log('Share on Facebook action'),
-            },
-          ],
-        },
-      ]}
-      pagination={{
-        hasPrevious: true,
-        hasNext: true,
-      }}
-    >
-      <BasicExample />
-    </Page>
-  );
-}
-
-export function WrappedInAPageWithCustomActions() {
-  const {mode} = useSetIndexFiltersMode();
-  const shouldDisableAction = mode !== IndexFiltersMode.Default;
-  return (
-    <Page
-      backAction={{content: 'Products', url: '#'}}
-      title="3/4 inch Leather pet collar"
-      titleMetadata={<Badge status="success">Paid</Badge>}
-      subtitle="Perfect for any pet"
-      compactTitle
-      primaryAction={
-        <Button
-          primary
-          disabled={shouldDisableAction}
-          connectedDisclosure={{
-            disabled: shouldDisableAction,
-            accessibilityLabel: 'Other save actions',
-            actions: [{content: 'Save as new'}],
-          }}
-        >
-          Save
-        </Button>
-      }
-      secondaryActions={
-        <Button
-          disabled={shouldDisableAction}
-          connectedDisclosure={{
-            disabled: shouldDisableAction,
-            accessibilityLabel: 'Other save actions',
-            actions: [{content: 'Rename'}],
-          }}
-        >
-          Update
-        </Button>
-      }
-      actionGroups={[
-        {
-          title: 'Promote',
-          icon: MobileVerticalDotsMajor,
-          actions: [
-            {
-              content: 'Share on Facebook',
-              accessibilityLabel: 'Individual action label',
-              onAction: () => console.log('Share on Facebook action'),
-            },
-          ],
-        },
-      ]}
-      pagination={{
-        hasPrevious: true,
-        hasNext: true,
-      }}
-    >
-      <BasicExample />
-    </Page>
-  );
-}

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

@@ -13,7 +13,6 @@ import type {FiltersProps} from '../Filters';
 import {Tabs} from '../Tabs';
 import type {TabsProps} from '../Tabs';
 import {useBreakpoints} from '../../utilities/breakpoints';
-import {IndexFiltersMode} from '../../utilities/index-filters';
 
 import {useIsSticky} from './hooks';
 import {
@@ -27,6 +26,7 @@ import type {
   IndexFiltersCancelAction,
   SortButtonChoice,
 } from './types';
+import {IndexFiltersMode} from './types';
 import styles from './IndexFilters.scss';
 
 const DEFAULT_IGNORED_TAGS = ['INPUT', 'SELECT', 'TEXTAREA'];

polaris-react/src/components/IndexFilters/hooks/index.ts

@@ -1 +1,2 @@
+export * from './useSetIndexFiltersMode';
 export * from './useIsSticky';

polaris-react/src/components/IndexFilters/hooks/useIsSticky/tests/useIsSticky.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {intersectionObserver} from '@shopify/jest-dom-mocks';
 import {mountWithApp} from 'tests/utilities';
 
-import {IndexFiltersMode} from '../../../../../utilities/index-filters';
+import {IndexFiltersMode} from '../../../types';
 import {useIsSticky} from '..';
 
 interface Props {

polaris-react/src/components/IndexFilters/hooks/useIsSticky/useIsSticky.ts

@@ -2,7 +2,7 @@ import {useEffect, useRef, useState} from 'react';
 import type {RefObject} from 'react';
 
 import {debounce} from '../../../../utilities/debounce';
-import type {IndexFiltersMode} from '../../../../utilities/index-filters';
+import type {IndexFiltersMode} from '../../types';
 
 const DEBOUNCE_PERIOD = 250;
 

polaris-react/src/components/IndexFilters/hooks/useSetIndexFiltersMode/index.ts

@@ -0,0 +1 @@
+export * from './useSetIndexFiltersMode';

polaris-react/src/components/IndexFilters/hooks/useSetIndexFiltersMode/useSetIndexFiltersMode.tsx

@@ -0,0 +1,11 @@
+import {useState} from 'react';
+
+import {IndexFiltersMode} from '../../types';
+
+export function useSetIndexFiltersMode(
+  defaultMode: IndexFiltersMode = IndexFiltersMode.Default,
+) {
+  const [mode, setMode] = useState<IndexFiltersMode>(defaultMode);
+
+  return {mode, setMode};
+}

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

@@ -5,8 +5,7 @@ import {matchMedia} from '@shopify/jest-dom-mocks';
 
 import {Tabs} from '../../Tabs';
 import {Filters} from '../../Filters';
-import {IndexFilters} from '..';
-import {IndexFiltersMode} from '../../../utilities/index-filters';
+import {IndexFilters, IndexFiltersMode} from '..';
 import type {IndexFiltersProps} from '../IndexFilters';
 import {SearchFilterButton, SortButton, UpdateButtons} from '../components';