@algolia/autocomplete-js 1.19.1 → 1.19.3

package/dist/esm/createAutocompleteDom.js

@@ -130,6 +130,7 @@ export function createAutocompleteDom(_ref) {
   if (isDetached) {
     var detachedSearchButtonIcon = createDomElement('div', {
       class: classNames.detachedSearchButtonIcon,
+      ariaLabel: translations.detachedSearchButtonTitle,
       children: [SearchIcon({
         environment: environment
       })]

package/dist/esm/render.js

@@ -32,6 +32,7 @@ export function renderSearchBox(_ref) {
   setProperties(dom.loadingIndicator, {
     hidden: state.status !== 'stalled'
   });
+  toggleAnimation(dom.loadingIndicator, state.status === 'stalled');
   setProperties(dom.clearButton, {
     hidden: !state.query
   });
@@ -42,6 +43,23 @@ export function renderSearchBox(_ref) {
     hidden: Boolean(state.query)
   });
 }
+
+// Safari will animate the SVG even when it's hidden. We need to pause the
+// animation manually. See:
+// - https://github.com/algolia/autocomplete/issues/1322
+// - https://bugs.webkit.org/show_bug.cgi?id=298217
+function toggleAnimation(element, isActive) {
+  var _element$firstChild;
+  var svgElement = ((_element$firstChild = element.firstChild) === null || _element$firstChild === void 0 ? void 0 : _element$firstChild.nodeName) === 'svg' ? element.firstChild : null;
+  if (!svgElement || !svgElement.pauseAnimations || !svgElement.unpauseAnimations) {
+    return;
+  }
+  if (isActive) {
+    svgElement.unpauseAnimations();
+  } else {
+    svgElement.pauseAnimations();
+  }
+}
 export function renderPanel(render, _ref2) {
   var autocomplete = _ref2.autocomplete,
     autocompleteScopeApi = _ref2.autocompleteScopeApi,

package/dist/umd/index.development.js

@@ -1,4 +1,4 @@
-/*! @algolia/autocomplete-js 1.19.1 | MIT License | © Algolia, Inc. and contributors | https://github.com/algolia/autocomplete */
+/*! @algolia/autocomplete-js 1.19.3 | MIT License | © Algolia, Inc. and contributors | https://github.com/algolia/autocomplete */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
   typeof define === 'function' && define.amd ? define(['exports'], factory) :
@@ -347,7 +347,7 @@
     return undefined;
   }
 
-  var version = '1.19.1';
+  var version = '1.19.3';
 
   var userAgents$1 = [{
     segment: 'autocomplete-core',
@@ -3981,6 +3981,7 @@
     if (isDetached) {
       var detachedSearchButtonIcon = createDomElement('div', {
         class: classNames.detachedSearchButtonIcon,
+        ariaLabel: translations.detachedSearchButtonTitle,
         children: [SearchIcon({
           environment: environment
         })]
@@ -4886,6 +4887,7 @@
     setProperties(dom.loadingIndicator, {
       hidden: state.status !== 'stalled'
     });
+    toggleAnimation(dom.loadingIndicator, state.status === 'stalled');
     setProperties(dom.clearButton, {
       hidden: !state.query
     });
@@ -4896,6 +4898,23 @@
       hidden: Boolean(state.query)
     });
   }
+
+  // Safari will animate the SVG even when it's hidden. We need to pause the
+  // animation manually. See:
+  // - https://github.com/algolia/autocomplete/issues/1322
+  // - https://bugs.webkit.org/show_bug.cgi?id=298217
+  function toggleAnimation(element, isActive) {
+    var _element$firstChild;
+    var svgElement = ((_element$firstChild = element.firstChild) === null || _element$firstChild === void 0 ? void 0 : _element$firstChild.nodeName) === 'svg' ? element.firstChild : null;
+    if (!svgElement || !svgElement.pauseAnimations || !svgElement.unpauseAnimations) {
+      return;
+    }
+    if (isActive) {
+      svgElement.unpauseAnimations();
+    } else {
+      svgElement.pauseAnimations();
+    }
+  }
   function renderPanel(render, _ref2) {
     var autocomplete = _ref2.autocomplete,
       autocompleteScopeApi = _ref2.autocompleteScopeApi,