@carbon/charts 0.27.0 → 0.29.1

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

@@ -0,0 +1,52 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+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.
+   * @class Handles
+   * @implements Handle
+   */
+  class Handles extends ToMix {
+    /**
+     * The handled managed by this component.
+     * Releasing this component releases the handles.
+     * @type {Set<Handle>}
+     */
+    handles = new Set();
+
+    /**
+     * Manages the given handle.
+     * @param {Handle} handle The handle to manage.
+     * @returns {Handle} The given handle.
+     */
+    manage(handle) {
+      this.handles.add(handle);
+      return handle;
+    }
+
+    /**
+     * Stop managing the given handle.
+     * @param {Handle} handle The handle to stop managing.
+     * @returns {Handle} The given handle.
+     */
+    unmanage(handle) {
+      this.handles.delete(handle);
+      return handle;
+    }
+
+    release() {
+      this.handles.forEach(handle => {
+        handle.release();
+        this.handles.delete(handle);
+      });
+      return super.release();
+    }
+  }
+  return Handles;
+}

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

@@ -0,0 +1,92 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import eventMatches from '../misc/event-matches';
+import on from '../misc/on';
+
+export default function(ToMix) {
+  /**
+   * Mix-in class to instantiate components upon events.
+   * @class InitComponentByEvent
+   */
+  class InitComponentByEvent extends ToMix {
+    /**
+     * `true` suggests that this component is lazily initialized upon an action/event, etc.
+     * @type {boolean}
+     */
+    static forLazyInit /* #__PURE_CLASS_PROPERTY__ */ = true;
+
+    /**
+     * Instantiates this component in the given element.
+     * If the given element indicates that it's an component of this class, instantiates it.
+     * Otherwise, instantiates this component by clicking on this component in the given node.
+     * @param {Node} target The DOM node to instantiate this component in. Should be a document or an element.
+     * @param {object} [options] The component options.
+     * @param {string} [options.selectorInit] The CSS selector to find this component.
+     * @returns {Handle} The handle to remove the event listener to handle clicking.
+     */
+    static init(target = document, options = {}) {
+      const effectiveOptions = Object.assign(
+        Object.create(this.options),
+        options
+      );
+      if (
+        !target ||
+        (target.nodeType !== Node.ELEMENT_NODE &&
+          target.nodeType !== Node.DOCUMENT_NODE)
+      ) {
+        throw new TypeError(
+          'DOM document or DOM element should be given to search for and initialize this widget.'
+        );
+      }
+      if (
+        target.nodeType === Node.ELEMENT_NODE &&
+        target.matches(effectiveOptions.selectorInit)
+      ) {
+        this.create(target, options);
+      } else {
+        // To work around non-bubbling `focus` event, use `focusin` event instead of it's available, and "capture mode" otherwise
+        const hasFocusin =
+          'onfocusin' in
+          (target.nodeType === Node.ELEMENT_NODE
+            ? target.ownerDocument
+            : target
+          ).defaultView;
+        const handles = effectiveOptions.initEventNames.map(name => {
+          const eventName = name === 'focus' && hasFocusin ? 'focusin' : name;
+          return on(
+            target,
+            eventName,
+            event => {
+              const element = eventMatches(
+                event,
+                effectiveOptions.selectorInit
+              );
+              // Instantiated components handles events by themselves
+              if (element && !this.components.has(element)) {
+                const component = this.create(element, options);
+                if (typeof component.createdByEvent === 'function') {
+                  component.createdByEvent(event);
+                }
+              }
+            },
+            name === 'focus' && !hasFocusin
+          );
+        });
+        return {
+          release() {
+            for (let handle = handles.pop(); handle; handle = handles.pop()) {
+              handle.release();
+            }
+          },
+        };
+      }
+      return '';
+    }
+  }
+  return InitComponentByEvent;
+}

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

@@ -0,0 +1,95 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import eventMatches from '../misc/event-matches';
+import on from '../misc/on';
+
+export default function(ToMix) {
+  /**
+   * Mix-in class to instantiate components events on launcher button.
+   * @class InitComponentByLauncher
+   */
+  class InitComponentByLauncher extends ToMix {
+    /**
+     * `true` suggests that this component is lazily initialized upon an action/event, etc.
+     * @type {boolean}
+     */
+    static forLazyInit /* #__PURE_CLASS_PROPERTY__ */ = true;
+
+    /**
+     * Instantiates this component in the given element.
+     * If the given element indicates that it's an component of this class, instantiates it.
+     * Otherwise, instantiates this component by clicking on launcher buttons
+     * (buttons with attribute that `options.attribInitTarget` points to) of this component in the given node.
+     * @param {Node} target The DOM node to instantiate this component in. Should be a document or an element.
+     * @param {object} [options] The component options.
+     * @param {string} [options.selectorInit] The CSS selector to find this component.
+     * @param {string} [options.attribInitTarget] The attribute name in the launcher buttons to find target component.
+     * @returns {Handle} The handle to remove the event listener to handle clicking.
+     */
+    static init(target = document, options = {}) {
+      const effectiveOptions = Object.assign(
+        Object.create(this.options),
+        options
+      );
+      if (
+        !target ||
+        (target.nodeType !== Node.ELEMENT_NODE &&
+          target.nodeType !== Node.DOCUMENT_NODE)
+      ) {
+        throw new TypeError(
+          'DOM document or DOM element should be given to search for and initialize this widget.'
+        );
+      }
+      if (
+        target.nodeType === Node.ELEMENT_NODE &&
+        target.matches(effectiveOptions.selectorInit)
+      ) {
+        this.create(target, options);
+      } else {
+        const handles = effectiveOptions.initEventNames.map(name =>
+          on(target, name, event => {
+            const launcher = eventMatches(
+              event,
+              `[${effectiveOptions.attribInitTarget}]`
+            );
+
+            if (launcher) {
+              event.delegateTarget = launcher; // eslint-disable-line no-param-reassign
+              const elements = launcher.ownerDocument.querySelectorAll(
+                launcher.getAttribute(effectiveOptions.attribInitTarget)
+              );
+              if (elements.length > 1) {
+                throw new Error('Target widget must be unique.');
+              }
+
+              if (elements.length === 1) {
+                if (launcher.tagName === 'A') {
+                  event.preventDefault();
+                }
+
+                const component = this.create(elements[0], options);
+                if (typeof component.createdByLauncher === 'function') {
+                  component.createdByLauncher(event);
+                }
+              }
+            }
+          })
+        );
+        return {
+          release() {
+            for (let handle = handles.pop(); handle; handle = handles.pop()) {
+              handle.release();
+            }
+          },
+        };
+      }
+      return '';
+    }
+  }
+  return InitComponentByLauncher;
+}

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

@@ -0,0 +1,50 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export default function(ToMix) {
+  /**
+   * Mix-in class to instantiate components by searching for their root elements.
+   * @class InitComponentBySearch
+   */
+  class InitComponentBySearch extends ToMix {
+    /**
+     * Instantiates component in the given node.
+     * If the given element indicates that it's an component of this class, instantiates it.
+     * Otherwise, instantiates components by searching for components in the given node.
+     * @param {Node} target The DOM node to instantiate components in. Should be a document or an element.
+     * @param {object} [options] The component options.
+     * @param {boolean} [options.selectorInit] The CSS selector to find components.
+     */
+    static init(target = document, options = {}) {
+      const effectiveOptions = Object.assign(
+        Object.create(this.options),
+        options
+      );
+      if (
+        !target ||
+        (target.nodeType !== Node.ELEMENT_NODE &&
+          target.nodeType !== Node.DOCUMENT_NODE)
+      ) {
+        throw new TypeError(
+          'DOM document or DOM element should be given to search for and initialize this widget.'
+        );
+      }
+      if (
+        target.nodeType === Node.ELEMENT_NODE &&
+        target.matches(effectiveOptions.selectorInit)
+      ) {
+        this.create(target, options);
+      } else {
+        Array.prototype.forEach.call(
+          target.querySelectorAll(effectiveOptions.selectorInit),
+          element => this.create(element, options)
+        );
+      }
+    }
+  }
+  return InitComponentBySearch;
+}

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

@@ -0,0 +1,52 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import on from '../misc/on';
+import handles from './handles';
+
+function trackBlur(ToMix) {
+  class TrackBlur extends ToMix {
+    /**
+     * Mix-in class to add an handler for losing focus.
+     * @extends Handles
+     * @param {HTMLElement} element The element working as this component.
+     * @param {object} [options] The component options.
+     */
+    constructor(element, options) {
+      super(element, options);
+      const hasFocusin = 'onfocusin' in window;
+      const focusinEventName = hasFocusin ? 'focusin' : 'focus';
+      this.manage(
+        on(
+          this.element.ownerDocument,
+          focusinEventName,
+          event => {
+            if (!this.element.contains(event.target)) {
+              this.handleBlur(event);
+            }
+          },
+          !hasFocusin
+        )
+      );
+    }
+
+    /**
+     * The method called when this component loses focus.
+     * @abstract
+     */
+    handleBlur() {
+      throw new Error(
+        'Components inheriting TrackBlur mix-in must implement handleBlur() method.'
+      );
+    }
+  }
+
+  return TrackBlur;
+}
+
+const exports = [handles, trackBlur];
+export default exports;

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

@@ -0,0 +1,38 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Settings.
+ * @exports CarbonComponents.settings
+ * @type Object
+ * @property {boolean} [disableAutoInit]
+ *   Disables automatic instantiation of components.
+ *   By default (`CarbonComponents.disableAutoInit` is `false`),
+ *   carbon-components attempts to instantiate components automatically
+ *   by searching for elements with `data-component-name` (e.g. `data-loading`) attribute
+ *   or upon DOM events (e.g. clicking) on such elements.
+ *   See each components' static `.init()` methods for details.
+ * @property {string} [prefix=bx]
+ *   Brand prefix. Should be in sync with `$prefix` Sass variable in carbon-components/src/globals/scss/_vars.scss.
+ * // @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,
+ *   iframes, objects, embeds, or elements explicitly using tabindex or contenteditable attributes
+ *   as long as the element is not `disabled` or the `tabindex="-1"`.
+ */
+const settings = {
+  prefix: 'bx',
+  selectorTabbable: `
+    a[href], area[href], input:not([disabled]):not([tabindex='-1']),
+    button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),
+    textarea:not([disabled]):not([tabindex='-1']),
+    iframe, object, embed, *[tabindex]:not([tabindex='-1']), *[contenteditable=true]
+  `,
+};
+
+module.exports = settings;

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

@@ -0,0 +1,102 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as components from './components';
+
+const { forEach } = Array.prototype;
+
+const createAndReleaseComponentsUponDOMMutation = (
+  records,
+  componentClasses,
+  componentClassesForWatchInit,
+  options
+) => {
+  records.forEach(record => {
+    forEach.call(record.addedNodes, node => {
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        componentClassesForWatchInit.forEach(Clz => {
+          Clz.init(node, options);
+        });
+      }
+    });
+    forEach.call(record.removedNodes, node => {
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        componentClasses.forEach(Clz => {
+          if (node.matches(Clz.options.selectorInit)) {
+            const instance = Clz.components.get(node);
+            if (instance) {
+              instance.release();
+            }
+          } else {
+            forEach.call(
+              node.querySelectorAll(Clz.options.selectorInit),
+              element => {
+                const instance = Clz.components.get(element);
+                if (instance) {
+                  instance.release();
+                }
+              }
+            );
+          }
+        });
+      }
+    });
+  });
+};
+
+/**
+ * Automatically instantiates/destroys components in the given element, by watching for DOM additions/removals.
+ * @param {Node} target The DOM node to instantiate components in. Should be a document or an element.
+ * @param {object} [options] The component options.
+ * @returns {Handle} The handle to stop watching.
+ */
+export default function(target = document, options = {}) {
+  if (
+    target.nodeType !== Node.ELEMENT_NODE &&
+    target.nodeType !== Node.DOCUMENT_NODE
+  ) {
+    throw new TypeError(
+      'DOM document or DOM element should be given to watch for DOM node to create/release components.'
+    );
+  }
+
+  const componentClasses = Object.keys(components)
+    .map(key => components[key])
+    .filter(component => typeof component.init === 'function');
+
+  const handles = componentClasses
+    .map(Clz => Clz.init(target, options))
+    .filter(Boolean);
+
+  const componentClassesForWatchInit = componentClasses.filter(
+    Clz => !Clz.forLazyInit
+  );
+
+  let observer = new MutationObserver(records => {
+    createAndReleaseComponentsUponDOMMutation(
+      records,
+      componentClasses,
+      componentClassesForWatchInit,
+      options
+    );
+  });
+  observer.observe(target, {
+    childList: true,
+    subtree: true,
+  });
+  return {
+    release() {
+      for (let handle = handles.pop(); handle; handle = handles.pop()) {
+        handle.release();
+      }
+      if (observer) {
+        observer.disconnect();
+        observer = null;
+      }
+    },
+  };
+}

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

@@ -0,0 +1,96 @@
+# `scss`
+
+See [docs](http://carbondesignsystem.com/getting-started/developers) to get
+started with Carbon SCSS.
+
+## Usage with another design system
+
+While we do _not_ recommend using Carbon along with another design system in one
+application because doing so loses coheisiveness in your application's user
+experience, you can use "selector namspacing" technique e.g. while you are
+migrating from another design system to Carbon and just flipping the switch at
+once is extremely hard.
+
+Below example generates CSS files whose CSS selectors are namespaced, e.g.
+`textarea` selector converted to `.carbon textarea`:
+
+```javascript
+const gulp = require('gulp');
+const postcss = require('gulp-postcss');
+const prefixSelector = require('postcss-prefix-selector');
+
+gulp.task('postcss:carbon', () =>
+  gulp
+    .src('node_modules/carbon-components/css/carbon-components.css')
+    .pipe(
+      postcss([
+        prefixSelector({
+          prefix: '.carbon',
+          transform: (prefix, selector, prefixedSelector) => {
+            const list = [prefixedSelector, selector + prefix];
+            if (selector === 'html' || selector === 'body') {
+              // Mimics styles to `<html>`/`<body>` with e.g. `.carbon--body`
+              list.push(`${prefix}--${selector}`);
+            }
+            return list;
+          },
+        }),
+      ])
+    )
+    .pipe(gulp.dest('dist'))
+);
+
+gulp.task('postcss:another-design-system', () =>
+  gulp
+    .src('node_modules/another-design-system/path/to/another-design-system.css')
+    .pipe(
+      postcss([
+        prefixSelector({
+          prefix: '.another-design-system',
+          transform: (prefix, selector, prefixedSelector) => {
+            const list = [prefixedSelector, selector + prefix];
+            if (selector === 'html' || selector === 'body') {
+              // Mimics styles to `<html>`/`<body>` with e.g. `.another-design-system--body`
+              list.push(`${prefix}--${selector}`);
+            }
+            return list;
+          },
+        }),
+      ])
+    )
+    .pipe(gulp.dest('dist'))
+);
+
+gulp.task('postcss', ['postcss:carbon', 'postcss:another-design-system']);
+```
+
+Below HTML is an example using a Carbon button is used along with a button with
+another design system, using what above build step generaes:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="./dist/carbon-components.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="./dist/another-design-system.css"
+    />
+  </head>
+  <body>
+    <div class="bx--body carbon--body carbon--html">
+      <button class="carbon bx--btn bx--btn--primary">Carbon</button>
+    </div>
+    <div class="another-design-system--body another-design-system--html">
+      <button class="another-design-system btn btn-primary">
+        Another design system
+      </button>
+    </div>
+  </body>
+</html>
+```

package/styles/vendor/carbon-components/src/globals/scss/_colors.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2016, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+//-----------
+// v10 COLORS
+//-----------
+@import './vendor/@carbon/elements/scss/colors/colors';

package/styles/vendor/carbon-components/src/globals/scss/_css--body.scss

@@ -0,0 +1,30 @@
+//
+// Copyright IBM Corp. 2016, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@import 'vars';
+@import 'typography';
+@import 'css--reset';
+@import './vendor/@carbon/elements/scss/import-once/import-once';
+
+/// Body styles
+/// @access private
+/// @group global-body
+@mixin css-body {
+  body {
+    @include reset;
+    @include type-style('body-short-01');
+    color: $text-01;
+    background-color: $ui-background;
+    line-height: 1;
+  }
+}
+
+@include exports('css--body') {
+  @if variable-exists('css--body') == false or $css--body == true {
+    @include css-body;
+  }
+}