[IndexFilters] Remove IndexFiltersManager, reinstate useSetIndexFilte…

…rsMode (#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

.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';
 

polaris-react/src/components/IndexFilters/types.ts

@@ -19,3 +19,9 @@ export interface IndexFiltersCancelAction {
   disabled?: boolean;
   loading?: boolean;
 }
+
+export enum IndexFiltersMode {
+  Default = 'DEFAULT',
+  Filtering = 'FILTERING',
+  EditingColumns = 'EDITING_COLUMNS',
+}

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

@@ -19,11 +19,6 @@ import type {LinkLikeComponent} from '../../utilities/link';
 import {FeaturesContext} from '../../utilities/features';
 import type {FeaturesConfig} from '../../utilities/features';
 import {EphemeralPresenceManager} from '../EphemeralPresenceManager';
-import {
-  IndexFiltersMode,
-  IndexFiltersModeContext,
-} from '../../utilities/index-filters';
-import type {IndexFiltersModeContextType} from '../../utilities/index-filters';
 
 type FrameContextType = NonNullable<React.ContextType<typeof FrameContext>>;
 type MediaQueryContextType = NonNullable<
@@ -43,8 +38,6 @@ export interface WithPolarisTestProviderOptions {
   features?: FeaturesConfig;
   // Contexts provided by Frame
   frame?: Partial<FrameContextType>;
-  // Contexts provided by IndexFilters
-  indexFilters?: Partial<IndexFiltersModeContextType>;
 }
 
 export interface PolarisTestProviderProps
@@ -57,11 +50,6 @@ const defaultMediaQuery: MediaQueryContextType = {
   isNavigationCollapsed: false,
 };
 
-const defaultIndexFilters: IndexFiltersModeContextType = {
-  mode: IndexFiltersMode.Default,
-  setMode: noop,
-};
-
 export function PolarisTestProvider({
   strict,
   children,
@@ -70,7 +58,6 @@ export function PolarisTestProvider({
   mediaQuery,
   features,
   frame,
-  indexFilters,
 }: PolarisTestProviderProps) {
   const Wrapper = strict ? StrictMode : Fragment;
   const intl = useMemo(() => new I18n(i18n || {}), [i18n]);
@@ -82,8 +69,6 @@ export function PolarisTestProvider({
 
   const mergedMediaQuery = merge(defaultMediaQuery, mediaQuery);
 
-  const mergedIndexFilters = merge(defaultIndexFilters, indexFilters);
-
   return (
     <Wrapper>
       <FeaturesContext.Provider value={features}>
@@ -96,11 +81,7 @@ export function PolarisTestProvider({
                     <FocusManager>
                       <EphemeralPresenceManager>
                         <FrameContext.Provider value={mergedFrame}>
-                          <IndexFiltersModeContext.Provider
-                            value={mergedIndexFilters}
-                          >
-                            {children}
-                          </IndexFiltersModeContext.Provider>
+                          {children}
                         </FrameContext.Provider>
                       </EphemeralPresenceManager>
                     </FocusManager>

polaris-react/src/index.ts

@@ -183,7 +183,11 @@ export type {IconProps} from './components/Icon';
 export {Image} from './components/Image';
 export type {ImageProps} from './components/Image';
 
-export {IndexFilters} from './components/IndexFilters';
+export {
+  IndexFilters,
+  useSetIndexFiltersMode,
+  IndexFiltersMode,
+} from './components/IndexFilters';
 export type {
   IndexFiltersProps,
   SortButtonChoice,
@@ -419,11 +423,6 @@ export {WithinContentContext as _SECRET_INTERNAL_WITHIN_CONTENT_CONTEXT} from '.
 export {useEventListener} from './utilities/use-event-listener';
 export {useTheme} from './utilities/use-theme';
 export {useIndexResourceState} from './utilities/use-index-resource-state';
-export {
-  useSetIndexFiltersMode,
-  IndexFiltersMode,
-  IndexFiltersManager,
-} from './utilities/index-filters';
 export {
   useRowHovered as useIndexTableRowHovered,
   useRowSelected as useIndexTableRowSelected,