@carbon/charts 0.41.91 → 0.41.92

package/styles/vendor/carbon-components/src/components/ui-shell/side-nav.hbs

@@ -13,7 +13,8 @@
         <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)">
           <div class="{{@root.prefix}}--side-nav__icon {{@root.prefix}}--side-nav__icon--small">
             <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
-              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
+              <path
+                d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
             </svg>
           </div>
           <span class="{{@root.prefix}}--side-nav__link-text">Link</span>
@@ -23,7 +24,8 @@
         <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" aria-current="page">
           <div class="{{@root.prefix}}--side-nav__icon {{@root.prefix}}--side-nav__icon--small">
             <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
-              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
+              <path
+                d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
             </svg>
           </div>
           <span class="{{@root.prefix}}--side-nav__link-text">Link - active</span>
@@ -33,7 +35,8 @@
         <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)">
           <div class="{{@root.prefix}}--side-nav__icon {{@root.prefix}}--side-nav__icon--small">
             <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
-              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
+              <path
+                d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
             </svg>
           </div>
           <span class="{{@root.prefix}}--side-nav__link-text">
@@ -46,7 +49,8 @@
           aria-current="page">
           <div class="{{@root.prefix}}--side-nav__icon {{@root.prefix}}--side-nav__icon--small">
             <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
-              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
+              <path
+                d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
             </svg>
           </div>
           <span class="{{@root.prefix}}--side-nav__link-text">
@@ -58,40 +62,42 @@
         <button class="{{@root.prefix}}--side-nav__submenu" type="button" aria-haspopup="true" aria-expanded="true">
           <div class="{{@root.prefix}}--side-nav__icon">
             <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
-              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
+              <path
+                d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
             </svg>
           </div>
           <span class="{{@root.prefix}}--side-nav__submenu-title">
             Category title that is really long and probably should overflow
           </span>
-          <div class="{{@root.prefix}}--side-nav__icon {{@root.prefix}}--side-nav__icon--small {{@root.prefix}}--side-nav__submenu-chevron">
+          <div
+            class="{{@root.prefix}}--side-nav__icon {{@root.prefix}}--side-nav__icon--small {{@root.prefix}}--side-nav__submenu-chevron">
             <svg aria-hidden="true" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
               <path d="M16 22L6 12l1.414-1.414L16 19.172l8.586-8.586L26 12 16 22z" />
             </svg>
           </div>
         </button>
-        <ul class="{{@root.prefix}}--side-nav__menu" role="menu">
+        <ul class="{{@root.prefix}}--side-nav__menu">
           <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
-            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)">
               <span class="{{@root.prefix}}--side-nav__link-text">
                 Link with really long text that probably should be truncated
               </span>
             </a>
           </li>
           <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
-            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem" aria-current="page">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" aria-current="page">
               <span class="{{@root.prefix}}--side-nav__link-text">
                 Link with really long text that probably should be truncated
               </span>
             </a>
           </li>
           <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
-            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)">
               <span class="{{@root.prefix}}--side-nav__link-text">Link</span>
             </a>
           </li>
           <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
-            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem" aria-current="page">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" aria-current="page">
               <span class="{{@root.prefix}}--side-nav__link-text">Link</span>
             </a>
           </li>

package/styles/vendor/carbon-components/src/components/ui-shell/side-nav.js

@@ -15,11 +15,7 @@ import eventMatches from '../../globals/js/misc/event-matches';
 
 const { prefix } = settings;
 
-export default class SideNav extends mixin(
-  createComponent,
-  initComponentBySearch,
-  handles
-) {
+class SideNav extends mixin(createComponent, initComponentBySearch, handles) {
   /**
    * The map associating DOM element and copy button UI instance.
    * @member SideNav.components
@@ -27,6 +23,26 @@ export default class SideNav extends mixin(
    */
   static components /* #__PURE_CLASS_PROPERTY__ */ = new WeakMap();
 
+  /**
+   * Side nav.
+   * @extends CreateComponent
+   * @extends InitComponentBySearch
+   * @extends Handles
+   * @param {HTMLElement} element The element working as a side nav.
+   * @param {object} [options] The component options.
+   * @param {string} [options.selectorSideNavToggle]
+   *   The CSS selector to find the toggle button.
+   * @param {string} [options.selectorSideNavSubmenu] The CSS selector to find the trigger buttons for sub nav items.
+   * @param {string} [options.selectorSideNavItem] The CSS selector to find the nav items.
+   * @param {string} [options.selectorSideNavLink] The CSS selector to find the interactive potions in non-nested nav items.
+   * @param {string} [options.selectorSideNavLinkCurrent]
+   *   The CSS selector to find the interactive potion in active non-nested nav item.
+   * @param {string} [options.classSideNavExpanded] The CSS class for the expanded state.
+   * @param {string} [options.classSideNavItemActive]
+   *   The CSS class for the active/inactive state for nav items.
+   * @param {string} [options.classSideNavLinkCurrent]
+   *   The CSS class for the active/inactive state of the interactive potion in non-nested nav items.
+   */
   constructor(element, options) {
     super(element, options);
     this.manage(on(element, 'click', this._handleClick));
@@ -36,7 +52,7 @@ export default class SideNav extends mixin(
    * Enum for toggling side nav visibility
    * @readonly
    * @member SideNav.state
-   * @type {Object}
+   * @type {object}
    * @property {string} EXPANDED Opening/visible
    * @property {string} COLLAPSED Closing/hidden
    */
@@ -62,7 +78,7 @@ export default class SideNav extends mixin(
     );
   }
 
-  _handleClick = evt => {
+  _handleClick = (evt) => {
     const matchesToggle = eventMatches(evt, this.options.selectorSideNavToggle);
     const matchesNavSubmenu = eventMatches(
       evt,
@@ -94,7 +110,7 @@ export default class SideNav extends mixin(
         ...this.element.querySelectorAll(
           this.options.selectorSideNavLinkCurrent
         ),
-      ].forEach(el => {
+      ].forEach((el) => {
         el.classList.remove(
           this.options.classSideNavItemActive,
           this.options.classSideNavLinkCurrent
@@ -116,8 +132,18 @@ export default class SideNav extends mixin(
    * If `options` is specified in the constructor, {@linkcode SideNav.create .create()}, or {@linkcode SideNav.init .init()},
    * properties in this object are overriden for the instance being create and how {@linkcode SideNav.init .init()} works.
    * @member SideNav.options
-   * @type {Object}
+   * @type {object}
    * @property {string} selectorInit The data attribute to find side navs.
+   * @property {string} [selectorSideNavToggle] The CSS selector to find the toggle button.
+   * @property {string} [selectorSideNavSubmenu] The CSS selector to find the trigger buttons for sub nav items.
+   * @property {string} [selectorSideNavItem] The CSS selector to find the nav items.
+   * @property {string} [selectorSideNavLink] The CSS selector to find the interactive portions in non-nested nav items.
+   * @property {string} [selectorSideNavLinkCurrent]
+   *   The CSS selector to find the interactive potion in active non-nested nav item.
+   * @property {string} [classSideNavExpanded] The CSS class for the expanded state.
+   * @property {string} [classSideNavItemActive] The CSS class for the active/inactive state for nav items.
+   * @property {string} [classSideNavLinkCurrent]
+   *   The CSS class for the active/inactive state of the interactive portion in non-nested nav items.
    */
   static options /* #__PURE_CLASS_PROPERTY__ */ = {
     selectorInit: '[data-side-nav]',
@@ -131,3 +157,5 @@ export default class SideNav extends mixin(
     classSideNavLinkCurrent: `${prefix}--side-nav__link--current`,
   };
 }
+
+export default SideNav;

package/styles/vendor/carbon-components/src/globals/js/boot.js

@@ -25,10 +25,10 @@ const lazyInitHandles = [];
  */
 const init = () => {
   const componentClasses = Object.keys(components)
-    .map(key => components[key])
-    .filter(component => typeof component.init === 'function');
+    .map((key) => components[key])
+    .filter((component) => typeof component.init === 'function');
   if (!settings.disableAutoInit) {
-    componentClasses.forEach(Clz => {
+    componentClasses.forEach((Clz) => {
       const h = Clz.init();
       if (h) {
         lazyInitHandles.push(h);
@@ -41,7 +41,7 @@ const init = () => {
  * Replaces the list of components to initialize.
  * @param {object} componentsToReplaceWith The new list of components.
  */
-export const setComponents = componentsToReplaceWith => {
+export const setComponents = (componentsToReplaceWith) => {
   components = componentsToReplaceWith;
 };
 

package/styles/vendor/carbon-components/src/globals/js/components.js

@@ -6,69 +6,36 @@
  */
 
 export { default as Checkbox } from '../../components/checkbox/checkbox';
-export {
-  default as FileUploader,
-} from '../../components/file-uploader/file-uploader';
-export {
-  default as ContentSwitcher,
-} from '../../components/content-switcher/content-switcher';
+export { default as FileUploader } from '../../components/file-uploader/file-uploader';
+export { default as ContentSwitcher } from '../../components/content-switcher/content-switcher';
 export { default as Tab } from '../../components/tabs/tabs';
-export {
-  default as OverflowMenu,
-} from '../../components/overflow-menu/overflow-menu';
+export { default as OverflowMenu } from '../../components/overflow-menu/overflow-menu';
 export { default as Modal } from '../../components/modal/modal';
 export { default as Loading } from '../../components/loading/loading';
-export {
-  default as InlineLoading,
-} from '../../components/inline-loading/inline-loading';
+export { default as InlineLoading } from '../../components/inline-loading/inline-loading';
 export { default as Dropdown } from '../../components/dropdown/dropdown';
-export {
-  default as NumberInput,
-} from '../../components/number-input/number-input';
-export {
-  default as DataTableV2,
-} from '../../components/data-table-v2/data-table-v2';
+export { default as NumberInput } from '../../components/number-input/number-input';
+export { default as DataTableV2 } from '../../components/data-table-v2/data-table-v2';
 export { default as DataTable } from '../../components/data-table/data-table';
-export {
-  default as DatePicker,
-} from '../../components/date-picker/date-picker';
+export { default as DatePicker } from '../../components/date-picker/date-picker';
 export { default as Pagination } from '../../components/pagination/pagination';
 export { default as Search } from '../../components/search/search';
 export { default as Accordion } from '../../components/accordion/accordion';
-export {
-  default as CopyButton,
-} from '../../components/copy-button/copy-button';
-export {
-  default as Notification,
-} from '../../components/notification/notification';
+export { default as CopyButton } from '../../components/copy-button/copy-button';
+export { default as Notification } from '../../components/notification/notification';
 export { default as Toolbar } from '../../components/toolbar/toolbar';
 export { default as Tooltip } from '../../components/tooltip/tooltip';
-export {
-  default as ProgressIndicator,
-} from '../../components/progress-indicator/progress-indicator';
-export {
-  default as FloatingMenu,
-} from '../../components/floating-menu/floating-menu';
-export {
-  default as StructuredList,
-} from '../../components/structured-list/structured-list';
+export { default as TooltipSimple } from '../../components/tooltip/tooltip--simple';
+export { default as ProgressIndicator } from '../../components/progress-indicator/progress-indicator';
+export { default as FloatingMenu } from '../../components/floating-menu/floating-menu';
+export { default as StructuredList } from '../../components/structured-list/structured-list';
 export { default as Slider } from '../../components/slider/slider';
 export { default as Tile } from '../../components/tile/tile';
-export {
-  default as CodeSnippet,
-} from '../../components/code-snippet/code-snippet';
+export { default as CodeSnippet } from '../../components/code-snippet/code-snippet';
 export { default as TextInput } from '../../components/text-input/text-input';
 export { default as SideNav } from '../../components/ui-shell/side-nav';
-export {
-  default as HeaderSubmenu,
-} from '../../components/ui-shell/header-submenu';
+export { default as HeaderSubmenu } from '../../components/ui-shell/header-submenu';
 export { default as HeaderNav } from '../../components/ui-shell/header-nav';
-export {
-  default as NavigationMenu,
-} from '../../components/ui-shell/navigation-menu';
-export {
-  default as ProductSwitcher,
-} from '../../components/ui-shell/product-switcher';
-export {
-  default as PaginationNav,
-} from '../../components/pagination-nav/pagination-nav';
+export { default as NavigationMenu } from '../../components/ui-shell/navigation-menu';
+export { default as ProductSwitcher } from '../../components/ui-shell/product-switcher';
+export { default as PaginationNav } from '../../components/pagination-nav/pagination-nav';

package/styles/vendor/carbon-components/src/globals/js/misc/README.md

@@ -0,0 +1,25 @@
+# Misc functions
+
+# `event-matches.js`
+
+Event delegation - returns the closest ancestor of the event target (or the
+event target itself) which matches the selectors given in parameter.
+
+# `get-launching-details.js`
+
+Given an event, returns an object that contains the `launchingElement` and the
+`launchingEvent` (if either exists)
+
+# `mixin.js`
+
+Creates the composed base class for components to build off of
+
+# `on.js`
+
+Abstracts out the `addEventListener` handler to automatically get released when
+`handle.release()` is run.
+
+# `resize.js`
+
+Creates a resize handler tied to requestAnimationFrame for a more optimized
+result. Has an `add` method to add callbacks to the resize handler.

package/styles/vendor/carbon-components/src/globals/js/misc/on-focus-by-keyboard.js

@@ -11,7 +11,7 @@ export default function onFocusByKeyboard(node, name, callback) {
   const focusoutEventName = hasFocusout ? 'focusout' : 'blur';
   /**
    * Event types supported by this function
-   * @type {Object<string, string>}
+   * @type {object<string, string>}
    */
   const supportedEvents = {
     focus: focusinEventName,
@@ -28,7 +28,7 @@ export default function onFocusByKeyboard(node, name, callback) {
       clicked = false;
     });
   };
-  let handleFocusin = evt => {
+  let handleFocusin = (evt) => {
     if (!clicked) {
       callback(evt);
     }

package/styles/vendor/carbon-components/src/globals/js/misc/resize.js

@@ -13,7 +13,7 @@ const optimizedResize = /* #__PURE__ */ (function optimizedResize() {
 
   // run the actual callbacks
   function runCallbacks() {
-    callbacks.forEach(callback => {
+    callbacks.forEach((callback) => {
       callback();
     });
 
@@ -40,7 +40,7 @@ const optimizedResize = /* #__PURE__ */ (function optimizedResize() {
 
   return {
     // public method to add additional callback
-    add: callback => {
+    add: (callback) => {
       if (!callbacks.length) {
         window.addEventListener('resize', resize);
       }

package/styles/vendor/carbon-components/src/globals/js/misc/svg-toggle-class.js

@@ -6,10 +6,7 @@
  */
 
 function svgToggleClass(svg, name, forceAdd) {
-  const list = svg
-    .getAttribute('class')
-    .trim()
-    .split(/\s+/);
+  const list = svg.getAttribute('class').trim().split(/\s+/);
   const uniqueList = Object.keys(
     list.reduce((o, item) => Object.assign(o, { [item]: 1 }), {})
   );

package/styles/vendor/carbon-components/src/globals/js/mixins/README.md

@@ -319,3 +319,40 @@ types to instantiate components upon.
 
 `.createdByLauncher()` method allows you to run an event handler of the event
 that caused instantiating the component.
+
+# Other mixins
+
+## `evented-state.js`
+
+In our components, oftentimes clicking a UI element implies a certain state
+change. Examples are things like closing menus, opening modals, or changing a
+page. In our vanilla library, we try to emit CustomEvents for these actions to
+let the consuming developer respond to them with a callback function.
+
+_Public Methods added_
+
+- `changeState`
+
+**\*Required** Private Methods\*
+
+- `_changeState`
+
+## `evented-show-hide-state.js`
+
+This one adds hide/show methods to your component and kicks off the change
+state - you're expected to add in the element that triggers the action, as well
+as a callback to do something with the state change.
+
+_Public Methods Added_
+
+- `show`
+- `hide`
+
+## `track-blur.js`
+
+Adds a blur handler to your component - expects a handleBlur method to be added
+into the consuming component
+
+**Required Public Methods added**
+
+- `handleBlur`

package/styles/vendor/carbon-components/src/globals/js/mixins/create-component.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export default function(ToMix) {
+export default function (ToMix) {
   class CreateComponent extends ToMix {
     /**
      * The component instances managed by this component.
@@ -39,7 +39,7 @@ export default function(ToMix) {
 
       /**
        * The component options.
-       * @type {Object}
+       * @type {object}
        */
       this.options = Object.assign(
         Object.create(this.constructor.options),

package/styles/vendor/carbon-components/src/globals/js/mixins/evented-state.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export default function(ToMix) {
+export default function (ToMix) {
   /**
    * Mix-in class to manage events associated with states.
    * @class EventedState
@@ -62,7 +62,7 @@ export default function(ToMix) {
         .filter(Boolean)
         .join('-')
         .split('-') // Group or state may contain hyphen
-        .map(item => item[0].toUpperCase() + item.substr(1))
+        .map((item) => item[0].toUpperCase() + item.substr(1))
         .join('');
 
       const eventStart = new CustomEvent(
@@ -108,7 +108,7 @@ export default function(ToMix) {
      * Classes inheriting {@link EventedState `EventedState`} should override this function.
      * @function EventedState#shouldStateBeChanged
      * @param {string} [state] The new state. Can be an omitted, which means toggling.
-     * @param {Object} [detail]
+     * @param {object} [detail]
      *   The object that should be put to event details that is fired before/after changing state.
      *   Can have a `group` property, which specifies what state to be changed.
      * @returns {boolean}

package/styles/vendor/carbon-components/src/globals/js/mixins/handles.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export default function(ToMix) {
+export default function (ToMix) {
   /**
    * Mix-in class to manage handles in component.
    * Managed handles are automatically released when the component with this class mixed in is released.
@@ -41,7 +41,7 @@ export default function(ToMix) {
     }
 
     release() {
-      this.handles.forEach(handle => {
+      this.handles.forEach((handle) => {
         handle.release();
         this.handles.delete(handle);
       });

package/styles/vendor/carbon-components/src/globals/js/mixins/init-component-by-event.js

@@ -8,7 +8,7 @@
 import eventMatches from '../misc/event-matches';
 import on from '../misc/on';
 
-export default function(ToMix) {
+export default function (ToMix) {
   /**
    * Mix-in class to instantiate components upon events.
    * @class InitComponentByEvent
@@ -56,12 +56,12 @@ export default function(ToMix) {
             ? target.ownerDocument
             : target
           ).defaultView;
-        const handles = effectiveOptions.initEventNames.map(name => {
+        const handles = effectiveOptions.initEventNames.map((name) => {
           const eventName = name === 'focus' && hasFocusin ? 'focusin' : name;
           return on(
             target,
             eventName,
-            event => {
+            (event) => {
               const element = eventMatches(
                 event,
                 effectiveOptions.selectorInit

package/styles/vendor/carbon-components/src/globals/js/mixins/init-component-by-launcher.js

@@ -8,7 +8,7 @@
 import eventMatches from '../misc/event-matches';
 import on from '../misc/on';
 
-export default function(ToMix) {
+export default function (ToMix) {
   /**
    * Mix-in class to instantiate components events on launcher button.
    * @class InitComponentByLauncher
@@ -51,8 +51,8 @@ export default function(ToMix) {
       ) {
         this.create(target, options);
       } else {
-        const handles = effectiveOptions.initEventNames.map(name =>
-          on(target, name, event => {
+        const handles = effectiveOptions.initEventNames.map((name) =>
+          on(target, name, (event) => {
             const launcher = eventMatches(
               event,
               `[${effectiveOptions.attribInitTarget}]`

package/styles/vendor/carbon-components/src/globals/js/mixins/init-component-by-search.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export default function(ToMix) {
+export default function (ToMix) {
   /**
    * Mix-in class to instantiate components by searching for their root elements.
    * @class InitComponentBySearch
@@ -41,7 +41,7 @@ export default function(ToMix) {
       } else {
         Array.prototype.forEach.call(
           target.querySelectorAll(effectiveOptions.selectorInit),
-          element => this.create(element, options)
+          (element) => this.create(element, options)
         );
       }
     }

package/styles/vendor/carbon-components/src/globals/js/mixins/track-blur.js

@@ -20,12 +20,27 @@ function trackBlur(ToMix) {
       super(element, options);
       const hasFocusin = 'onfocusin' in window;
       const focusinEventName = hasFocusin ? 'focusin' : 'focus';
+      const focusoutEventName = hasFocusin ? 'focusout' : 'blur';
       this.manage(
         on(
           this.element.ownerDocument,
           focusinEventName,
-          event => {
-            if (!this.element.contains(event.target)) {
+          (event) => {
+            if (
+              !(this.options.contentNode || this.element).contains(event.target)
+            ) {
+              this.handleBlur(event);
+            }
+          },
+          !hasFocusin
+        )
+      );
+      this.manage(
+        on(
+          this.element.ownerDocument,
+          focusoutEventName,
+          (event) => {
+            if (!event.relatedTarget) {
               this.handleBlur(event);
             }
           },

package/styles/vendor/carbon-components/src/globals/js/settings.js

@@ -21,9 +21,13 @@
  * // @todo given that the default value is so long, is it appropriate to put in the JSDoc?
  * @property {string} [selectorTabbable]
  *   A selector selecting tabbable/focusable nodes.
- *   By default selectorTabbable refereneces links, areas, inputs, buttons, selects, textareas,
+ *   By default selectorTabbable references links, areas, inputs, buttons, selects, textareas,
  *   iframes, objects, embeds, or elements explicitly using tabindex or contenteditable attributes
  *   as long as the element is not `disabled` or the `tabindex="-1"`.
+ * @property {string} [selectorFocusable]
+ *   CSS selector that selects major nodes that are click focusable
+ *   This property is identical to selectorTabbable with the exception of
+ *   the `:not([tabindex='-1'])` pseudo class
  */
 const settings = {
   prefix: 'bx',
@@ -33,6 +37,12 @@ const settings = {
     textarea:not([disabled]):not([tabindex='-1']),
     iframe, object, embed, *[tabindex]:not([tabindex='-1']), *[contenteditable=true]
   `,
+  selectorFocusable: `
+    a[href], area[href], input:not([disabled]),
+    button:not([disabled]),select:not([disabled]),
+    textarea:not([disabled]),
+    iframe, object, embed, *[tabindex], *[contenteditable=true]
+  `,
 };
 
 module.exports = settings;