Remove resize-observer-polyfill

docs/getting-started/changelog.md

@@ -15,6 +15,8 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Fixed a bug where `sl-dialog` and `sl-drawer` would emit the `sl-hide` event twice [#275](https://github.com/shoelace-style/shoelace/issues/275)
 - Fixed a bug where calling `event.preventDefault()` on certain form elements wouldn't prevent `sl-form` from submitting [#277](https://github.com/shoelace-style/shoelace/issues/277)
 - Restyled `sl-spinner` so the track is visible and the indicator is smaller.
+- Removed `resize-observer-polyfill` in favor of `@types/resize-observer-browser` since all target browsers support `ResizeObserver`
+
 ## 2.0.0-beta.23
 
 - Added `sl-format-number` component

package-lock.json

@@ -214,6 +214,12 @@
       "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
       "dev": true
     },
+    "@types/resize-observer-browser": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/@types/resize-observer-browser/-/resize-observer-browser-0.1.4.tgz",
+      "integrity": "sha512-rPvqs+1hL/5hbES/0HTdUu4lvNmneiwKwccbWe7HGLWbnsLdqKnQHyWLg4Pj0AMO7PLHCwBM1Cs8orChdkDONg==",
+      "dev": true
+    },
     "@typescript-eslint/eslint-plugin": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.0.1.tgz",
@@ -4355,11 +4361,6 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
       "dev": true
     },
-    "resize-observer-polyfill": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
-      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
-    },
     "resolve": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.14.1.tgz",

package.json

@@ -41,6 +41,7 @@
   "devDependencies": {
     "@stencil/eslint-plugin": "^0.3.1",
     "@stencil/sass": "^1.3.2",
+    "@types/resize-observer-browser": "^0.1.4",
     "@typescript-eslint/eslint-plugin": "^4.0.1",
     "@typescript-eslint/parser": "^4.0.1",
     "bluebird": "^3.7.2",
@@ -68,8 +69,7 @@
   "dependencies": {
     "@popperjs/core": "^2.5.3",
     "@stencil/core": "^2.3.0",
-    "color": "^3.1.2",
-    "resize-observer-polyfill": "^1.5.1"
+    "color": "^3.1.2"
   },
   "husky": {
     "hooks": {

src/components.d.ts

@@ -2655,7 +2655,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the element is resized.
          */
-        "onSl-resize"?: (event: CustomEvent<ResizeObserverEntry[]>) => void;
+        "onSl-resize"?: (event: CustomEvent<readonly ResizeObserverEntry[]>) => void;
     }
     interface SlResponsiveEmbed {
         /**

src/components/range/range.tsx

@@ -1,5 +1,4 @@
 import { Component, Event, EventEmitter, Method, Prop, State, h } from '@stencil/core';
-import ResizeObserver from 'resize-observer-polyfill';
 
 /**
  * @since 2.0

src/components/resize-observer/resize-observer.tsx

@@ -1,5 +1,4 @@
 import { Component, Element, Event, EventEmitter, h } from '@stencil/core';
-import ResizeObserver from 'resize-observer-polyfill';
 
 /**
  * @since 2.0
@@ -18,10 +17,10 @@ export class ResizeObserverUtility {
   @Element() host: HTMLSlResizeObserverElement;
 
   /** Emitted when the element is resized. */
-  @Event({ eventName: 'sl-resize' }) slResize: EventEmitter<ResizeObserverEntry[]>;
+  @Event({ eventName: 'sl-resize' }) slResize: EventEmitter<readonly ResizeObserverEntry[]>;
 
   connectedCallback() {
-    this.resizeObserver = new ResizeObserver(event => this.slResize.emit(event));
+    this.resizeObserver = new ResizeObserver(entries => this.slResize.emit(entries));
     this.handleSlotChange = this.handleSlotChange.bind(this);
   }
 

src/components/select/select.tsx

@@ -1,7 +1,6 @@
 import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch, h } from '@stencil/core';
 import { getTextContent } from '../../utilities/slot';
 import { hasSlot } from '../../utilities/slot';
-import ResizeObserver from 'resize-observer-polyfill';
 
 let id = 0;
 

src/components/tab-group/tab-group.tsx

@@ -2,7 +2,6 @@ import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch, h
 import { getOffset } from '../../utilities/offset';
 import { scrollIntoView } from '../../utilities/scroll';
 import { focusVisible } from '../../utilities/focus-visible';
-import ResizeObserver from 'resize-observer-polyfill';
 
 /**
  * @since 2.0

src/components/textarea/textarea.tsx

@@ -1,6 +1,5 @@
 import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch, h } from '@stencil/core';
 import { hasSlot } from '../../utilities/slot';
-import ResizeObserver from 'resize-observer-polyfill';
 
 let id = 0;