Drop old browsers

Author: tkrotoff

README.md

@@ -57,10 +57,6 @@ function MyComponent() {
 - [Boxes example](examples/Boxes.tsx)
 - [Bootstrap example](examples/Bootstrap.tsx): https://codesandbox.io/s/github/tkrotoff/flex-wrap-layout/tree/codesandbox.io/examples
 
-## Supported browsers
-
-IE 11 and evergreen browsers
-
 ## Limitations
 
 This will cause reflows (layout thrashing): https://gist.github.com/paulirish/5d52fb081b3570c81e3a

examples/.browserslistrc

@@ -1,2 +1 @@
->= 1%
-IE >= 11
+defaults

examples/Boxes.test.e2e.ts

@@ -17,7 +17,7 @@ test('resize', async ({ page }) => {
   //expect(await page.screenshot()).toMatchSnapshot('boxes-1.png');
 
   await expect(children).toHaveClass([
-    'wrap-children',
+    'wrap-children ',
     'wrap-children',
     'box blue',
     'box grey flex-fill',

src/detectWrappedElements.ts

@@ -1,7 +1,7 @@
 // [jQuery.position() equivalent is wrong](https://github.com/HubSpot/youmightnotneedjquery/issues/172)
 function getTopPosition(el: Element) {
   const { top } = el.getBoundingClientRect();
-  const { marginTop } = window.getComputedStyle(el);
+  const { marginTop } = getComputedStyle(el);
   return top - parseInt(marginTop, 10);
 }
 
@@ -52,8 +52,5 @@ export function detectWrappedElements(
   const containsChildNextIsWrapped =
     rootElement.getElementsByClassName(nextIsWrappedClassName).length > 0;
 
-  // IE does not support toggle() second argument
-  // https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Browser_compatibility
-  //rootEl.classList.toggle(hasChildWrappedClassName, containsChildNextIsWrapped);
-  rootElement.classList[containsChildNextIsWrapped ? 'add' : 'remove'](hasChildWrappedClassName);
+  rootElement.classList.toggle(hasChildWrappedClassName, containsChildNextIsWrapped);
 }

src/forceDetectWrappedElements.ts

@@ -1,18 +1,4 @@
 export function forceDetectWrappedElements() {
-  try {
-    // https://stackoverflow.com/q/1818474
-    window.dispatchEvent(new Event('resize'));
-  } catch {
-    // FIXME Event constructor is not supported by IE
-    // https://github.com/zloirock/core-js/issues/354
-    // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#polyfill
-    // https://github.com/lifaon74/events-polyfill/blob/bc989dc00fb90a42ae9c012c309d48710dec2589/event-constructor-polyfill.js#L11-L28
-    // https://github.com/kumarharsh/custom-event-polyfill/blob/v1.0.7/polyfill.js
-    // http://youmightnotneedjquery.com/#trigger_native
-    const event = document.createEvent('Event');
-    const bubbles = false; // Default is false for new Event()
-    const cancelable = false; // Default is false for new Event()
-    event.initEvent('resize', bubbles, cancelable);
-    window.dispatchEvent(event);
-  }
+  // https://stackoverflow.com/q/1818474
+  dispatchEvent(new Event('resize'));
 }