chore: delete deprecated components for v0.13.0 (#1106)

BREAKING CHANGE: removed deprecated `Spinner` component
BREAKING CHANGE: removed deprecated `Tokenizer` component
BREAKING CHANGE: **Toolbar**: removed deprecated `onToolbarClick` in favour of `onClick`
BREAKING CHANGE: **Device**: removed deprecated, class-based API. Please use the [individual util functions](https://sap.github.io/ui5-webcomponents-react/?path=/docs/migration-guide--page#device-api) instead.
BREAKING CHANGE: **Device**: removed the optional `oListener` parameter from all device attach/detach functions (mostly used internally)

Author: MarcusNotheis

docs/2-MigrationGuide.stories.mdx

@@ -52,6 +52,52 @@ const withParameters = i18nBundle.getText('CAROUSEL_DOT_TEXT', 5, 20);
 
 The `Toolbar` was firing an event `onToolbarClick`. This event has been replaced with `onClick`.
 
+#### Device API
+
+The deprecated, class-based `Device` API is now removed. Please don't be shocked by this extensive list, most of the APIs
+were only used internally and are mentioned here for the sake of completeness.
+
+- `Device.os` is replaced by `getOS()` (`'import { getOS } from '@ui5/webcomponents-react-base/lib/Device';`)
+- `Device.browser` is replaced by `getBrowser()` (`'import { getBrowser } from '@ui5/webcomponents-react-base/lib/Device';`)
+- `Device.system` is replaced by `getSystem()` (`'import { getSystem } from '@ui5/webcomponents-react-base/lib/Device';`)
+
+  <br />
+
+- `Device.support.touch` is replaced by `supportTouch()` (`'import { supportTouch } from '@ui5/webcomponents-react-base/lib/Device';`)
+- `Device.support.pointer` is replaced by `supportPointerEvents()` (`'import { supportPointerEvents } from '@ui5/webcomponents-react-base/lib/Device';`)
+- `Device.support.matchmedia` is replaced by `supportMatchMedia()` (`'import { supportMatchMedia } from '@ui5/webcomponents-react-base/lib/Device';`)
+- `Device.support.matchmedialistener` is replaced by `supportMatchMediaListener()` (`'import { supportMatchMediaListener } from '@ui5/webcomponents-react-base/lib/Device';`)
+- `Device.support.orientation` is replaced by `supportOrientation()` (`'import { supportOrientation } from '@ui5/webcomponents-react-base/lib/Device';`)
+- `Device.support.retina` is replaced by `supportRetina()` (`'import { supportRetina } from '@ui5/webcomponents-react-base/lib/Device';`)
+- `Device.support.websocket` is replaced by `supportWebSocket()` (`'import { supportWebSocket } from '@ui5/webcomponents-react-base/lib/Device';`)
+- `Device.support.input.placeholder` is replaced by `supportInputPlaceholder()` (`'import { supportInputPlaceholder } from '@ui5/webcomponents-react-base/lib/Device';`)
+
+  <br />
+
+- `Device.orientation.landscape` is replaced by `getOrientation().landscape` (`'import { getOrientation } from '@ui5/webcomponents-react-base/lib/Device';`)
+- `Device.orientation.portrait` is replaced by `getOrientation().portrait` (`'import { getOrientation } from '@ui5/webcomponents-react-base/lib/Device';`)
+- `Device.orientation.attachHandler` is replaced by `attachOrientationChangeHandler` (`'import { attachOrientationChangeHandler } from '@ui5/webcomponents-react-base/lib/Device';`)<br />
+  In addition, the second, optional parameter `oListener` got removed from `attachOrientationChangeHandler`.
+- `Device.orientation.detachHandler` is replaced by `detachOrientationChangeHandler` (`'import { detachOrientationChangeHandler } from '@ui5/webcomponents-react-base/lib/Device';`)<br />
+  In addition, the second, optional parameter `oListener` got removed from `detachOrientationChangeHandler`.
+- `Device.resize.width` is replaced by `getWindowSize().width` (`'import { getWindowSize } from '@ui5/webcomponents-react-base/lib/Device';`)
+- `Device.resize.height` is replaced by `getWindowSize().height` (`'import { getWindowSize } from '@ui5/webcomponents-react-base/lib/Device';`)
+- `Device.resize.attachHandler` is replaced by `attachResizeHandler` (`'import { attachResizeHandler } from '@ui5/webcomponents-react-base/lib/Device';`)<br />
+  In addition, the second, optional parameter `oListener` got removed from `attachResizeHandler`.
+- `Device.resize.detachHandler` is replaced by `detachResizeHandler` (`'import { detachResizeHandler } from '@ui5/webcomponents-react-base/lib/Device';`)<br />
+  In addition, the second, optional parameter `oListener` got removed from `detachResizeHandler`.
+
+  <br />
+
+- `Device.media.getCurrentRange` is replaced by `getCurrentRange` (`'import { getCurrentRange } from '@ui5/webcomponents-react-base/lib/Device';`)
+- `Device.media.hasRangeSet` is replaced by `hasRangeSet` (`'import { hasRangeSet } from '@ui5/webcomponents-react-base/lib/Device';`)
+- `Device.media.initRangeSet` is replaced by `initRangeSet` (`'import { initRangeSet } from '@ui5/webcomponents-react-base/lib/Device';`)
+- `Device.media.removeRangeSet` is replaced by `removeRangeSet` (`'import { removeRangeSet } from '@ui5/webcomponents-react-base/lib/Device';`)
+- `Device.media.attachHandler` is replaced by `attachHandler` (`'import { attachHandler } from '@ui5/webcomponents-react-base/lib/Device';`)<br />
+  In addition, the second, optional parameter `oListener` got removed from `attachHandler`.
+- `Device.media.detachHandler` is replaced by `detachHandler` (`'import { detachHandler } from '@ui5/webcomponents-react-base/lib/Device';`)<br />
+  In addition, the second, optional parameter `oListener` got removed from `detachHandler`.
+
 <br />
 
 ### Deleted Components

packages/base/src/Device/EventRegistry.test.ts

@@ -1,54 +1,45 @@
-import { EventRegistry } from './EventRegistry';
-import { getCurrentRange, MediaLegacy, RANGESETS } from './Media';
+import {
+  attachMediaHandler,
+  detachMediaHandler,
+  getCurrentRange,
+  hasRangeSet,
+  initRangeSet,
+  RANGESETS,
+  removeRangeSet
+} from './Media';
+import { MediaEventProvider } from './MediaEventProvider';
 
 describe('Device - Media', () => {
-  test('invoke constructor', () => {
-    const media = new MediaLegacy();
-    expect(media.hasRangeSet(RANGESETS.SAP_STANDARD)).toBe(true);
-    expect(media.hasRangeSet(RANGESETS.SAP_STANDARD_EXTENDED)).toBe(true);
-    media.initRangeSet(RANGESETS.SAP_STANDARD_EXTENDED);
-    expect(media.hasRangeSet(RANGESETS.SAP_STANDARD)).toBe(true);
-  });
-
   test('getCurrentRangeSet with undefined Range Set', () => {
     expect(getCurrentRange('Not_Defined', 100)).toBeNull();
   });
 
   test('Attach, fire and Detach Event', () => {
-    const media = new MediaLegacy();
     const callback = jest.fn();
-    // @ts-ignore
-    media.attachHandler(callback, this);
-    expect(EventRegistry.mEventRegistry.hasOwnProperty('media_Std'));
-    EventRegistry.fireEvent('media_Std');
-    expect(callback).toBeCalled();
-    // @ts-ignore
-    media.detachHandler(callback, this);
-    expect(EventRegistry.mEventRegistry.hasOwnProperty('media_Std')).toBe(false);
+    attachMediaHandler(callback);
+    expect(MediaEventProvider.isHandlerAttached('media_Std', callback)).toBeTruthy();
+    detachMediaHandler(callback);
+    expect(MediaEventProvider.isHandlerAttached('media_Std', callback)).toBeFalsy();
   });
 
   test('Init Custom Range Set and remove it again', () => {
-    const media = new MediaLegacy();
-    media.initRangeSet('MyRangeSet', [200, 400], 'px', ['Small', 'Medium', 'Large']);
-    expect(media.getCurrentRange('MyRangeSet', 300).name).toBe('Medium');
-    media.removeRangeSet('MyRangeSet');
+    initRangeSet('MyRangeSet', [200, 400], 'px', ['Small', 'Medium', 'Large']);
+    expect(getCurrentRange('MyRangeSet', 300).name).toBe('Medium');
+    removeRangeSet('MyRangeSet');
   });
 
   test('Init Custom Range Set and remove it again w/ matchmedialistener', () => {
-    const media = new MediaLegacy();
-    media.initRangeSet('MyRangeSet', [200, 400], 'px', ['Small', 'Medium', 'Large']);
-    expect(media.getCurrentRange('MyRangeSet', 300).name).toBe('Medium');
-    media.removeRangeSet('MyRangeSet');
+    initRangeSet('MyRangeSet', [200, 400], 'px', ['Small', 'Medium', 'Large']);
+    expect(getCurrentRange('MyRangeSet', 300).name).toBe('Medium');
+    removeRangeSet('MyRangeSet');
   });
 
   test('Remove unknown rangeset should not crash', () => {
-    const media = new MediaLegacy();
-    expect(() => media.removeRangeSet('MyRangeSet')).not.toThrow();
+    expect(() => removeRangeSet('MyRangeSet')).not.toThrow();
   });
 
   test("Don't remove build in rangesets", () => {
-    const media = new MediaLegacy();
-    media.removeRangeSet(RANGESETS.SAP_STANDARD);
-    expect(media.hasRangeSet(RANGESETS.SAP_STANDARD)).toBe(true);
+    removeRangeSet(RANGESETS.SAP_STANDARD);
+    expect(hasRangeSet(RANGESETS.SAP_STANDARD)).toBe(true);
   });
 });

packages/base/src/Device/EventRegistry.ts

@@ -1,6 +1,5 @@
 import { Logger } from '@ui5/webcomponents-react-base/lib/Logger';
-import { deprecationNotice } from '@ui5/webcomponents-react-base/lib/Utils';
-import { EventRegistry } from './EventRegistry';
+import { MediaEventProvider } from './MediaEventProvider';
 import { supportMatchMediaListener } from './Support';
 import { changeRootCSSClass, getQuery, matchLegacyBySize } from './utils';
 
@@ -31,6 +30,8 @@ interface RangeSet {
   listener?: () => void;
 }
 
+const eventProvider = MediaEventProvider;
+
 // private helpers
 const initializedQuerySets: Record<string, RangeSet> = {};
 
@@ -93,7 +94,7 @@ const handleChange = (name: string): void => {
     () => {
       const mParams = checkQueries(name, false);
       if (mParams) {
-        EventRegistry.fireEvent(`media_${name}`, mParams);
+        eventProvider.fireEvent(`media_${name}`, mParams);
       }
     },
     supportMatchMediaListener() ? 0 : 100
@@ -190,8 +191,6 @@ export const initRangeSet = (
   }
 
   if (hasRangeSet(oConfig.name)) {
-    // TODO v0.12.0 - Reactivate this line again once the Device Class is removed.
-    // Logger.info(`Range set ${oConfig.name} has already been initialized`, 'DEVICE.MEDIA');
     return;
   }
 
@@ -249,95 +248,15 @@ export const removeRangeSet = (rangeSetName: string): void => {
   }
 
   refreshCSSClasses(rangeSetName, '', true);
-  delete EventRegistry.mEventRegistry[`media_${rangeSetName}`];
+  // eslint-disable-next-line no-underscore-dangle
+  delete eventProvider._eventRegistry[`media_${rangeSetName}`];
   delete initializedQuerySets[rangeSetName];
 };
 
-export const attachHandler = (fnFunction, oListener?, name: string = DEFAULT_RANGE_SET): void => {
-  EventRegistry.attachEvent(`media_${name}`, fnFunction, oListener);
+export const attachMediaHandler = (fnFunction, name: string = DEFAULT_RANGE_SET): void => {
+  eventProvider.attachEvent(`media_${name}`, fnFunction);
 };
 
-export const detachHandler = (fnFunction, oListener?, name: string = DEFAULT_RANGE_SET): void => {
-  EventRegistry.detachEvent(`media_${name}`, fnFunction, oListener);
+export const detachMediaHandler = (fnFunction, name: string = DEFAULT_RANGE_SET): void => {
+  eventProvider.detachEvent(`media_${name}`, fnFunction);
 };
-
-export class MediaLegacy {
-  constructor() {
-    if (!initializedQuerySets[DEFAULT_RANGE_SET]) {
-      initRangeSet();
-    }
-    if (!initializedQuerySets[RANGESETS.SAP_STANDARD_EXTENDED]) {
-      initRangeSet(RANGESETS.SAP_STANDARD_EXTENDED);
-    }
-  }
-
-  // Public API
-  public RANGESETS = RANGESETS;
-  public predefinedRangeSets = DEFAULT_RANGESETS;
-
-  public getCurrentRange(rangeSetName: string, width: number) {
-    deprecationNotice(
-      'Device.media.getCurrentRange',
-      `Accessing 'Device.media.getCurrentRange' is deprecated and will be removed in the next major version. 
-    Please use 'getCurrentRange' ('import { getCurrentRange } from '@ui5/webcomponents-react-base/lib/Media') instead.`
-    );
-    return getCurrentRange(rangeSetName, width);
-  }
-
-  public hasRangeSet(name) {
-    deprecationNotice(
-      'Device.media.hasRangeSet',
-      `Accessing 'Device.media.hasRangeSet' is deprecated and will be removed in the next major version. 
-    Please use 'hasRangeSet' ('import { hasRangeSet } from '@ui5/webcomponents-react-base/lib/Media') instead.`
-    );
-    return hasRangeSet(name);
-  }
-
-  public initRangeSet(
-    sName?: string,
-    aRangeBorders?: number[],
-    sUnit?: string,
-    aRangeNames?: string[],
-    bSuppressClasses?: boolean
-  ) {
-    deprecationNotice(
-      'Device.media.initRangeSet',
-      `Accessing 'Device.media.initRangeSet' is deprecated and will be removed in the next major version. 
-    Please use 'initRangeSet' ('import { initRangeSet } from '@ui5/webcomponents-react-base/lib/Media') instead.`
-    );
-    return initRangeSet(sName, aRangeBorders, sUnit, aRangeNames, bSuppressClasses);
-  }
-
-  public removeRangeSet(name) {
-    deprecationNotice(
-      'Device.media.removeRangeSet',
-      `Accessing 'Device.media.removeRangeSet' is deprecated and will be removed in the next major version. 
-    Please use 'removeRangeSet' ('import { removeRangeSet } from '@ui5/webcomponents-react-base/lib/Media') instead.`
-    );
-    return removeRangeSet(name);
-  }
-
-  public attachHandler(fnFunction, oListener?, name: string = DEFAULT_RANGE_SET) {
-    deprecationNotice(
-      'Device.media.attachHandler',
-      `Accessing 'Device.media.attachHandler' is deprecated and will be removed in the next major version. 
-    Please use 'attachHandler' ('import { attachHandler } from '@ui5/webcomponents-react-base/lib/Media') instead.`
-    );
-    return attachHandler(fnFunction, oListener, name);
-  }
-
-  public detachHandler(fnFunction, oListener?, name: string = DEFAULT_RANGE_SET) {
-    deprecationNotice(
-      'Device.media.detachHandler',
-      `Accessing 'Device.media.detachHandler' is deprecated and will be removed in the next major version. 
-    Please use 'detachHandler' ('import { detachHandler } from '@ui5/webcomponents-react-base/lib/Media') instead.`
-    );
-    return detachHandler(fnFunction, oListener, name);
-  }
-
-  // Private API
-  private static getRangeInfo = getRangeInfo;
-  private checkQueries = checkQueries;
-  private handleChange = handleChange;
-  matches = matches;
-}

packages/base/src/Device/Media.test.ts

@@ -0,0 +1,3 @@
+import EventProvider from '@ui5/webcomponents-base/dist/EventProvider';
+
+export const MediaEventProvider = new EventProvider();