Allow choices.js to be imported on server. As windows.document is by …

…default not defined, default template rendering will not function, the callbackOnCreateTemplates callback must be used. Choices-js#861
Xon · Aug 9, 2024 · 0d5d93b · 0d5d93b
1 parent 8f57a83
commit 0d5d93b
Show file tree

Hide file tree

Showing 22 changed files with 84 additions and 39 deletions.
diff --git a/public/assets/scripts/choices.cjs b/public/assets/scripts/choices.cjs
@@ -1754,6 +1754,9 @@ var setIsLoading = function (isLoading) { return ({
 }); };
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
+var canUseDom = !!(typeof window !== 'undefined' &&
+    window.document &&
+    window.document.createElement);
 var getRandomNumber = function (min, max) {
     return Math.floor(Math.random() * (max - min) + min);
 };
@@ -1982,7 +1985,7 @@ var Container = /** @class */ (function () {
         // If flip is enabled and the dropdown bottom position is
         // greater than the window height flip the dropdown.
         var shouldFlip = false;
-        if (this.position === 'auto') {
+        if (canUseDom && this.position === 'auto') {
             shouldFlip = !window.matchMedia("(min-height: ".concat(dropdownPos + 1, "px)"))
                 .matches;
         }
@@ -3620,7 +3623,8 @@ var templates = {
 };
 
 /** @see {@link http://browserhacks.com/#hack-acea075d0ac6954f275a70023906050c} */
-var IS_IE11 = '-ms-scroll-limit' in document.documentElement.style &&
+var IS_IE11 = canUseDom &&
+    '-ms-scroll-limit' in document.documentElement.style &&
     '-ms-ime-align' in document.documentElement.style;
 var USER_DEFAULTS = {};
 var parseDataSetId = function (element) {
@@ -3744,7 +3748,7 @@ var Choices = /** @class */ (function () {
          * or when calculated direction is different from the document
          */
         this._direction = this.passedElement.dir;
-        if (!this._direction) {
+        if (!this._direction && canUseDom) {
             var elementDirection = window.getComputedStyle(this.passedElement.element).direction;
             var documentDirection = window.getComputedStyle(document.documentElement).direction;
             if (elementDirection !== documentDirection) {

diff --git a/public/assets/scripts/choices.js b/public/assets/scripts/choices.js
@@ -1758,6 +1758,9 @@
     }); };
 
     /* eslint-disable @typescript-eslint/no-explicit-any */
+    var canUseDom = !!(typeof window !== 'undefined' &&
+        window.document &&
+        window.document.createElement);
     var getRandomNumber = function (min, max) {
         return Math.floor(Math.random() * (max - min) + min);
     };
@@ -1986,7 +1989,7 @@
             // If flip is enabled and the dropdown bottom position is
             // greater than the window height flip the dropdown.
             var shouldFlip = false;
-            if (this.position === 'auto') {
+            if (canUseDom && this.position === 'auto') {
                 shouldFlip = !window.matchMedia("(min-height: ".concat(dropdownPos + 1, "px)"))
                     .matches;
             }
@@ -3624,7 +3627,8 @@
     };
 
     /** @see {@link http://browserhacks.com/#hack-acea075d0ac6954f275a70023906050c} */
-    var IS_IE11 = '-ms-scroll-limit' in document.documentElement.style &&
+    var IS_IE11 = canUseDom &&
+        '-ms-scroll-limit' in document.documentElement.style &&
         '-ms-ime-align' in document.documentElement.style;
     var USER_DEFAULTS = {};
     var parseDataSetId = function (element) {
@@ -3748,7 +3752,7 @@
              * or when calculated direction is different from the document
              */
             this._direction = this.passedElement.dir;
-            if (!this._direction) {
+            if (!this._direction && canUseDom) {
                 var elementDirection = window.getComputedStyle(this.passedElement.element).direction;
                 var documentDirection = window.getComputedStyle(document.documentElement).direction;
                 if (elementDirection !== documentDirection) {

diff --git a/public/assets/scripts/choices.min.cjs b/public/assets/scripts/choices.min.cjs
diff --git a/public/assets/scripts/choices.min.js b/public/assets/scripts/choices.min.js
diff --git a/public/assets/scripts/choices.min.mjs b/public/assets/scripts/choices.min.mjs
diff --git a/public/assets/scripts/choices.mjs b/public/assets/scripts/choices.mjs
@@ -1752,6 +1752,9 @@ var setIsLoading = function (isLoading) { return ({
 }); };
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
+var canUseDom = !!(typeof window !== 'undefined' &&
+    window.document &&
+    window.document.createElement);
 var getRandomNumber = function (min, max) {
     return Math.floor(Math.random() * (max - min) + min);
 };
@@ -1980,7 +1983,7 @@ var Container = /** @class */ (function () {
         // If flip is enabled and the dropdown bottom position is
         // greater than the window height flip the dropdown.
         var shouldFlip = false;
-        if (this.position === 'auto') {
+        if (canUseDom && this.position === 'auto') {
             shouldFlip = !window.matchMedia("(min-height: ".concat(dropdownPos + 1, "px)"))
                 .matches;
         }
@@ -3618,7 +3621,8 @@ var templates = {
 };
 
 /** @see {@link http://browserhacks.com/#hack-acea075d0ac6954f275a70023906050c} */
-var IS_IE11 = '-ms-scroll-limit' in document.documentElement.style &&
+var IS_IE11 = canUseDom &&
+    '-ms-scroll-limit' in document.documentElement.style &&
     '-ms-ime-align' in document.documentElement.style;
 var USER_DEFAULTS = {};
 var parseDataSetId = function (element) {
@@ -3742,7 +3746,7 @@ var Choices = /** @class */ (function () {
          * or when calculated direction is different from the document
          */
         this._direction = this.passedElement.dir;
-        if (!this._direction) {
+        if (!this._direction && canUseDom) {
             var elementDirection = window.getComputedStyle(this.passedElement.element).direction;
             var documentDirection = window.getComputedStyle(document.documentElement).direction;
             if (elementDirection !== documentDirection) {

diff --git a/public/assets/scripts/choices.search-basic.cjs b/public/assets/scripts/choices.search-basic.cjs
@@ -1272,6 +1272,9 @@ var setIsLoading = function (isLoading) { return ({
 }); };
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
+var canUseDom = !!(typeof window !== 'undefined' &&
+    window.document &&
+    window.document.createElement);
 var getRandomNumber = function (min, max) {
     return Math.floor(Math.random() * (max - min) + min);
 };
@@ -1500,7 +1503,7 @@ var Container = /** @class */ (function () {
         // If flip is enabled and the dropdown bottom position is
         // greater than the window height flip the dropdown.
         var shouldFlip = false;
-        if (this.position === 'auto') {
+        if (canUseDom && this.position === 'auto') {
             shouldFlip = !window.matchMedia("(min-height: ".concat(dropdownPos + 1, "px)"))
                 .matches;
         }
@@ -3138,7 +3141,8 @@ var templates = {
 };
 
 /** @see {@link http://browserhacks.com/#hack-acea075d0ac6954f275a70023906050c} */
-var IS_IE11 = '-ms-scroll-limit' in document.documentElement.style &&
+var IS_IE11 = canUseDom &&
+    '-ms-scroll-limit' in document.documentElement.style &&
     '-ms-ime-align' in document.documentElement.style;
 var USER_DEFAULTS = {};
 var parseDataSetId = function (element) {
@@ -3262,7 +3266,7 @@ var Choices = /** @class */ (function () {
          * or when calculated direction is different from the document
          */
         this._direction = this.passedElement.dir;
-        if (!this._direction) {
+        if (!this._direction && canUseDom) {
             var elementDirection = window.getComputedStyle(this.passedElement.element).direction;
             var documentDirection = window.getComputedStyle(document.documentElement).direction;
             if (elementDirection !== documentDirection) {

diff --git a/public/assets/scripts/choices.search-basic.js b/public/assets/scripts/choices.search-basic.js
@@ -1276,6 +1276,9 @@
     }); };
 
     /* eslint-disable @typescript-eslint/no-explicit-any */
+    var canUseDom = !!(typeof window !== 'undefined' &&
+        window.document &&
+        window.document.createElement);
     var getRandomNumber = function (min, max) {
         return Math.floor(Math.random() * (max - min) + min);
     };
@@ -1504,7 +1507,7 @@
             // If flip is enabled and the dropdown bottom position is
             // greater than the window height flip the dropdown.
             var shouldFlip = false;
-            if (this.position === 'auto') {
+            if (canUseDom && this.position === 'auto') {
                 shouldFlip = !window.matchMedia("(min-height: ".concat(dropdownPos + 1, "px)"))
                     .matches;
             }
@@ -3142,7 +3145,8 @@
     };
 
     /** @see {@link http://browserhacks.com/#hack-acea075d0ac6954f275a70023906050c} */
-    var IS_IE11 = '-ms-scroll-limit' in document.documentElement.style &&
+    var IS_IE11 = canUseDom &&
+        '-ms-scroll-limit' in document.documentElement.style &&
         '-ms-ime-align' in document.documentElement.style;
     var USER_DEFAULTS = {};
     var parseDataSetId = function (element) {
@@ -3266,7 +3270,7 @@
              * or when calculated direction is different from the document
              */
             this._direction = this.passedElement.dir;
-            if (!this._direction) {
+            if (!this._direction && canUseDom) {
                 var elementDirection = window.getComputedStyle(this.passedElement.element).direction;
                 var documentDirection = window.getComputedStyle(document.documentElement).direction;
                 if (elementDirection !== documentDirection) {

diff --git a/public/assets/scripts/choices.search-basic.min.cjs b/public/assets/scripts/choices.search-basic.min.cjs
diff --git a/public/assets/scripts/choices.search-basic.min.js b/public/assets/scripts/choices.search-basic.min.js
diff --git a/public/assets/scripts/choices.search-basic.min.mjs b/public/assets/scripts/choices.search-basic.min.mjs
diff --git a/public/assets/scripts/choices.search-basic.mjs b/public/assets/scripts/choices.search-basic.mjs
@@ -1270,6 +1270,9 @@ var setIsLoading = function (isLoading) { return ({
 }); };
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
+var canUseDom = !!(typeof window !== 'undefined' &&
+    window.document &&
+    window.document.createElement);
 var getRandomNumber = function (min, max) {
     return Math.floor(Math.random() * (max - min) + min);
 };
@@ -1498,7 +1501,7 @@ var Container = /** @class */ (function () {
         // If flip is enabled and the dropdown bottom position is
         // greater than the window height flip the dropdown.
         var shouldFlip = false;
-        if (this.position === 'auto') {
+        if (canUseDom && this.position === 'auto') {
             shouldFlip = !window.matchMedia("(min-height: ".concat(dropdownPos + 1, "px)"))
                 .matches;
         }
@@ -3136,7 +3139,8 @@ var templates = {
 };
 
 /** @see {@link http://browserhacks.com/#hack-acea075d0ac6954f275a70023906050c} */
-var IS_IE11 = '-ms-scroll-limit' in document.documentElement.style &&
+var IS_IE11 = canUseDom &&
+    '-ms-scroll-limit' in document.documentElement.style &&
     '-ms-ime-align' in document.documentElement.style;
 var USER_DEFAULTS = {};
 var parseDataSetId = function (element) {
@@ -3260,7 +3264,7 @@ var Choices = /** @class */ (function () {
          * or when calculated direction is different from the document
          */
         this._direction = this.passedElement.dir;
-        if (!this._direction) {
+        if (!this._direction && canUseDom) {
             var elementDirection = window.getComputedStyle(this.passedElement.element).direction;
             var documentDirection = window.getComputedStyle(document.documentElement).direction;
             if (elementDirection !== documentDirection) {

diff --git a/public/assets/scripts/choices.search-prefix.cjs b/public/assets/scripts/choices.search-prefix.cjs
@@ -138,6 +138,9 @@ var setIsLoading = function (isLoading) { return ({
 }); };
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
+var canUseDom = !!(typeof window !== 'undefined' &&
+    window.document &&
+    window.document.createElement);
 var getRandomNumber = function (min, max) {
     return Math.floor(Math.random() * (max - min) + min);
 };
@@ -366,7 +369,7 @@ var Container = /** @class */ (function () {
         // If flip is enabled and the dropdown bottom position is
         // greater than the window height flip the dropdown.
         var shouldFlip = false;
-        if (this.position === 'auto') {
+        if (canUseDom && this.position === 'auto') {
             shouldFlip = !window.matchMedia("(min-height: ".concat(dropdownPos + 1, "px)"))
                 .matches;
         }
@@ -2004,7 +2007,8 @@ var templates = {
 };
 
 /** @see {@link http://browserhacks.com/#hack-acea075d0ac6954f275a70023906050c} */
-var IS_IE11 = '-ms-scroll-limit' in document.documentElement.style &&
+var IS_IE11 = canUseDom &&
+    '-ms-scroll-limit' in document.documentElement.style &&
     '-ms-ime-align' in document.documentElement.style;
 var USER_DEFAULTS = {};
 var parseDataSetId = function (element) {
@@ -2128,7 +2132,7 @@ var Choices = /** @class */ (function () {
          * or when calculated direction is different from the document
          */
         this._direction = this.passedElement.dir;
-        if (!this._direction) {
+        if (!this._direction && canUseDom) {
             var elementDirection = window.getComputedStyle(this.passedElement.element).direction;
             var documentDirection = window.getComputedStyle(document.documentElement).direction;
             if (elementDirection !== documentDirection) {

diff --git a/public/assets/scripts/choices.search-prefix.js b/public/assets/scripts/choices.search-prefix.js
@@ -142,6 +142,9 @@
     }); };
 
     /* eslint-disable @typescript-eslint/no-explicit-any */
+    var canUseDom = !!(typeof window !== 'undefined' &&
+        window.document &&
+        window.document.createElement);
     var getRandomNumber = function (min, max) {
         return Math.floor(Math.random() * (max - min) + min);
     };
@@ -370,7 +373,7 @@
             // If flip is enabled and the dropdown bottom position is
             // greater than the window height flip the dropdown.
             var shouldFlip = false;
-            if (this.position === 'auto') {
+            if (canUseDom && this.position === 'auto') {
                 shouldFlip = !window.matchMedia("(min-height: ".concat(dropdownPos + 1, "px)"))
                     .matches;
             }
@@ -2008,7 +2011,8 @@
     };
 
     /** @see {@link http://browserhacks.com/#hack-acea075d0ac6954f275a70023906050c} */
-    var IS_IE11 = '-ms-scroll-limit' in document.documentElement.style &&
+    var IS_IE11 = canUseDom &&
+        '-ms-scroll-limit' in document.documentElement.style &&
         '-ms-ime-align' in document.documentElement.style;
     var USER_DEFAULTS = {};
     var parseDataSetId = function (element) {
@@ -2132,7 +2136,7 @@
              * or when calculated direction is different from the document
              */
             this._direction = this.passedElement.dir;
-            if (!this._direction) {
+            if (!this._direction && canUseDom) {
                 var elementDirection = window.getComputedStyle(this.passedElement.element).direction;
                 var documentDirection = window.getComputedStyle(document.documentElement).direction;
                 if (elementDirection !== documentDirection) {

diff --git a/public/assets/scripts/choices.search-prefix.min.cjs b/public/assets/scripts/choices.search-prefix.min.cjs
diff --git a/public/assets/scripts/choices.search-prefix.min.js b/public/assets/scripts/choices.search-prefix.min.js
diff --git a/public/assets/scripts/choices.search-prefix.min.mjs b/public/assets/scripts/choices.search-prefix.min.mjs
diff --git a/public/assets/scripts/choices.search-prefix.mjs b/public/assets/scripts/choices.search-prefix.mjs
@@ -136,6 +136,9 @@ var setIsLoading = function (isLoading) { return ({
 }); };
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
+var canUseDom = !!(typeof window !== 'undefined' &&
+    window.document &&
+    window.document.createElement);
 var getRandomNumber = function (min, max) {
     return Math.floor(Math.random() * (max - min) + min);
 };
@@ -364,7 +367,7 @@ var Container = /** @class */ (function () {
         // If flip is enabled and the dropdown bottom position is
         // greater than the window height flip the dropdown.
         var shouldFlip = false;
-        if (this.position === 'auto') {
+        if (canUseDom && this.position === 'auto') {
             shouldFlip = !window.matchMedia("(min-height: ".concat(dropdownPos + 1, "px)"))
                 .matches;
         }
@@ -2002,7 +2005,8 @@ var templates = {
 };
 
 /** @see {@link http://browserhacks.com/#hack-acea075d0ac6954f275a70023906050c} */
-var IS_IE11 = '-ms-scroll-limit' in document.documentElement.style &&
+var IS_IE11 = canUseDom &&
+    '-ms-scroll-limit' in document.documentElement.style &&
     '-ms-ime-align' in document.documentElement.style;
 var USER_DEFAULTS = {};
 var parseDataSetId = function (element) {
@@ -2126,7 +2130,7 @@ var Choices = /** @class */ (function () {
          * or when calculated direction is different from the document
          */
         this._direction = this.passedElement.dir;
-        if (!this._direction) {
+        if (!this._direction && canUseDom) {
             var elementDirection = window.getComputedStyle(this.passedElement.element).direction;
             var documentDirection = window.getComputedStyle(document.documentElement).direction;
             if (elementDirection !== documentDirection) {

diff --git a/public/types/src/scripts/lib/utils.d.ts b/public/types/src/scripts/lib/utils.d.ts
@@ -3,6 +3,7 @@ import { StringUntrusted } from '../interfaces/string-untrusted';
 import { StringPreEscaped } from '../interfaces/string-pre-escaped';
 import { ChoiceFull } from '../interfaces/choice-full';
 import { Types } from '../interfaces/types';
+export declare const canUseDom: boolean;
 export declare const generateId: (element: HTMLInputElement | HTMLSelectElement, prefix: string) => string;
 export declare const getAdjacentEl: (startEl: Element, selector: string, direction?: number) => Element;
 export declare const isScrolledIntoView: (element: HTMLElement, parent: HTMLElement, direction?: number) => boolean;

diff --git a/src/scripts/choices.ts b/src/scripts/choices.ts
@@ -28,6 +28,7 @@ import { Options, ObjectsInConfig } from './interfaces/options';
 import { PassedElement } from './interfaces/passed-element';
 import { State } from './interfaces/state';
 import {
+  canUseDom,
   diff,
   generateId,
   getAdjacentEl,
@@ -56,6 +57,7 @@ import {
 
 /** @see {@link http://browserhacks.com/#hack-acea075d0ac6954f275a70023906050c} */
 const IS_IE11 =
+  canUseDom &&
   '-ms-scroll-limit' in document.documentElement.style &&
   '-ms-ime-align' in document.documentElement.style;
 
@@ -318,7 +320,7 @@ class Choices implements ChoicesInterface {
      */
     this._direction = this.passedElement.dir;
 
-    if (!this._direction) {
+    if (!this._direction && canUseDom) {
       const { direction: elementDirection } = window.getComputedStyle(
         this.passedElement.element,
       );

diff --git a/src/scripts/components/container.ts b/src/scripts/components/container.ts
@@ -1,4 +1,4 @@
-import { getClassNames } from '../lib/utils';
+import { canUseDom, getClassNames } from '../lib/utils';
 import { SELECT_ONE_TYPE } from '../constants';
 import { ClassNames } from '../interfaces/class-names';
 import { PositionOptionsType } from '../interfaces/position-options-type';
@@ -50,7 +50,7 @@ export default class Container {
     // If flip is enabled and the dropdown bottom position is
     // greater than the window height flip the dropdown.
     let shouldFlip = false;
-    if (this.position === 'auto') {
+    if (canUseDom && this.position === 'auto') {
       shouldFlip = !window.matchMedia(`(min-height: ${dropdownPos + 1}px)`)
         .matches;
     } else if (this.position === 'top') {