How to use the @wordpress/hooks.removeFilter function in @wordpress/hooks

import * as hooks from '@wordpress/hooks';

hooks.addAction('my-action', 'my/namespace', () => {});
hooks.addAction('my-action', 'my/namespace', () => {}, 20);

hooks.addFilter('my-filter', 'my/namespace', (foo: string, bar: number) => `${foo}${bar}`);
hooks.addFilter('my-filter', 'my/namespace', (foo: number, bar: number) => bar, 23);

hooks.removeAction('my-action', 'my/namespace');
hooks.removeFilter('my-filter', 'my/namespace');

// $ExpectType boolean
hooks.hasAction('my-action');
// $ExpectType boolean
hooks.hasFilter('my-filter');

hooks.removeAllActions('my-action', 'my/namespace');
hooks.removeAllFilters('my-filter', 'my/namespace');

// $ExpectType unknown
hooks.doAction('my-action');
// $ExpectType string
hooks.doAction('my-action', 'foo');

// $ExpectType unknown
hooks.applyFilters('my-filter');

componentWillUnmount() {
		removeFilter( 'stackable.setAttributes', `stackable/button-icon-popover-control-${ this.instanceId }` )

		// Remove event listener for moousedown
		document.removeEventListener( 'mousedown', this.handleOnClickOutside )
	}

/**
 * WordPress dependencies
 */
import {
	addFilter, doAction, removeFilter,
} from '@wordpress/hooks'
import { BlockAlignmentToolbar, BlockControls } from '@wordpress/block-editor'
import { __ } from '@wordpress/i18n'
import deepmerge from 'deepmerge'
import { Fragment } from '@wordpress/element'
import { i18n } from 'stackable'
import { Toolbar, ToggleControl } from '@wordpress/components'

// When block background is turned on, change the ailgnment and block inner width also.
removeFilter( 'stackable.setAttributes', 'stackable/module/block-background/show' )
addFilter( 'stackable.setAttributes', 'stackable/module/block-background/show', ( attributes, blockProps ) => {
	if ( typeof attributes.showBlockBackground === 'undefined' ) {
		return attributes
	}

	const {
		align = '',
		blockInnerWidth = '',
	} = blockProps.attributes
	attributes.align = attributes.showBlockBackground ? 'full' : ( blockInnerWidth || 'center' )
	attributes.blockInnerWidth = attributes.showBlockBackground ? ( ! align ? 'center' : align ) : ''

	return attributes
} )

const addInspectorPanel = ( output, props ) => {

'googlesitekit.AuthCountIncrease', ( count ) => {
								// Only run once.
								removeFilter( 'googlesitekit.TotalNotifications', 'googlesitekit.AuthCountIncrease' );
								return count + 1;
							} );
					}

export function unregisterFormatType( name ) {
	const oldFormat = select( 'core/rich-text' ).getFormatType( name );

	if ( ! oldFormat ) {
		window.console.error(
			`Format ${ name } is not registered.`
		);
		return;
	}

	if ( oldFormat.__experimentalCreatePrepareEditableTree ) {
		removeFilter( 'experimentalRichText', name );
	}

	dispatch( 'core/rich-text' ).removeFormatTypes( name );

	return oldFormat;
}

componentWillUnmount() {
		this._isMounted = false;

		removeFilter( 'googlekit.SettingsConfirmed', 'googlekit.AnalyticsSettingsConfirmed' );
	}

appendImportant,
	appendImportantAll,
} from '~stackable/util'

/**
 * WordPress dependencies
 */
import {
	addFilter, applyFilters, doAction, removeFilter,
} from '@wordpress/hooks'
import { __ } from '@wordpress/i18n'
import deepmerge from 'deepmerge'
import { Fragment } from '@wordpress/element'
import { i18n } from 'stackable'

removeFilter( 'stackable.setAttributes', 'stackable/module/block-spacing' )
addFilter( 'stackable.setAttributes', 'stackable/module/block-spacing', ( attributes, blockProps ) => {
	if ( typeof attributes.align === 'undefined' ) {
		return attributes
	}
	if ( attributes.align === 'full' && blockProps.align !== 'full' ) {
		attributes.marginRight = ''
		attributes.marginLeft = ''
		attributes.tabletMarginRight = ''
		attributes.tabletMarginLeft = ''
		attributes.tabletPaddingRight = ''
		attributes.tabletPaddingLeft = ''
	}
	return attributes
} )

const inspectorControls = ( blockName, options ) => ( output, props ) => {

componentWillUnmount() {
		removeFilter( 'stackable.setAttributes', `stackable/panel-advanced-settings-${ this.instanceId }` )
	}

const blockTitle = blockName => {
	removeFilter( 'stackable.panel-spacing-body.edit.before', 'stackable/block-title' )
	addFilter( `stackable.${ blockName }.edit.inspector.style.block`, `stackable/${ blockName }/block-title`, addInspectorPanel, 17 )
	addFilter( `stackable.${ blockName }.attributes`, `stackable/${ blockName }/block-title`, addAttributes )
	addFilter( 'stackable.panel-spacing-body.edit.before', 'stackable/block-title', addTitleSpacing )
	addFilter( `stackable.${ blockName }.edit.output.before`, `stackable/${ blockName }/block-title`, addTitleEditOutput )
	addFilter( `stackable.${ blockName }.save.output.before`, `stackable/${ blockName }/block-title`, addTitleSaveOutput )
	addFilter( `stackable.${ blockName }.styles`, `stackable/${ blockName }/block-title`, addStyles )
	addFilter( 'stackable.with-content-align-reseter.attributeNamesToReset', `stackable/${ blockName }/block-title`, centerBlockTitle )
	addFilter( `stackable.${ blockName }.design.filtered-block-attributes`, `stackable/${ blockName }/block-title`, removeAttributesFromDesignAttributeExport )
	doAction( `stackable.module.block-title`, blockName )
}