sweetalert2 11.7.20 → 11.7.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sweetalert2",
-  "version": "11.7.20",
+  "version": "11.7.21",
   "repository": "sweetalert2/sweetalert2",
   "homepage": "https://sweetalert2.github.io/",
   "description": "A beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes, supported fork of sweetalert",
@@ -25,7 +25,7 @@
     "rollup": "^3.2.2",
     "sass": "^1.55.0",
     "stylelint": "^15.0.0",
-    "typescript": "4.0.2",
+    "typescript": "4.3.5",
     "vite": "^4.0.0",
     "zx": "^7.1.1"
   },
@@ -58,7 +58,7 @@
     "accessible"
   ],
   "scripts": {
-    "start": "vite sandbox --open",
+    "dev": "vite sandbox --open",
     "lint": "stylelint src/**/*.scss && eslint src cypress *.js *.ts && prettier --check src/**/*.js cypress/**/*.js *.js",
     "build": "zx tools/build.mjs",
     "test": "cypress run --headless",

package/src/SweetAlert.js

@@ -319,6 +319,6 @@ Object.keys(instanceMethods).forEach((key) => {
 
 SweetAlert.DismissReason = DismissReason
 
-SweetAlert.version = '11.7.20'
+SweetAlert.version = '11.7.21'
 
 export default SweetAlert

package/src/buttons-handlers.js

@@ -52,10 +52,11 @@ const handleConfirmOrDenyWithInput = (instance, type) => {
     error(`The "input" parameter is needed to be set when using returnInputValueOn${capitalizeFirstLetter(type)}`)
     return
   }
+  const input = instance.getInput()
   const inputValue = getInputValue(instance, innerParams)
   if (innerParams.inputValidator) {
     handleInputValidator(instance, inputValue, type)
-  } else if (!instance.getInput().checkValidity()) {
+  } else if (input && !input.checkValidity()) {
     instance.enableButtons()
     instance.showValidationMessage(innerParams.validationMessage)
   } else if (type === 'deny') {

package/src/instanceMethods/enable-disable-elements.js

@@ -1,4 +1,6 @@
+import * as dom from '../utils/dom/index.js'
 import privateProps from '../privateProps.js'
+import { swalClasses } from '../utils/classes.js'
 
 /**
  * @param {SweetAlert} instance
@@ -13,16 +15,17 @@ function setButtonsDisabled(instance, buttons, disabled) {
 }
 
 /**
- * @param {HTMLInputElement} input
+ * @param {HTMLInputElement | null} input
  * @param {boolean} disabled
  */
 function setInputDisabled(input, disabled) {
-  if (!input) {
+  const popup = dom.getPopup()
+  if (!popup || !input) {
     return
   }
   if (input.type === 'radio') {
-    const radiosContainer = input.parentNode.parentNode
-    const radios = radiosContainer.querySelectorAll('input')
+    /** @type {NodeListOf<HTMLInputElement>} */
+    const radios = popup.querySelectorAll(`[name="${swalClasses.radio}"]`)
     for (let i = 0; i < radios.length; i++) {
       radios[i].disabled = disabled
     }
@@ -33,6 +36,7 @@ function setInputDisabled(input, disabled) {
 
 /**
  * Enable all the buttons
+ * @this {SweetAlert}
  */
 export function enableButtons() {
   setButtonsDisabled(this, ['confirmButton', 'denyButton', 'cancelButton'], false)
@@ -40,6 +44,7 @@ export function enableButtons() {
 
 /**
  * Disable all the buttons
+ * @this {SweetAlert}
  */
 export function disableButtons() {
   setButtonsDisabled(this, ['confirmButton', 'denyButton', 'cancelButton'], true)
@@ -47,6 +52,7 @@ export function disableButtons() {
 
 /**
  * Enable the input field
+ * @this {SweetAlert}
  */
 export function enableInput() {
   setInputDisabled(this.getInput(), false)
@@ -54,6 +60,7 @@ export function enableInput() {
 
 /**
  * Disable the input field
+ * @this {SweetAlert}
  */
 export function disableInput() {
   setInputDisabled(this.getInput(), true)

package/src/staticMethods/showLoading.js

@@ -6,7 +6,7 @@ import * as dom from '../utils/dom/index.js'
  * Shows loader (spinner), this is useful with AJAX requests.
  * By default the loader be shown instead of the "Confirm" button.
  *
- * @param {HTMLButtonElement} [buttonToReplace]
+ * @param {HTMLButtonElement | null} [buttonToReplace]
  */
 const showLoading = (buttonToReplace) => {
   let popup = dom.getPopup()
@@ -14,6 +14,9 @@ const showLoading = (buttonToReplace) => {
     new Swal() // eslint-disable-line no-new
   }
   popup = dom.getPopup()
+  if (!popup) {
+    return
+  }
   const loader = dom.getLoader()
 
   if (dom.isToast()) {
@@ -30,11 +33,14 @@ const showLoading = (buttonToReplace) => {
 
 /**
  * @param {HTMLElement} popup
- * @param {HTMLButtonElement} [buttonToReplace]
+ * @param {HTMLButtonElement | null} [buttonToReplace]
  */
 const replaceButton = (popup, buttonToReplace) => {
   const actions = dom.getActions()
   const loader = dom.getLoader()
+  if (!actions || !loader) {
+    return
+  }
 
   if (!buttonToReplace && dom.isVisible(dom.getConfirmButton())) {
     buttonToReplace = dom.getConfirmButton()
@@ -44,8 +50,8 @@ const replaceButton = (popup, buttonToReplace) => {
   if (buttonToReplace) {
     dom.hide(buttonToReplace)
     loader.setAttribute('data-button-to-replace', buttonToReplace.className)
+    actions.insertBefore(loader, buttonToReplace)
   }
-  loader.parentNode.insertBefore(loader, buttonToReplace)
   dom.addClass([popup, actions], swalClasses.loading)
 }
 

package/src/utils/dom/domUtils.js

@@ -243,7 +243,7 @@ export const toggle = (elem, condition, display = 'flex') => {
 /**
  * borrowed from jquery $(elem).is(':visible') implementation
  *
- * @param {HTMLElement} elem
+ * @param {HTMLElement | null} elem
  * @returns {boolean}
  */
 export const isVisible = (elem) => !!(elem && (elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length))
@@ -281,6 +281,9 @@ export const hasCssAnimation = (elem) => {
  */
 export const animateTimerProgressBar = (timer, reset = false) => {
   const timerProgressBar = getTimerProgressBar()
+  if (!timerProgressBar) {
+    return
+  }
   if (isVisible(timerProgressBar)) {
     if (reset) {
       timerProgressBar.style.transition = 'none'
@@ -295,6 +298,9 @@ export const animateTimerProgressBar = (timer, reset = false) => {
 
 export const stopTimerProgressBar = () => {
   const timerProgressBar = getTimerProgressBar()
+  if (!timerProgressBar) {
+    return
+  }
   const timerProgressBarWidth = parseInt(window.getComputedStyle(timerProgressBar).width)
   timerProgressBar.style.removeProperty('transition')
   timerProgressBar.style.width = '100%'

package/src/utils/dom/inputUtils.js

@@ -5,7 +5,7 @@ import { getDirectChildByClass } from './domUtils.js'
 import * as dom from './index.js'
 
 /**
- * @typedef { string | number | boolean } InputValue
+ * @typedef { string | number | boolean | undefined } InputValue
  */
 
 /**
@@ -16,7 +16,7 @@ export const handleInputOptionsAndValue = (instance, params) => {
   if (params.input === 'select' || params.input === 'radio') {
     handleInputOptions(instance, params)
   } else if (
-    ['text', 'email', 'number', 'tel', 'textarea'].includes(params.input) &&
+    ['text', 'email', 'number', 'tel', 'textarea'].some((i) => i === params.input) &&
     (hasToPromiseFn(params.inputValue) || isPromise(params.inputValue))
   ) {
     showLoading(dom.getConfirmButton())
@@ -63,7 +63,7 @@ const getRadioValue = (input) => (input.checked ? input.value : null)
  * @returns {FileList | File | null}
  */
 const getFileValue = (input) =>
-  input.files.length ? (input.getAttribute('multiple') !== null ? input.files : input.files[0]) : null
+  input.files && input.files.length ? (input.getAttribute('multiple') !== null ? input.files : input.files[0]) : null
 
 /**
  * @param {SweetAlert} instance
@@ -71,11 +71,18 @@ const getFileValue = (input) =>
  */
 const handleInputOptions = (instance, params) => {
   const popup = dom.getPopup()
+  if (!popup) {
+    return
+  }
   /**
    * @param {Record<string, any>} inputOptions
    */
   const processInputOptions = (inputOptions) => {
-    populateInputOptions[params.input](popup, formatInputOptions(inputOptions), params)
+    if (params.input === 'select') {
+      populateSelectOptions(popup, formatInputOptions(inputOptions), params)
+    } else if (params.input === 'radio') {
+      populateRadioOptions(popup, formatInputOptions(inputOptions), params)
+    }
   }
   if (hasToPromiseFn(params.inputOptions) || isPromise(params.inputOptions)) {
     showLoading(dom.getConfirmButton())
@@ -96,6 +103,9 @@ const handleInputOptions = (instance, params) => {
  */
 const handleInputValue = (instance, params) => {
   const input = instance.getInput()
+  if (!input) {
+    return
+  }
   dom.hide(input)
   asPromise(params.inputValue)
     .then((inputValue) => {
@@ -113,89 +123,95 @@ const handleInputValue = (instance, params) => {
     })
 }
 
-const populateInputOptions = {
+/**
+ * @param {HTMLElement} popup
+ * @param {InputOptionFlattened[]} inputOptions
+ * @param {SweetAlertOptions} params
+ */
+function populateSelectOptions(popup, inputOptions, params) {
+  const select = getDirectChildByClass(popup, swalClasses.select)
+  if (!select) {
+    return
+  }
   /**
-   * @param {HTMLElement} popup
-   * @param {Record<string, any>} inputOptions
-   * @param {SweetAlertOptions} params
+   * @param {HTMLElement} parent
+   * @param {string} optionLabel
+   * @param {string} optionValue
    */
-  select: (popup, inputOptions, params) => {
-    const select = getDirectChildByClass(popup, swalClasses.select)
-    /**
-     * @param {HTMLElement} parent
-     * @param {string} optionLabel
-     * @param {string} optionValue
-     */
-    const renderOption = (parent, optionLabel, optionValue) => {
-      const option = document.createElement('option')
-      option.value = optionValue
-      dom.setInnerHtml(option, optionLabel)
-      option.selected = isSelected(optionValue, params.inputValue)
-      parent.appendChild(option)
+  const renderOption = (parent, optionLabel, optionValue) => {
+    const option = document.createElement('option')
+    option.value = optionValue
+    dom.setInnerHtml(option, optionLabel)
+    option.selected = isSelected(optionValue, params.inputValue)
+    parent.appendChild(option)
+  }
+  inputOptions.forEach((inputOption) => {
+    const optionValue = inputOption[0]
+    const optionLabel = inputOption[1]
+    // <optgroup> spec:
+    // https://www.w3.org/TR/html401/interact/forms.html#h-17.6
+    // "...all OPTGROUP elements must be specified directly within a SELECT element (i.e., groups may not be nested)..."
+    // check whether this is a <optgroup>
+    if (Array.isArray(optionLabel)) {
+      // if it is an array, then it is an <optgroup>
+      const optgroup = document.createElement('optgroup')
+      optgroup.label = optionValue
+      optgroup.disabled = false // not configurable for now
+      select.appendChild(optgroup)
+      optionLabel.forEach((o) => renderOption(optgroup, o[1], o[0]))
+    } else {
+      // case of <option>
+      renderOption(select, optionLabel, optionValue)
     }
-    inputOptions.forEach((inputOption) => {
-      const optionValue = inputOption[0]
-      const optionLabel = inputOption[1]
-      // <optgroup> spec:
-      // https://www.w3.org/TR/html401/interact/forms.html#h-17.6
-      // "...all OPTGROUP elements must be specified directly within a SELECT element (i.e., groups may not be nested)..."
-      // check whether this is a <optgroup>
-      if (Array.isArray(optionLabel)) {
-        // if it is an array, then it is an <optgroup>
-        const optgroup = document.createElement('optgroup')
-        optgroup.label = optionValue
-        optgroup.disabled = false // not configurable for now
-        select.appendChild(optgroup)
-        optionLabel.forEach((o) => renderOption(optgroup, o[1], o[0]))
-      } else {
-        // case of <option>
-        renderOption(select, optionLabel, optionValue)
-      }
-    })
-    select.focus()
-  },
+  })
+  select.focus()
+}
 
-  /**
-   * @param {HTMLElement} popup
-   * @param {Record<string, any>} inputOptions
-   * @param {SweetAlertOptions} params
-   */
-  radio: (popup, inputOptions, params) => {
-    const radio = getDirectChildByClass(popup, swalClasses.radio)
-    inputOptions.forEach((inputOption) => {
-      const radioValue = inputOption[0]
-      const radioLabel = inputOption[1]
-      const radioInput = document.createElement('input')
-      const radioLabelElement = document.createElement('label')
-      radioInput.type = 'radio'
-      radioInput.name = swalClasses.radio
-      radioInput.value = radioValue
-      if (isSelected(radioValue, params.inputValue)) {
-        radioInput.checked = true
-      }
-      const label = document.createElement('span')
-      dom.setInnerHtml(label, radioLabel)
-      label.className = swalClasses.label
-      radioLabelElement.appendChild(radioInput)
-      radioLabelElement.appendChild(label)
-      radio.appendChild(radioLabelElement)
-    })
-    const radios = radio.querySelectorAll('input')
-    if (radios.length) {
-      radios[0].focus()
+/**
+ * @param {HTMLElement} popup
+ * @param {InputOptionFlattened[]} inputOptions
+ * @param {SweetAlertOptions} params
+ */
+function populateRadioOptions(popup, inputOptions, params) {
+  const radio = getDirectChildByClass(popup, swalClasses.radio)
+  if (!radio) {
+    return
+  }
+  inputOptions.forEach((inputOption) => {
+    const radioValue = inputOption[0]
+    const radioLabel = inputOption[1]
+    const radioInput = document.createElement('input')
+    const radioLabelElement = document.createElement('label')
+    radioInput.type = 'radio'
+    radioInput.name = swalClasses.radio
+    radioInput.value = radioValue
+    if (isSelected(radioValue, params.inputValue)) {
+      radioInput.checked = true
     }
-  },
+    const label = document.createElement('span')
+    dom.setInnerHtml(label, radioLabel)
+    label.className = swalClasses.label
+    radioLabelElement.appendChild(radioInput)
+    radioLabelElement.appendChild(label)
+    radio.appendChild(radioLabelElement)
+  })
+  const radios = radio.querySelectorAll('input')
+  if (radios.length) {
+    radios[0].focus()
+  }
 }
 
 /**
  * Converts `inputOptions` into an array of `[value, label]`s
  *
  * @param {Record<string, any>} inputOptions
- * @returns {Array<Array<string>>}
+ * @typedef {string[]} InputOptionFlattened
+ * @returns {InputOptionFlattened[]}
  */
 const formatInputOptions = (inputOptions) => {
+  /** @type {InputOptionFlattened[]} */
   const result = []
-  if (typeof Map !== 'undefined' && inputOptions instanceof Map) {
+  if (inputOptions instanceof Map) {
     inputOptions.forEach((value, key) => {
       let valueFormatted = value
       if (typeof valueFormatted === 'object') {
@@ -223,5 +239,5 @@ const formatInputOptions = (inputOptions) => {
  * @returns {boolean}
  */
 const isSelected = (optionValue, inputValue) => {
-  return inputValue && inputValue.toString() === optionValue.toString()
+  return !!inputValue && inputValue.toString() === optionValue.toString()
 }

package/sweetalert2.d.ts

@@ -951,7 +951,7 @@ declare module 'sweetalert2' {
      *
      * @default undefined
      */
-    preConfirm?(inputValue: PreConfirmCallbackValue): PreConfirmResult
+    preConfirm?(inputValue: PreConfirmCallbackValue): SyncOrAsync<PreConfirmResult>
 
     /**
      * Function to execute before denying, may be async (Promise-returning) or sync.