@dnb/eufemia 10.18.0 → 10.19.0

package/cjs/components/autocomplete/Autocomplete.js

@@ -14,6 +14,7 @@ var _AlignmentHelper2 = _interopRequireDefault(require("../../shared/AlignmentHe
 var _SpacingHelper = require("../space/SpacingHelper");
 var _filterValidProps = require("../../shared/helpers/filterValidProps");
 var _Suffix = _interopRequireDefault(require("../../shared/helpers/Suffix"));
+var _AriaLive = _interopRequireDefault(require("../aria-live/AriaLive"));
 var _FormLabel = _interopRequireDefault(require("../form-label/FormLabel"));
 var _FormStatus = _interopRequireDefault(require("../form-status/FormStatus"));
 var _IconPrimary2 = _interopRequireDefault(require("../icon-primary/IconPrimary"));
@@ -25,7 +26,7 @@ var _DrawerListProvider = _interopRequireDefault(require("../../fragments/drawer
 var _DrawerListHelpers = require("../../fragments/drawer-list/DrawerListHelpers");
 var _IconPrimary, _AlignmentHelper;
 const _excluded = ["fillDataIfEmpty"],
-  _excluded2 = ["title", "placeholder", "label", "label_direction", "label_sr_only", "icon", "icon_size", "input_icon", "size", "align_autocomplete", "fixed_position", "status", "status_state", "status_props", "status_no_animation", "globalStatus", "suffix", "scrollable", "focusable", "keep_open", "keep_value", "keep_value_and_selection", "show_clear_button", "prevent_close", "no_animation", "no_scroll_animation", "show_submit_button", "submit_element", "input_element", "options_render", "prevent_selection", "max_height", "default_value", "search_numbers", "search_in_word_index", "show_options_sr", "selected_sr", "submit_button_title", "submit_button_icon", "portal_class", "drawer_class", "input_ref", "className", "class", "disabled", "stretch", "skeleton", "triangle_position", "icon_position", "skip_portal", "independent_width", "mode", "data", "children", "direction", "id", "opened", "value", "input_value", "indicator_label", "no_options", "show_all", "aria_live_options", "disable_highlighting", "ariaLiveDelay"];
+  _excluded2 = ["title", "placeholder", "label", "label_direction", "label_sr_only", "icon", "icon_size", "input_icon", "size", "align_autocomplete", "fixed_position", "status", "status_state", "status_props", "status_no_animation", "globalStatus", "suffix", "scrollable", "focusable", "keep_open", "keep_value", "keep_value_and_selection", "show_clear_button", "prevent_close", "no_animation", "no_scroll_animation", "show_submit_button", "submit_element", "input_element", "options_render", "prevent_selection", "max_height", "default_value", "search_numbers", "search_in_word_index", "show_options_sr", "selected_sr", "submit_button_title", "submit_button_icon", "portal_class", "drawer_class", "input_ref", "className", "class", "disabled", "stretch", "skeleton", "triangle_position", "icon_position", "skip_portal", "independent_width", "mode", "data", "children", "direction", "id", "opened", "value", "input_value", "indicator_label", "no_options", "show_all", "aria_live_options", "disable_highlighting"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -126,7 +127,6 @@ _defineProperty(Autocomplete, "defaultProps", {
   class: null,
   className: null,
   children: null,
-  ariaLiveDelay: null,
   on_show: null,
   on_hide: null,
   on_type: null,
@@ -216,7 +216,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes = _objectSpread(_
   class: _propTypes.default.string,
   className: _propTypes.default.string,
   children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.node, _propTypes.default.object, _propTypes.default.array]),
-  ariaLiveDelay: _propTypes.default.number,
   on_show: _propTypes.default.func,
   on_type: _propTypes.default.func,
   on_focus: _propTypes.default.func,
@@ -376,7 +375,6 @@ class AutocompleteInstance extends _react.default.PureComponent {
       }
       if (_this.state.hasFocus) {
         _this.setVisible();
-        _this.setAriaLiveUpdate();
       }
       return data;
     });
@@ -404,7 +402,6 @@ class AutocompleteInstance extends _react.default.PureComponent {
       _this.context.drawerList.setState({
         cache_hash: value + _this.countData(data)
       });
-      _this.setAriaLiveUpdate();
       return data;
     });
     _defineProperty(this, "wrapWithShowAll", data => {
@@ -1193,7 +1190,6 @@ class AutocompleteInstance extends _react.default.PureComponent {
   }
   componentWillUnmount() {
     clearTimeout(this._selectTimeout);
-    clearTimeout(this._ariaLiveUpdateTimeout);
     clearTimeout(this._focusTimeout);
     clearTimeout(this._blurTimeout);
   }
@@ -1224,39 +1220,25 @@ class AutocompleteInstance extends _react.default.PureComponent {
       });
     });
   }
-  setAriaLiveUpdate() {
+  getAriaLiveUpdate() {
     const {
       opened
     } = this.context.drawerList;
-    const {
-      aria_live_options,
-      no_options,
-      ariaLiveDelay = 1000
-    } = this._props;
-    clearTimeout(this._ariaLiveUpdateTimeout);
     if (opened) {
-      this._ariaLiveUpdateTimeout = setTimeout(() => {
-        let newString = null;
-        const count = this.countData();
-        if (count > 0) {
-          newString = String(aria_live_options).replace('%s', count);
-        } else {
-          newString = no_options;
-        }
-        if (newString) {
-          this.setState({
-            ariaLiveUpdate: newString,
-            _listenForPropChanges: false
-          });
-          this._ariaLiveUpdateTimeout = setTimeout(() => {
-            this.setState({
-              ariaLiveUpdate: null,
-              _listenForPropChanges: false
-            });
-          }, 1000);
-        }
-      }, ariaLiveDelay);
+      const {
+        aria_live_options,
+        no_options
+      } = this._props;
+      const count = this.countData();
+      let newString = null;
+      if (count > 0) {
+        newString = String(aria_live_options).replace('%s', count);
+      } else {
+        newString = no_options;
+      }
+      return newString;
     }
+    return '';
   }
   getVoiceOverActiveItem(selected_sr) {
     const {
@@ -1264,11 +1246,10 @@ class AutocompleteInstance extends _react.default.PureComponent {
       selected_item
     } = this.context.drawerList;
     const currentDataItem = (0, _DrawerListHelpers.getCurrentData)(active_item, this.context.drawerList.data);
-    return _react.default.createElement("span", {
+    return _react.default.createElement(_AriaLive.default, {
       hidden: !_helpers.IS_MAC,
-      className: "dnb-sr-only",
-      "aria-live": "assertive",
-      "aria-atomic": true
+      priority: "hight",
+      delay: 0
     }, currentDataItem && _react.default.createElement(_react.default.Fragment, null, active_item === selected_item ? _react.default.createElement(_react.default.Fragment, null, selected_sr, " ") : null, _react.default.createElement(_DrawerList.ItemContent, null, currentDataItem)));
   }
   render() {
@@ -1338,16 +1319,14 @@ class AutocompleteInstance extends _react.default.PureComponent {
         no_options,
         show_all,
         aria_live_options,
-        disable_highlighting,
-        ariaLiveDelay
+        disable_highlighting
       } = props,
       attributes = _objectWithoutProperties(props, _excluded2);
     const id = this._id;
     const showStatus = (0, _componentHelper.getStatusState)(status);
     const {
       inputValue,
-      visibleIndicator,
-      ariaLiveUpdate
+      visibleIndicator
     } = this.state;
     const {
       hidden,
@@ -1521,10 +1500,9 @@ class AutocompleteInstance extends _react.default.PureComponent {
       className: "dnb-autocomplete__suffix",
       id: id + '-suffix',
       context: props
-    }, suffix))), this.getVoiceOverActiveItem(selected_sr), _react.default.createElement("span", {
-      className: "dnb-sr-only",
-      "aria-live": "assertive"
-    }, ariaLiveUpdate));
+    }, suffix))), this.getVoiceOverActiveItem(selected_sr), _react.default.createElement(_AriaLive.default, {
+      priority: "hight"
+    }, this.getAriaLiveUpdate()));
   }
 }
 _defineProperty(AutocompleteInstance, "defaultProps", Autocomplete.defaultProps);