0.3.4

* Ensuring polyfills are SSR safe

src/index.ts

@@ -2,5 +2,7 @@
 import { useShuttleState } from './components/Shuttle/hooks/useShuttleState';
 import { useShuttleKeyboardControls } from './components/Shuttle/hooks/useShuttleKeyboardControls';
 import { Shuttle } from './components/Shuttle/Shuttle';
+import { polyfill } from './utils/polyfills';
 
 export { Shuttle, useShuttleState, useShuttleKeyboardControls };
+polyfill();

src/utils/polyfills.ts

@@ -0,0 +1,40 @@
+const __CLIENT__ = !!(
+    typeof window !== 'undefined' &&
+    window.document &&
+    window.document.createElement
+);
+
+function matchPolyfill() {
+    if (typeof Element.prototype.matches !== 'function') {
+        // https://developer.mozilla.org/en-US/docs/Web/API/Element/matches#Polyfill
+        Element.prototype.matches = Element.prototype.matches =
+            // @ts-ignore
+            Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
+    }
+}
+
+function closestPolyfill() {
+    if (typeof Element.prototype.closest !== 'function') {
+        // https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill
+        Element.prototype.closest = function closest(selector: string) {
+            let element: any = this;
+
+            do {
+                if (element.matches(selector)) {
+                    return element;
+                }
+
+                element = element.parentElement || element.parentNode;
+            } while (element !== null && element.nodeType === 1);
+
+            return null;
+        };
+    }
+}
+
+export function polyfill() {
+    if (__CLIENT__) {
+        matchPolyfill();
+        closestPolyfill();
+    }
+}

src/utils/utils.ts

@@ -165,22 +165,3 @@ export const isContainer = (container: HTMLDivElement) => {
 
     return bool && (name === SHUTTLE_CONTAINERS.SOURCE || name === SHUTTLE_CONTAINERS.TARGET);
 };
-
-// IE 9+ polyfill for closest
-// https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill
-if (!Element.prototype.closest) {
-    Element.prototype.closest = function(selector: string) {
-        // @ts-ignore
-        let el: any = this;
-
-        do {
-            if (el.matches(selector)) {
-                return el;
-            }
-
-            el = el.parentElement || el.parentNode;
-        } while (el !== null && el.nodeType === 1);
-
-        return null;
-    };
-}