@carbon/react 0.17.0-rc.0 → 1.0.0

package/lib/components/ErrorBoundary/ErrorBoundary.js

@@ -0,0 +1,105 @@
+/**
+ * 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 ErrorBoundaryContext = require('./ErrorBoundaryContext.js');
+
+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);
+
+/**
+ * React introduced additional lifecycle methods in v16 for capturing errors
+ * that occur in a specific sub-tree of components. This component helps to
+ * consolidate some of the duplication that occurs when using these lifecycle
+ * methods across a codebase. In addition, it allows you to specify the fallback
+ * UI to display when an error occurs in the sub-tree through the `fallback`
+ * prop.
+ *
+ * This component roughly follows the React.js docs example code for these
+ * methods. In addition, it takes advantage of an `ErrorBoundaryContext` so that
+ * consumers can specify their own logic for logging errors. For example,
+ * reporting an error in the UI to an external service for every `ErrorBoundary`
+ * used.
+ *
+ * Reference:
+ * https://reactjs.org/docs/error-boundaries.html#introducing-error-boundaries
+ */
+
+var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  _rollupPluginBabelHelpers.inherits(ErrorBoundary, _React$Component);
+
+  var _super = _rollupPluginBabelHelpers.createSuper(ErrorBoundary);
+
+  function ErrorBoundary() {
+    var _this;
+
+    _rollupPluginBabelHelpers.classCallCheck(this, ErrorBoundary);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "state", {
+      hasError: false
+    });
+
+    return _this;
+  }
+
+  _rollupPluginBabelHelpers.createClass(ErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error, info) {
+      this.context.log(error, info);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.children !== this.props.children) {
+        this.setState({
+          hasError: false
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      if (this.state.hasError) {
+        return this.props.fallback;
+      }
+
+      return this.props.children;
+    }
+  }], [{
+    key: "getDerivedStateFromError",
+    value: function getDerivedStateFromError() {
+      return {
+        hasError: true
+      };
+    }
+  }]);
+
+  return ErrorBoundary;
+}(React__default["default"].Component);
+
+_rollupPluginBabelHelpers.defineProperty(ErrorBoundary, "propTypes", {
+  children: PropTypes__default["default"].node,
+  fallback: PropTypes__default["default"].node
+});
+
+_rollupPluginBabelHelpers.defineProperty(ErrorBoundary, "contextType", ErrorBoundaryContext.ErrorBoundaryContext);
+
+exports["default"] = ErrorBoundary;

package/lib/components/ErrorBoundary/ErrorBoundaryContext.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 });
+
+var React = require('react');
+
+var ErrorBoundaryContext = /*#__PURE__*/React.createContext({
+  log: function log(error, info) {
+    console.log(info.componentStack);
+  }
+});
+
+exports.ErrorBoundaryContext = ErrorBoundaryContext;

package/lib/components/ExpandableSearch/ExpandableSearch.js

@@ -0,0 +1,70 @@
+/**
+ * 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 cx = require('classnames');
+var index = require('../Search/index.js');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+function ExpandableSearch(props) {
+  var _useState = React.useState(false),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      expanded = _useState2[0],
+      setExpanded = _useState2[1];
+
+  var _useState3 = React.useState(false),
+      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+      hasContent = _useState4[0],
+      setHasContent = _useState4[1];
+
+  var searchRef = React.useRef(null);
+  var prefix = usePrefix.usePrefix();
+
+  function handleFocus() {
+    if (!expanded) {
+      setExpanded(true);
+    }
+  }
+
+  function handleBlur(evt) {
+    var relatedTargetIsAllowed = evt.relatedTarget && evt.relatedTarget.classList.contains("".concat(prefix, "--search-close"));
+
+    if (expanded && !relatedTargetIsAllowed && !hasContent) {
+      setExpanded(false);
+    }
+  }
+
+  var classes = cx__default["default"]("".concat(prefix, "--search--expandable"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--search--expanded"), expanded), props.className);
+  return /*#__PURE__*/React__default["default"].createElement(index["default"], _rollupPluginBabelHelpers["extends"]({}, props, {
+    ref: searchRef,
+    className: classes,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onChange: function onChange(event) {
+      setHasContent(event.target.value !== '');
+    },
+    onExpand: function onExpand() {
+      var _searchRef$current$fo, _searchRef$current;
+
+      (_searchRef$current$fo = (_searchRef$current = searchRef.current).focus) === null || _searchRef$current$fo === void 0 ? void 0 : _searchRef$current$fo.call(_searchRef$current);
+    }
+  }));
+}
+
+ExpandableSearch.propTypes = index["default"].propTypes;
+
+exports["default"] = ExpandableSearch;

package/lib/components/ExpandableSearch/index.js

@@ -0,0 +1,16 @@
+/**
+ * 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 ExpandableSearch = require('./ExpandableSearch.js');
+
+
+
+exports["default"] = ExpandableSearch["default"];

package/lib/components/FeatureFlags/index.js

@@ -0,0 +1,181 @@
+/**
+ * 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 FeatureFlags$1 = require('@carbon/feature-flags');
+var PropTypes = require('prop-types');
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * Our FeatureFlagContext is used alongside the FeatureFlags component to enable
+ * or disable feature flags in a given React tree
+ */
+
+var FeatureFlagContext = /*#__PURE__*/React.createContext(FeatureFlags$1.FeatureFlags);
+/**
+ * Supports an object of feature flag values with the `flags` prop, merging them
+ * along with the current `FeatureFlagContext` to provide consumers to check if
+ * a feature flag is enabled or disabled in a given React tree
+ */
+
+function FeatureFlags(_ref) {
+  var children = _ref.children,
+      _ref$flags = _ref.flags,
+      flags = _ref$flags === void 0 ? {} : _ref$flags;
+  var parentScope = React.useContext(FeatureFlagContext);
+
+  var _useState = React.useState(parentScope),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      prevParentScope = _useState2[0],
+      setPrevParentScope = _useState2[1];
+
+  var _useState3 = React.useState(function () {
+    var scope = FeatureFlags$1.createScope(flags);
+    scope.mergeWithScope(parentScope);
+    return scope;
+  }),
+      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+      scope = _useState4[0],
+      updateScope = _useState4[1];
+
+  if (parentScope !== prevParentScope) {
+    var _scope = FeatureFlags$1.createScope(flags);
+
+    _scope.mergeWithScope(parentScope);
+
+    updateScope(_scope);
+    setPrevParentScope(parentScope);
+  } // We use a custom hook to detect if any of the keys or their values change
+  // for flags that are passed in. If they have changed, then we re-create the
+  // FeatureFlagScope using the new flags
+
+
+  useChangedValue(flags, isEqual, function (changedFlags) {
+    var scope = FeatureFlags$1.createScope(changedFlags);
+    scope.mergeWithScope(parentScope);
+    updateScope(scope);
+  });
+  return /*#__PURE__*/React__default["default"].createElement(FeatureFlagContext.Provider, {
+    value: scope
+  }, children);
+}
+
+FeatureFlags.propTypes = {
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Provide the feature flags to enabled or disabled in the current React tree
+   */
+  flags: PropTypes__default["default"].objectOf(PropTypes__default["default"].bool)
+};
+/**
+ * This hook will store previous versions of the given `value` and compare the
+ * current value to the previous one using the `compare` function. If the
+ * compare function returns true, then the given `callback` is invoked in an
+ * effect.
+ *
+ * @param {any} value
+ * @param {Function} compare
+ * @param {Function} callback
+ */
+
+function useChangedValue(value, compare, callback) {
+  var initialRender = React.useRef(false);
+  var savedCallback = React.useRef(callback);
+
+  var _useState5 = React.useState(value),
+      _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
+      prevValue = _useState6[0],
+      setPrevValue = _useState6[1];
+
+  if (!compare(prevValue, value)) {
+    setPrevValue(value);
+  }
+
+  React.useEffect(function () {
+    savedCallback.current = callback;
+  });
+  React.useEffect(function () {
+    // We only want the callback triggered after the first render
+    if (initialRender.current) {
+      savedCallback.current(prevValue);
+    }
+  }, [prevValue]);
+  React.useEffect(function () {
+    initialRender.current = true;
+  }, []);
+}
+/**
+ * Access whether a given flag is enabled or disabled in a given
+ * FeatureFlagContext
+ *
+ * @returns {boolean}
+ */
+
+
+function useFeatureFlag(flag) {
+  var scope = React.useContext(FeatureFlagContext);
+  return scope.enabled(flag);
+}
+/**
+ * Access all feature flag information for the given FeatureFlagContext
+ *
+ * @returns {FeatureFlagScope}
+ */
+
+
+function useFeatureFlags() {
+  return React.useContext(FeatureFlagContext);
+}
+/**
+ * Compare two objects and determine if they are equal. This is a shallow
+ * comparison since the objects we are comparing are objects with boolean flags
+ * from the flags prop in the `FeatureFlags` component
+ *
+ * @param {object} a
+ * @param {object} b
+ * @returns {boolean}
+ */
+
+
+function isEqual(a, b) {
+  if (a === b) {
+    return true;
+  }
+
+  for (var _i = 0, _Object$keys = Object.keys(a); _i < _Object$keys.length; _i++) {
+    var key = _Object$keys[_i];
+
+    if (a[key] !== b[key]) {
+      return false;
+    }
+  }
+
+  for (var _i2 = 0, _Object$keys2 = Object.keys(b); _i2 < _Object$keys2.length; _i2++) {
+    var _key = _Object$keys2[_i2];
+
+    if (b[_key] !== a[_key]) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+exports.FeatureFlagContext = FeatureFlagContext;
+exports.FeatureFlags = FeatureFlags;
+exports.useFeatureFlag = useFeatureFlag;
+exports.useFeatureFlags = useFeatureFlags;

package/lib/components/FileUploader/FileUploader.Skeleton.js

@@ -0,0 +1,53 @@
+/**
+ * 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 PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var SkeletonText = require('../SkeletonText/SkeletonText.js');
+var Button_Skeleton = require('../Button/Button.Skeleton.js');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var _SkeletonText, _ButtonSkeleton;
+
+var _excluded = ["className"];
+
+function FileUploaderSkeleton(_ref) {
+  var className = _ref.className,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: cx__default["default"]("".concat(prefix, "--form-item"), className)
+  }, rest), _SkeletonText || (_SkeletonText = /*#__PURE__*/React__default["default"].createElement(SkeletonText["default"], {
+    heading: true,
+    width: "100px"
+  })), /*#__PURE__*/React__default["default"].createElement(SkeletonText["default"], {
+    width: "225px",
+    className: "".concat(prefix, "--label-description")
+  }), _ButtonSkeleton || (_ButtonSkeleton = /*#__PURE__*/React__default["default"].createElement(Button_Skeleton["default"], null)));
+}
+
+FileUploaderSkeleton.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes__default["default"].string
+};
+
+exports["default"] = FileUploaderSkeleton;