@carbon/react 0.16.2 → 1.0.0-rc.0

package/lib/internal/Selection.js

@@ -0,0 +1,254 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var PropTypes = require('prop-types');
+var isEqual = require('lodash.isequal');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
+
+function callOnChangeHandler(_ref) {
+  var isControlled = _ref.isControlled,
+      isMounted = _ref.isMounted,
+      onChangeHandlerControlled = _ref.onChangeHandlerControlled,
+      onChangeHandlerUncontrolled = _ref.onChangeHandlerUncontrolled,
+      selectedItems = _ref.selectedItems;
+
+  if (isControlled) {
+    if (isMounted && onChangeHandlerControlled) {
+      onChangeHandlerControlled({
+        selectedItems: selectedItems
+      });
+    }
+  } else {
+    onChangeHandlerUncontrolled(selectedItems);
+  }
+}
+
+function useSelection(_ref2) {
+  var disabled = _ref2.disabled,
+      onChange = _ref2.onChange,
+      _ref2$initialSelected = _ref2.initialSelectedItems,
+      initialSelectedItems = _ref2$initialSelected === void 0 ? [] : _ref2$initialSelected,
+      controlledItems = _ref2.selectedItems;
+  var isMounted = React.useRef(false);
+  var savedOnChange = React.useRef(onChange);
+
+  var _useState = React.useState(initialSelectedItems),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      uncontrolledItems = _useState2[0],
+      setUncontrolledItems = _useState2[1];
+
+  var isControlled = !!controlledItems;
+  var selectedItems = isControlled ? controlledItems : uncontrolledItems;
+  var onItemChange = React.useCallback(function (item) {
+    if (disabled) {
+      return;
+    }
+
+    var selectedIndex;
+    selectedItems.forEach(function (selectedItem, index) {
+      if (isEqual__default["default"](selectedItem, item)) {
+        selectedIndex = index;
+      }
+    });
+    var newSelectedItems;
+
+    if (selectedIndex === undefined) {
+      newSelectedItems = selectedItems.concat(item);
+      callOnChangeHandler({
+        isControlled: isControlled,
+        isMounted: isMounted.current,
+        onChangeHandlerControlled: savedOnChange.current,
+        onChangeHandlerUncontrolled: setUncontrolledItems,
+        selectedItems: newSelectedItems
+      });
+      return;
+    }
+
+    newSelectedItems = removeAtIndex(selectedItems, selectedIndex);
+    callOnChangeHandler({
+      isControlled: isControlled,
+      isMounted: isMounted.current,
+      onChangeHandlerControlled: savedOnChange.current,
+      onChangeHandlerUncontrolled: setUncontrolledItems,
+      selectedItems: newSelectedItems
+    });
+  }, [disabled, isControlled, selectedItems]);
+  var clearSelection = React.useCallback(function () {
+    if (disabled) {
+      return;
+    }
+
+    callOnChangeHandler({
+      isControlled: isControlled,
+      isMounted: isMounted.current,
+      onChangeHandlerControlled: savedOnChange.current,
+      onChangeHandlerUncontrolled: setUncontrolledItems,
+      selectedItems: []
+    });
+  }, [disabled, isControlled]);
+  React.useEffect(function () {
+    savedOnChange.current = onChange;
+  }, [onChange]);
+  React.useEffect(function () {
+    if (isMounted.current && savedOnChange.current && !isControlled) {
+      savedOnChange.current({
+        selectedItems: selectedItems
+      });
+    }
+  }, [isControlled, selectedItems]);
+  React.useEffect(function () {
+    isMounted.current = true;
+    return function () {
+      isMounted.current = false;
+    };
+  }, []);
+  return {
+    selectedItems: selectedItems,
+    onItemChange: onItemChange,
+    clearSelection: clearSelection
+  };
+}
+
+var Selection = /*#__PURE__*/function (_React$Component) {
+  _rollupPluginBabelHelpers.inherits(Selection, _React$Component);
+
+  var _super = _rollupPluginBabelHelpers.createSuper(Selection);
+
+  function Selection(props) {
+    var _this;
+
+    _rollupPluginBabelHelpers.classCallCheck(this, Selection);
+
+    _this = _super.call(this, props);
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "internalSetState", function (stateToSet, callback) {
+      return _this.setState(stateToSet, function () {
+        if (callback) {
+          callback();
+        }
+
+        if (_this.props.onChange) {
+          _this.props.onChange(_this.state);
+        }
+      });
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleClearSelection", function () {
+      if (_this.props.disabled) {
+        return;
+      }
+
+      _this.internalSetState({
+        selectedItems: []
+      });
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleSelectItem", function (item) {
+      _this.internalSetState(function (state) {
+        return {
+          selectedItems: state.selectedItems.concat(item)
+        };
+      });
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleRemoveItem", function (index) {
+      _this.internalSetState(function (state) {
+        return {
+          selectedItems: removeAtIndex(state.selectedItems, index)
+        };
+      });
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleOnItemChange", function (item) {
+      if (_this.props.disabled) {
+        return;
+      }
+
+      var selectedItems = _this.state.selectedItems;
+      var selectedIndex;
+      selectedItems.forEach(function (selectedItem, index) {
+        if (isEqual__default["default"](selectedItem, item)) {
+          selectedIndex = index;
+        }
+      });
+
+      if (selectedIndex === undefined) {
+        _this.handleSelectItem(item);
+
+        return;
+      }
+
+      _this.handleRemoveItem(selectedIndex);
+    });
+
+    _this.state = {
+      selectedItems: props.initialSelectedItems
+    };
+    return _this;
+  }
+
+  _rollupPluginBabelHelpers.createClass(Selection, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          children = _this$props.children,
+          render = _this$props.render;
+      var selectedItems = this.state.selectedItems;
+      var renderProps = {
+        selectedItems: selectedItems,
+        onItemChange: this.handleOnItemChange,
+        clearSelection: this.handleClearSelection
+      };
+
+      if (render !== undefined) {
+        return render(renderProps);
+      }
+
+      if (children !== undefined) {
+        return children(renderProps);
+      }
+
+      return null;
+    }
+  }]);
+
+  return Selection;
+}(React__default["default"].Component); // Generic utility for safely removing an element at a given index from an
+// array.
+
+
+_rollupPluginBabelHelpers.defineProperty(Selection, "propTypes", {
+  children: PropTypes__default["default"].func,
+  disabled: PropTypes__default["default"].bool,
+  initialSelectedItems: PropTypes__default["default"].array.isRequired,
+  onChange: PropTypes__default["default"].func,
+  render: PropTypes__default["default"].func
+});
+
+_rollupPluginBabelHelpers.defineProperty(Selection, "defaultProps", {
+  initialSelectedItems: []
+});
+
+var removeAtIndex = function removeAtIndex(array, index) {
+  var result = array.slice();
+  result.splice(index, 1);
+  return result;
+};
+
+exports["default"] = Selection;
+exports.useSelection = useSelection;

package/lib/internal/createClassWrapper.js

@@ -0,0 +1,39 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * Wrap a class component with a functional component. This prevents an end-user
+ * from being able to pass `ref` and access the underlying class instance.
+ *
+ * @param {ReactNode} Component
+ * @returns {ReactNode}
+ */
+
+function createClassWrapper(Component) {
+  function ClassWrapper(props) {
+    return /*#__PURE__*/React__default["default"].createElement(Component, props);
+  }
+
+  if (process.env.NODE_ENV !== "production") {
+    var name = Component.displayName || Component.name;
+    ClassWrapper.displayName = "ClassWrapper(".concat(name, ")");
+  }
+
+  return ClassWrapper;
+}
+
+exports.createClassWrapper = createClassWrapper;

package/lib/internal/deprecateFieldOnObject.js

@@ -0,0 +1,30 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var warning = require('./warning.js');
+
+var didWarnAboutDeprecation = {};
+
+function deprecateFieldOnObject(object, field, Component, message) {
+  Object.defineProperty(object, field, {
+    enumerable: true,
+    get: function get() {
+      if (!didWarnAboutDeprecation[field]) {
+        process.env.NODE_ENV !== "production" ? warning.warning(false, message || "The ".concat(field, " field has been deprecated on the ").concat(object.displayName, " object. ") + "Please import and use ".concat(Component.displayName || Component.name || 'the field', " directly.")) : void 0;
+        didWarnAboutDeprecation[field] = true;
+      }
+
+      return Component;
+    }
+  });
+}
+
+exports.deprecateFieldOnObject = deprecateFieldOnObject;

package/lib/internal/environment.js

@@ -0,0 +1,19 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * Indicate whether current execution environment can access the DOM.
+ *
+ * @see https://github.com/facebook/fbjs/blob/4d1751311d3f67af2dcce2e40df8512a23c7b9c6/packages/fbjs/src/core/ExecutionEnvironment.js#L12
+ */
+var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+
+exports.canUseDOM = canUseDOM;

package/lib/internal/focus/index.js

@@ -0,0 +1,20 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function focus(elementOrRef) {
+  var element = elementOrRef.current || elementOrRef;
+
+  if (element && element.focus && document.activeElement !== element) {
+    element.focus();
+  }
+}
+
+exports.focus = focus;

package/lib/internal/keyboard/keys.js

@@ -0,0 +1,79 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Tab = {
+  key: 'Tab',
+  which: 9,
+  keyCode: 9
+};
+var Enter = {
+  key: 'Enter',
+  which: 13,
+  keyCode: 13
+};
+var Escape = {
+  key: ['Escape', // IE11 Escape
+  'Esc'],
+  which: 27,
+  keyCode: 27
+};
+var Space = {
+  key: ' ',
+  which: 32,
+  keyCode: 32
+};
+var End = {
+  key: 'End',
+  which: 35,
+  keyCode: 35
+};
+var Home = {
+  key: 'Home',
+  which: 36,
+  keyCode: 36
+};
+var ArrowLeft = {
+  key: 'ArrowLeft',
+  which: 37,
+  keyCode: 37
+};
+var ArrowUp = {
+  key: 'ArrowUp',
+  which: 38,
+  keyCode: 38
+};
+var ArrowRight = {
+  key: 'ArrowRight',
+  which: 39,
+  keyCode: 39
+};
+var ArrowDown = {
+  key: 'ArrowDown',
+  which: 40,
+  keyCode: 40
+};
+var Delete = {
+  key: 'Delete',
+  which: 8 ,
+  keyCode: 8 
+};
+
+exports.ArrowDown = ArrowDown;
+exports.ArrowLeft = ArrowLeft;
+exports.ArrowRight = ArrowRight;
+exports.ArrowUp = ArrowUp;
+exports.Delete = Delete;
+exports.End = End;
+exports.Enter = Enter;
+exports.Escape = Escape;
+exports.Home = Home;
+exports.Space = Space;
+exports.Tab = Tab;

package/lib/internal/keyboard/match.js

@@ -0,0 +1,87 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * @typedef Key
+ * @property key {Array<string>|string}
+ * @property which {number}
+ * @property keyCode {number}
+ */
+
+/**
+ * Check to see if at least one key code matches the key code of the
+ * given event.
+ *
+ * @example
+ * import * as keys from '../keys';
+ * import { matches } from '../match';
+ *
+ * function handleOnKeyDown(event) {
+ *   if (matches(event, [keys.Enter, keys.Space]) {
+ *     // ...
+ *   }
+ * }
+ *
+ * @param {Event} event
+ * @param {Array<Key>} keysToMatch
+ * @returns {boolean}
+ */
+function matches(event, keysToMatch) {
+  for (var i = 0; i < keysToMatch.length; i++) {
+    if (match(event, keysToMatch[i])) {
+      return true;
+    }
+  }
+
+  return false;
+}
+/**
+ * Check to see if the given key matches the corresponding keyboard event. Also
+ * supports passing in the value directly if you can't used the given event.
+ *
+ * @example
+ * import * as keys from '../keys';
+ * import { matches } from '../match';
+ *
+ * function handleOnKeyDown(event) {
+ *   if (match(event, keys.Enter) {
+ *     // ...
+ *   }
+ * }
+ *
+ * @param {Event|number|string} eventOrCode
+ * @param {Key} key
+ * @returns {boolean}
+ */
+
+function match(eventOrCode) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      key = _ref.key,
+      which = _ref.which,
+      keyCode = _ref.keyCode;
+
+  if (typeof eventOrCode === 'string') {
+    return eventOrCode === key;
+  }
+
+  if (typeof eventOrCode === 'number') {
+    return eventOrCode === which || eventOrCode === keyCode;
+  }
+
+  if (eventOrCode.key && Array.isArray(key)) {
+    return key.indexOf(eventOrCode.key) !== -1;
+  }
+
+  return eventOrCode.key === key || eventOrCode.which === which || eventOrCode.keyCode === keyCode;
+}
+
+exports.match = match;
+exports.matches = matches;

package/lib/internal/keyboard/navigation.js

@@ -0,0 +1,69 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var keys = require('./keys.js');
+var match = require('./match.js');
+
+/**
+ * Various utilities to help with a11y work
+ */
+
+/**
+ * A "ring buffer" function that takes an array and depending on an ArrowRight
+ * or ArrowLeft key input loops from last index to first or first index to last.
+ *
+ * @param {string} key - the left or right arrow keys
+ * @param {number} index - the current index in a given array
+ * @param {number} arrayLength - the total length of the array
+ *
+ * @example
+ * 	getNextIndex(keyCodes.RIGHT, 0, 4)
+ */
+
+var getNextIndex = function getNextIndex(key, index, arrayLength) {
+  if (match.match(key, keys.ArrowRight)) {
+    return (index + 1) % arrayLength;
+  }
+
+  if (match.match(key, keys.ArrowLeft)) {
+    return (index + arrayLength - 1) % arrayLength;
+  }
+};
+/**
+ * A flag `node.compareDocumentPosition(target)` returns,
+ * that indicates `target` is located earlier than `node` in the document or `target` contains `node`.
+ */
+
+var DOCUMENT_POSITION_BROAD_PRECEDING = // Checks `typeof Node` for `react-docgen`
+typeof Node !== 'undefined' && Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS;
+/**
+ * A flag `node.compareDocumentPosition(target)` returns,
+ * that indicates `target` is located later than `node` in the document or `node` contains `target`.
+ */
+
+var DOCUMENT_POSITION_BROAD_FOLLOWING = // Checks `typeof Node` for `react-docgen`
+typeof Node !== 'undefined' && Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY;
+/**
+ * CSS selector that selects major nodes that are sequential-focusable.
+ */
+
+var selectorTabbable = "\n  a[href], area[href], input:not([disabled]):not([tabindex='-1']),\n  button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),\n  textarea:not([disabled]):not([tabindex='-1']),\n  iframe, object, embed, *[tabindex]:not([tabindex='-1']):not([disabled]), *[contenteditable=true]\n";
+/**
+ * CSS selector that selects major nodes that are click focusable
+ */
+
+var selectorFocusable = "\n  a[href], area[href], input:not([disabled]),\n  button:not([disabled]),select:not([disabled]),\n  textarea:not([disabled]),\n  iframe, object, embed, *[tabindex]:not([disabled]), *[contenteditable=true]\n";
+
+exports.DOCUMENT_POSITION_BROAD_FOLLOWING = DOCUMENT_POSITION_BROAD_FOLLOWING;
+exports.DOCUMENT_POSITION_BROAD_PRECEDING = DOCUMENT_POSITION_BROAD_PRECEDING;
+exports.getNextIndex = getNextIndex;
+exports.selectorFocusable = selectorFocusable;
+exports.selectorTabbable = selectorTabbable;

package/lib/internal/useControllableState.js

@@ -0,0 +1,90 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var warning = require('./warning.js');
+
+/**
+ * This custom hook simplifies the behavior of a component if it has state that
+ * can be both controlled and uncontrolled. It functions identical to a
+ * useState() hook and provides [state, setState] for you to use. You can use
+ * the `onChange` argument to allow updates to the `state` to be communicated to
+ * owners of controlled components.
+ *
+ * Note: this hook will warn if a component is switching from controlled to
+ * uncontrolled, or vice-verse.
+ *
+ * @param {object} config
+ * @param {string} config.name - the name of the custom component
+ * @param {any} config.defaultValue - the default value used for the state. This will be
+ * the fallback value used if `value` is not defined.
+ * @param {Function} config.onChange - an optional function that is called when
+ * the value of the state changes. This is useful for communicating to parents of
+ * controlled components that the value is requesting to be changed.
+ * @param {any} config.value - a controlled value. Omitting this means that the state is
+ * uncontrolled
+ * @returns {[any, Function]}
+ */
+
+function useControllableState(_ref) {
+  var defaultValue = _ref.defaultValue,
+      _ref$name = _ref.name,
+      name = _ref$name === void 0 ? 'custom' : _ref$name,
+      onChange = _ref.onChange,
+      value = _ref.value;
+
+  var _useState = React.useState(value !== null && value !== void 0 ? value : defaultValue),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      state = _useState2[0],
+      internalSetState = _useState2[1];
+
+  var controlled = React.useRef(null);
+
+  if (controlled.current === null) {
+    controlled.current = value !== undefined;
+  }
+
+  function setState(stateOrUpdater) {
+    var value = typeof stateOrUpdater === 'function' ? stateOrUpdater(state) : stateOrUpdater;
+
+    if (controlled.current === false) {
+      internalSetState(value);
+    }
+
+    if (onChange) {
+      onChange(value);
+    }
+  }
+
+  React.useEffect(function () {
+    var controlledValue = value !== undefined; // Uncontrolled -> Controlled
+    // If the component prop is uncontrolled, the prop value should be undefined
+
+    if (controlled.current === false && controlledValue) {
+      process.env.NODE_ENV !== "production" ? warning.warning(false, 'A component is changing an uncontrolled %s component to be controlled. ' + 'This is likely caused by the value changing to a defined value ' + 'from undefined. Decide between using a controlled or uncontrolled ' + 'value for the lifetime of the component. ' + 'More info: https://reactjs.org/link/controlled-components', name) : void 0;
+    } // Controlled -> Uncontrolled
+    // If the component prop is controlled, the prop value should be defined
+
+
+    if (controlled.current === true && !controlledValue) {
+      process.env.NODE_ENV !== "production" ? warning.warning(false, 'A component is changing a controlled %s component to be uncontrolled. ' + 'This is likely caused by the value changing to an undefined value ' + 'from a defined one. Decide between using a controlled or ' + 'uncontrolled value for the lifetime of the component. ' + 'More info: https://reactjs.org/link/controlled-components', name) : void 0;
+    }
+  }, [name, value]);
+
+  if (controlled.current === true) {
+    return [value, setState];
+  }
+
+  return [state, setState];
+}
+
+exports.useControllableState = useControllableState;