@carbon/charts 0.41.88 → 0.41.92

package/styles/vendor/carbon-components/es/components/dropdown/dropdown.js

@@ -1,4 +1,6 @@
 function _typeof(obj) {
+  "@babel/helpers - typeof";
+
   if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
     _typeof = function _typeof(obj) {
       return typeof obj;
@@ -34,29 +36,6 @@ function _createClass(Constructor, protoProps, staticProps) {
   return Constructor;
 }
 
-function _possibleConstructorReturn(self, call) {
-  if (call && (_typeof(call) === "object" || typeof call === "function")) {
-    return call;
-  }
-
-  return _assertThisInitialized(self);
-}
-
-function _assertThisInitialized(self) {
-  if (self === void 0) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-
-  return self;
-}
-
-function _getPrototypeOf(o) {
-  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
-    return o.__proto__ || Object.getPrototypeOf(o);
-  };
-  return _getPrototypeOf(o);
-}
-
 function _inherits(subClass, superClass) {
   if (typeof superClass !== "function" && superClass !== null) {
     throw new TypeError("Super expression must either be null or a function");
@@ -80,6 +59,61 @@ function _setPrototypeOf(o, p) {
 
   return _setPrototypeOf(o, p);
 }
+
+function _createSuper(Derived) {
+  var hasNativeReflectConstruct = _isNativeReflectConstruct();
+
+  return function _createSuperInternal() {
+    var Super = _getPrototypeOf(Derived),
+        result;
+
+    if (hasNativeReflectConstruct) {
+      var NewTarget = _getPrototypeOf(this).constructor;
+
+      result = Reflect.construct(Super, arguments, NewTarget);
+    } else {
+      result = Super.apply(this, arguments);
+    }
+
+    return _possibleConstructorReturn(this, result);
+  };
+}
+
+function _possibleConstructorReturn(self, call) {
+  if (call && (_typeof(call) === "object" || typeof call === "function")) {
+    return call;
+  }
+
+  return _assertThisInitialized(self);
+}
+
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return self;
+}
+
+function _isNativeReflectConstruct() {
+  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+  if (Reflect.construct.sham) return false;
+  if (typeof Proxy === "function") return true;
+
+  try {
+    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+    return o.__proto__ || Object.getPrototypeOf(o);
+  };
+  return _getPrototypeOf(o);
+}
 /**
  * Copyright IBM Corp. 2016, 2018
  *
@@ -100,10 +134,10 @@ var toArray = function toArray(arrayLike) {
   return Array.prototype.slice.call(arrayLike);
 };
 
-var Dropdown =
-/*#__PURE__*/
-function (_mixin) {
+var Dropdown = /*#__PURE__*/function (_mixin) {
   _inherits(Dropdown, _mixin);
+
+  var _super = _createSuper(Dropdown);
   /**
    * A selector with drop downs.
    * @extends CreateComponent
@@ -123,12 +157,29 @@ function (_mixin) {
    */
 
 
+  /**
+   * A selector with drop downs.
+   * @extends CreateComponent
+   * @extends InitComponentBySearch
+   * @extends TrackBlur
+   * @param {HTMLElement} element The element working as a selector.
+   * @param {object} [options] The component options.
+   * @param {string} [options.selectorItem] The CSS selector to find clickable areas in dropdown items.
+   * @param {string} [options.selectorItemSelected] The CSS selector to find the clickable area in the selected dropdown item.
+   * @param {string} [options.classSelected] The CSS class for the selected dropdown item.
+   * @param {string} [options.classOpen] The CSS class for the open state.
+   * @param {string} [options.classDisabled] The CSS class for the disabled state.
+   * @param {string} [options.eventBeforeSelected]
+   *   The name of the custom event fired before a drop down item is selected.
+   *   Cancellation of this event stops selection of drop down item.
+   * @param {string} [options.eventAfterSelected] The name of the custom event fired after a drop down item is selected.
+   */
   function Dropdown(element, options) {
     var _this;
 
     _classCallCheck(this, Dropdown);
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(Dropdown).call(this, element, options));
+    _this = _super.call(this, element, options);
 
     _this.manage(on(_this.element.ownerDocument, 'click', function (event) {
       _this._toggle(event);
@@ -144,7 +195,29 @@ function (_mixin) {
       if (item) {
         _this.select(item);
       }
-    }));
+    })); // When using the active descendant approach we use a class to give focus styles during keyboard (up/down arrows)
+    // navigation instead of relying on the :focus selector. This leaves the potential to have multiple items when
+    // switching interactions between keyboard and mouse users. To more closely align with Carbon React implementation,
+    // we want the focus class to move as the user hovers over items. This also updates the location of focus based on
+    // the last hovered item if the user switches back to using the keyboard.
+
+
+    // When using the active descendant approach we use a class to give focus styles during keyboard (up/down arrows)
+    // navigation instead of relying on the :focus selector. This leaves the potential to have multiple items when
+    // switching interactions between keyboard and mouse users. To more closely align with Carbon React implementation,
+    // we want the focus class to move as the user hovers over items. This also updates the location of focus based on
+    // the last hovered item if the user switches back to using the keyboard.
+    if ( // NOTE: `selectorTrigger` does NOT match the trigger button in older markup
+    _this.element.querySelector(_this.options.selectorTrigger) && _this.element.querySelector(_this.options.selectorMenu)) {
+      // Using the latest HTML structure that supports the aria-activedescendant attribute
+      _this.manage(on(_this.element, 'mouseover', function (event) {
+        var item = eventMatches(event, _this.options.selectorItem);
+
+        if (item) {
+          _this._updateFocus(item);
+        }
+      }));
+    }
 
     return _this;
   }
@@ -154,6 +227,10 @@ function (_mixin) {
    */
 
 
+  /**
+   * Handles keydown event.
+   * @param {Event} event The event triggering this method.
+   */
   _createClass(Dropdown, [{
     key: "_handleKeyDown",
     value: function _handleKeyDown(event) {
@@ -167,9 +244,65 @@ function (_mixin) {
         this.navigate(direction);
         event.preventDefault(); // Prevents up/down keys from scrolling container
       } else {
+        // get selected item
+        // in v10.0, the anchor elements fire click events on Enter keypress when a dropdown item is selected
+        // in v10.5 (#3586), focus is no longer placed on the dropdown items and is instead kept fixed on the ul menu
+        // so we need to manually call getCurrentNavigation and select the item
+        var item = this.getCurrentNavigation();
+
+        if (item && isOpen && (event.which === 13 || event.which === 32) && !this.element.ownerDocument.activeElement.matches(this.options.selectorItem)) {
+          event.preventDefault();
+          this.select(item);
+        }
+
         this._toggle(event);
       }
     }
+    /**
+     * When using aria-activedescendant we want to make sure attributes and classes
+     * are properly cleaned up when the dropdown is closed
+     * @private
+     */
+
+  }, {
+    key: "_focusCleanup",
+    value: function _focusCleanup() {
+      // NOTE: `selectorTrigger` does NOT match the trigger button in older markup
+      var triggerNode = this.element.querySelector(this.options.selectorTrigger); // only want to grab the listNode IF it's using the latest a11y HTML structure
+
+      // only want to grab the listNode IF it's using the latest a11y HTML structure
+      var listNode = triggerNode ? this.element.querySelector(this.options.selectorMenu) : null;
+
+      if (listNode) {
+        listNode.removeAttribute('aria-activedescendant');
+        var focusedItem = this.element.querySelector(this.options.selectorItemFocused);
+
+        if (focusedItem) {
+          focusedItem.classList.remove(this.options.classFocused);
+        }
+      }
+    }
+    /**
+     * Update focus using aria-activedescendant HTML structure
+     * @param {HTMLElement} itemToFocus The element to be focused.
+     */
+
+  }, {
+    key: "_updateFocus",
+    value: function _updateFocus(itemToFocus) {
+      // NOTE: `selectorTrigger` does NOT match the trigger button in older markup
+      var triggerNode = this.element.querySelector(this.options.selectorTrigger); // only want to grab the listNode IF it's using the latest a11y HTML structure
+
+      // only want to grab the listNode IF it's using the latest a11y HTML structure
+      var listNode = triggerNode ? this.element.querySelector(this.options.selectorMenu) : null;
+      var previouslyFocused = listNode.querySelector(this.options.selectorItemFocused);
+      itemToFocus.classList.add(this.options.classFocused);
+      listNode.setAttribute('aria-activedescendant', itemToFocus.id);
+
+      if (previouslyFocused) {
+        previouslyFocused.classList.remove(this.options.classFocused);
+      }
+    }
     /**
      * Opens and closes the dropdown menu.
      * @param {Event} [event] The event triggering this method.
@@ -186,18 +319,21 @@ function (_mixin) {
 
       if (isDisabled) {
         return;
-      }
+      } // NOTE: `selectorTrigger` does NOT match the trigger button in older markup
+
 
+      // NOTE: `selectorTrigger` does NOT match the trigger button in older markup
       var triggerNode = this.element.querySelector(this.options.selectorTrigger);
 
       if ( // User presses down arrow
-      event.which === 40 && !event.target.matches(this.options.selectorItem) || // User presses space or enter and the trigger is not a button
-      !triggerNode && [13, 32].indexOf(event.which) >= 0 && !event.target.matches(this.options.selectorItem) || // User presses esc
+      event.which === 40 && !event.target.matches(this.options.selectorItem) || // User presses space or enter and the trigger is not a button OR event is not fired by trigger
+      (!triggerNode || !triggerNode.contains(event.target)) && [13, 32].indexOf(event.which) >= 0 && !event.target.matches(this.options.selectorItem) || // User presses esc
       event.which === 27 || // User clicks
       event.type === 'click') {
         var isOpen = this.element.classList.contains(this.options.classOpen);
         var isOfSelf = this.element.contains(event.target); // Determine if the open className should be added, removed, or toggled
 
+        // Determine if the open className should be added, removed, or toggled
         var actions = {
           add: isOfSelf && event.which === 40 && !isOpen,
           remove: (!isOfSelf || event.which === 27) && isOpen,
@@ -213,8 +349,10 @@ function (_mixin) {
         });
         var listItems = toArray(this.element.querySelectorAll(this.options.selectorItem)); // only want to grab the listNode IF it's using the latest a11y HTML structure
 
+        // only want to grab the listNode IF it's using the latest a11y HTML structure
         var listNode = triggerNode ? this.element.querySelector(this.options.selectorMenu) : null; // @todo remove conditionals for elements existing once legacy structure is depreciated
 
+        // @todo remove conditionals for elements existing once legacy structure is depreciated
         if (changedState && this.element.classList.contains(this.options.classOpen)) {
           // toggled open
           if (triggerNode) {
@@ -224,25 +362,27 @@ function (_mixin) {
           (listNode || this.element).focus();
 
           if (listNode) {
-            var selectedNode = listNode.querySelector(this.options.selectorItemSelected);
+            var selectedNode = listNode.querySelector(this.options.selectorLinkSelected);
             listNode.setAttribute('aria-activedescendant', (selectedNode || listItems[0]).id);
             (selectedNode || listItems[0]).classList.add(this.options.classFocused);
           }
         } else if (changedState && (isOfSelf || actions.remove)) {
           // toggled close
-          (triggerNode || this.element).focus();
+          // timer is used to call focus AFTER the click event on
+          // trigger button (which is caused by keypress e.g. during keyboard navigation)
+          setTimeout(function () {
+            return (triggerNode || _this2.element).focus();
+          }, 0);
 
           if (triggerNode) {
             triggerNode.setAttribute('aria-expanded', 'false');
           }
 
-          if (listNode) {
-            listNode.removeAttribute('aria-activedescendant');
-            this.element.querySelector(this.options.selectorItemFocused).classList.remove(this.options.classFocused);
-          }
+          this._focusCleanup();
         } // @todo remove once legacy structure is depreciated
 
 
+        // @todo remove once legacy structure is depreciated
         if (!triggerNode) {
           listItems.forEach(function (item) {
             if (_this2.element.classList.contains(_this2.options.classOpen)) {
@@ -252,6 +392,12 @@ function (_mixin) {
             }
           });
         }
+
+        var menuListNode = this.element.querySelector(this.options.selectorMenu);
+
+        if (menuListNode) {
+          menuListNode.tabIndex = this.element.classList.contains(this.options.classOpen) ? '0' : '-1';
+        }
       }
     }
     /**
@@ -263,7 +409,11 @@ function (_mixin) {
     value: function getCurrentNavigation() {
       var focusedNode; // Using the latest semantic markup structure where trigger is a button
       // @todo remove conditional once legacy structure is depreciated
+      // NOTE: `selectorTrigger` does NOT match the trigger button in older markup
 
+      // Using the latest semantic markup structure where trigger is a button
+      // @todo remove conditional once legacy structure is depreciated
+      // NOTE: `selectorTrigger` does NOT match the trigger button in older markup
       if (this.element.querySelector(this.options.selectorTrigger)) {
         var listNode = this.element.querySelector(this.options.selectorMenu);
         var focusedId = listNode.getAttribute('aria-activedescendant');
@@ -285,7 +435,7 @@ function (_mixin) {
     key: "navigate",
     value: function navigate(direction) {
       var items = toArray(this.element.querySelectorAll(this.options.selectorItem));
-      var start = this.getCurrentNavigation() || this.element.querySelector(this.options.selectorItemSelected);
+      var start = this.getCurrentNavigation() || this.element.querySelector(this.options.selectorLinkSelected);
 
       var getNextItem = function getNextItem(old) {
         var handleUnderflow = function handleUnderflow(i, l) {
@@ -297,20 +447,20 @@ function (_mixin) {
         }; // `items.indexOf(old)` may be -1 (Scenario of no previous focus)
 
 
+        // `items.indexOf(old)` may be -1 (Scenario of no previous focus)
         var index = Math.max(items.indexOf(old) + direction, -1);
         return items[handleUnderflow(handleOverflow(index, items.length), items.length)];
       };
 
+      var isShowSelected = this.element.classList.contains(this.options.classShowSelected);
+
       for (var current = getNextItem(start); current && current !== start; current = getNextItem(current)) {
-        if (!current.matches(this.options.selectorItemHidden) && !current.parentNode.matches(this.options.selectorItemHidden) && !current.matches(this.options.selectorItemSelected)) {
+        if (!current.matches(this.options.selectorItemHidden) && !current.parentNode.matches(this.options.selectorItemHidden) && (isShowSelected || !isShowSelected && !current.parentElement.matches(this.options.selectorItemSelected))) {
           // Using the latest semantic markup structure where trigger is a button
           // @todo remove conditional once legacy structure is depreciated
+          // NOTE: `selectorTrigger` does NOT match the trigger button in older markup
           if (this.element.querySelector(this.options.selectorTrigger)) {
-            var listNode = this.element.querySelector(this.options.selectorMenu);
-            var previouslyFocused = listNode.querySelector(this.options.selectorItemFocused);
-            current.classList.add(this.options.classFocused);
-            listNode.setAttribute('aria-activedescendant', current.id);
-            previouslyFocused.classList.remove(this.options.classFocused);
+            this._updateFocus(current);
           } else {
             current.focus();
           }
@@ -342,6 +492,7 @@ function (_mixin) {
 
       if (this.element.dispatchEvent(eventStart)) {
         if (this.element.dataset.dropdownType !== 'navigation') {
+          // NOTE: `selectorTrigger` does NOT match the trigger button in older markup
           var selectorText = !this.element.querySelector(this.options.selectorTrigger) && this.element.dataset.dropdownType !== 'inline' ? this.options.selectorText : this.options.selectorTextInner;
           var text = this.element.querySelector(selectorText);
 
@@ -349,13 +500,13 @@ function (_mixin) {
             text.innerHTML = itemToSelect.innerHTML;
           }
 
-          itemToSelect.classList.add(this.options.classSelected);
+          itemToSelect.parentElement.classList.add(this.options.classSelected);
         }
 
         this.element.dataset.value = itemToSelect.parentElement.dataset.value;
-        toArray(this.element.querySelectorAll(this.options.selectorItemSelected)).forEach(function (item) {
+        toArray(this.element.querySelectorAll(this.options.selectorLinkSelected)).forEach(function (item) {
           if (itemToSelect !== item) {
-            item.classList.remove(_this3.options.classSelected);
+            item.parentElement.classList.remove(_this3.options.classSelected);
           }
         });
         this.element.dispatchEvent(new CustomEvent(this.options.eventAfterSelected, {
@@ -375,6 +526,8 @@ function (_mixin) {
     key: "handleBlur",
     value: function handleBlur() {
       this.element.classList.remove(this.options.classOpen);
+
+      this._focusCleanup();
     }
     /**
      * The map associating DOM element and selector instance.
@@ -384,7 +537,7 @@ function (_mixin) {
 
   }], [{
     key: "options",
-
+    get:
     /**
      * The component options.
      * If `options` is specified in the constructor, {@linkcode Dropdown.create .create()}, or {@linkcode Dropdown.init .init()},
@@ -392,7 +545,9 @@ function (_mixin) {
      * @member Dropdown.options
      * @type {object}
      * @property {string} selectorInit The CSS selector to find selectors.
-     * @property {string} [selectorTrigger] The CSS selector to find trigger button when using a11y compliant markup.
+     * @property {string} [selectorTrigger]
+     *   The CSS selector to find the trigger button when using a11y compliant markup.
+     *   NOTE: Does NOT match the trigger button in older markup.
      * @property {string} [selectorMenu] The CSS selector to find menu list when using a11y compliant markup.
      * @property {string} [selectorText] The CSS selector to find the element showing the selected item.
      * @property {string} [selectorTextInner] The CSS selector to find the element showing the selected item, used for inline mode.
@@ -402,6 +557,8 @@ function (_mixin) {
      *   Used to skip dropdown items for keyboard navigation.
      * @property {string} [selectorItemSelected] The CSS selector to find the clickable area in the selected dropdown item.
      * @property {string} [selectorItemFocused] The CSS selector to find the clickable area in the focused dropdown item.
+     * @property {string} [selectorLinkSelected] The CSS selector to target the link node of the selected dropdown item.
+     * @property {string} [classShowSelected] The CSS class for the show selected modifier of the dropdown.
      * @property {string} [classSelected] The CSS class for the selected dropdown item.
      * @property {string} [classFocused] The CSS class for the focused dropdown item.
      * @property {string} [classOpen] The CSS class for the open state.
@@ -411,11 +568,12 @@ function (_mixin) {
      *   Cancellation of this event stops selection of drop down item.
      * @property {string} [eventAfterSelected] The name of the custom event fired after a drop down item is selected.
      */
-    get: function get() {
+    function get() {
       var prefix = settings.prefix;
       return {
         selectorInit: '[data-dropdown]',
         selectorTrigger: "button.".concat(prefix, "--dropdown-text"),
+        // NOTE: Does NOT match the trigger button in older markup.
         selectorMenu: ".".concat(prefix, "--dropdown-list"),
         selectorText: ".".concat(prefix, "--dropdown-text"),
         selectorTextInner: ".".concat(prefix, "--dropdown-text__inner"),
@@ -423,6 +581,8 @@ function (_mixin) {
         selectorItemSelected: ".".concat(prefix, "--dropdown--selected"),
         selectorItemFocused: ".".concat(prefix, "--dropdown--focused"),
         selectorItemHidden: "[hidden],[aria-hidden=\"true\"]",
+        selectorLinkSelected: ".".concat(prefix, "--dropdown--selected .").concat(prefix, "--dropdown-link"),
+        classShowSelected: "".concat(prefix, "--dropdown--show-selected"),
         classSelected: "".concat(prefix, "--dropdown--selected"),
         classFocused: "".concat(prefix, "--dropdown--focused"),
         classOpen: "".concat(prefix, "--dropdown--open"),
@@ -435,7 +595,7 @@ function (_mixin) {
      * Enum for navigating backward/forward.
      * @readonly
      * @member Dropdown.NAVIGATE
-     * @type {Object}
+     * @type {object}
      * @property {number} BACKWARD Navigating backward.
      * @property {number} FORWARD Navigating forward.
      */