@carbon/react 0.17.0-rc.0 → 1.0.0

package/es/components/FeatureFlags/index.js

@@ -0,0 +1,169 @@
+/**
+ * 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.
+ */
+
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { createScope, FeatureFlags as FeatureFlags$1 } from '@carbon/feature-flags';
+import PropTypes from 'prop-types';
+import React__default, { useContext, useState, useRef, useEffect, createContext } from 'react';
+
+/**
+ * Our FeatureFlagContext is used alongside the FeatureFlags component to enable
+ * or disable feature flags in a given React tree
+ */
+
+var FeatureFlagContext = /*#__PURE__*/createContext(FeatureFlags$1);
+/**
+ * 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 = useContext(FeatureFlagContext);
+
+  var _useState = useState(parentScope),
+      _useState2 = _slicedToArray(_useState, 2),
+      prevParentScope = _useState2[0],
+      setPrevParentScope = _useState2[1];
+
+  var _useState3 = useState(function () {
+    var scope = createScope(flags);
+    scope.mergeWithScope(parentScope);
+    return scope;
+  }),
+      _useState4 = _slicedToArray(_useState3, 2),
+      scope = _useState4[0],
+      updateScope = _useState4[1];
+
+  if (parentScope !== prevParentScope) {
+    var _scope = 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 = createScope(changedFlags);
+    scope.mergeWithScope(parentScope);
+    updateScope(scope);
+  });
+  return /*#__PURE__*/React__default.createElement(FeatureFlagContext.Provider, {
+    value: scope
+  }, children);
+}
+
+FeatureFlags.propTypes = {
+  children: PropTypes.node,
+
+  /**
+   * Provide the feature flags to enabled or disabled in the current React tree
+   */
+  flags: PropTypes.objectOf(PropTypes.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 = useRef(false);
+  var savedCallback = useRef(callback);
+
+  var _useState5 = useState(value),
+      _useState6 = _slicedToArray(_useState5, 2),
+      prevValue = _useState6[0],
+      setPrevValue = _useState6[1];
+
+  if (!compare(prevValue, value)) {
+    setPrevValue(value);
+  }
+
+  useEffect(function () {
+    savedCallback.current = callback;
+  });
+  useEffect(function () {
+    // We only want the callback triggered after the first render
+    if (initialRender.current) {
+      savedCallback.current(prevValue);
+    }
+  }, [prevValue]);
+  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 = useContext(FeatureFlagContext);
+  return scope.enabled(flag);
+}
+/**
+ * Access all feature flag information for the given FeatureFlagContext
+ *
+ * @returns {FeatureFlagScope}
+ */
+
+
+function useFeatureFlags() {
+  return 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;
+}
+
+export { FeatureFlagContext, FeatureFlags, useFeatureFlag, useFeatureFlags };

package/es/components/FileUploader/FileUploader.Skeleton.js

@@ -0,0 +1,43 @@
+/**
+ * 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.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import SkeletonText from '../SkeletonText/SkeletonText.js';
+import ButtonSkeleton from '../Button/Button.Skeleton.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _SkeletonText, _ButtonSkeleton;
+
+var _excluded = ["className"];
+
+function FileUploaderSkeleton(_ref) {
+  var className = _ref.className,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: cx("".concat(prefix, "--form-item"), className)
+  }, rest), _SkeletonText || (_SkeletonText = /*#__PURE__*/React__default.createElement(SkeletonText, {
+    heading: true,
+    width: "100px"
+  })), /*#__PURE__*/React__default.createElement(SkeletonText, {
+    width: "225px",
+    className: "".concat(prefix, "--label-description")
+  }), _ButtonSkeleton || (_ButtonSkeleton = /*#__PURE__*/React__default.createElement(ButtonSkeleton, null)));
+}
+
+FileUploaderSkeleton.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes.string
+};
+
+export { FileUploaderSkeleton as default };

package/es/components/FileUploader/FileUploader.js

@@ -0,0 +1,284 @@
+/**
+ * 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.
+ */
+
+import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, createClass as _createClass, objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import * as FeatureFlags from '@carbon/feature-flags';
+import React__default from 'react';
+import Filename from './Filename.js';
+import FileUploaderButton from './FileUploaderButton.js';
+import { ButtonKinds } from '../../prop-types/types.js';
+import { PrefixContext } from '../../internal/usePrefix.js';
+import { matches } from '../../internal/keyboard/match.js';
+import { Enter, Space } from '../../internal/keyboard/keys.js';
+
+var _excluded = ["iconDescription", "buttonLabel", "buttonKind", "disabled", "filenameStatus", "labelDescription", "labelTitle", "className", "multiple", "accept", "name", "size", "onDelete"];
+
+var FileUploader = /*#__PURE__*/function (_React$Component) {
+  _inherits(FileUploader, _React$Component);
+
+  var _super = _createSuper(FileUploader);
+
+  function FileUploader() {
+    var _this;
+
+    _classCallCheck(this, FileUploader);
+
+    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));
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      filenames: []
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "nodes", []);
+
+    _defineProperty(_assertThisInitialized(_this), "handleChange", function (evt) {
+      evt.stopPropagation();
+      var filenames = Array.prototype.map.call(evt.target.files, function (file) {
+        return file.name;
+      });
+
+      _this.setState({
+        filenames: _this.props.multiple ? _this.state.filenames.concat(filenames) : filenames
+      });
+
+      if (_this.props.onChange) {
+        _this.props.onChange(evt);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleClick", function (evt, _ref) {
+      var index = _ref.index,
+          filenameStatus = _ref.filenameStatus;
+
+      if (filenameStatus === 'edit') {
+        evt.stopPropagation();
+
+        var filteredArray = _this.state.filenames.filter(function (filename) {
+          return filename !== _this.nodes[index].innerText.trim();
+        });
+
+        _this.setState({
+          filenames: filteredArray
+        });
+
+        if (_this.props.onDelete) {
+          _this.props.onDelete(evt);
+        }
+
+        _this.props.onClick(evt);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "clearFiles", function () {
+      // A clearFiles function that resets filenames and can be referenced using a ref by the parent.
+      _this.setState({
+        filenames: []
+      });
+    });
+
+    return _this;
+  }
+
+  _createClass(FileUploader, [{
+    key: "render",
+    value: function render() {
+      var _classNames,
+          _classNames3,
+          _this2 = this;
+
+      var _this$props = this.props,
+          iconDescription = _this$props.iconDescription,
+          buttonLabel = _this$props.buttonLabel,
+          buttonKind = _this$props.buttonKind,
+          disabled = _this$props.disabled,
+          filenameStatus = _this$props.filenameStatus,
+          labelDescription = _this$props.labelDescription,
+          labelTitle = _this$props.labelTitle,
+          className = _this$props.className,
+          multiple = _this$props.multiple,
+          accept = _this$props.accept,
+          name = _this$props.name,
+          _this$props$size = _this$props.size,
+          size = _this$props$size === void 0 ? 'md' : _this$props$size;
+          _this$props.onDelete;
+          var other = _objectWithoutProperties(_this$props, _excluded);
+
+      var prefix = this.context;
+      var classes = cx((_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--form-item"), true), _defineProperty(_classNames, className, className), _classNames));
+
+      var getHelperLabelClasses = function getHelperLabelClasses(baseClass) {
+        return cx(baseClass, _defineProperty({}, "".concat(prefix, "--label-description--disabled"), disabled));
+      };
+
+      var selectedFileClasses = cx("".concat(prefix, "--file__selected-file"), (_classNames3 = {}, _defineProperty(_classNames3, "".concat(prefix, "--file__selected-file--md"), size === 'field' || size === 'md'), _defineProperty(_classNames3, "".concat(prefix, "--file__selected-file--sm"), size === 'small' || size === 'sm'), _classNames3));
+      return /*#__PURE__*/React__default.createElement("div", _extends({
+        className: classes
+      }, other), FeatureFlags.enabled('enable-v11-release') && !labelTitle ? null : /*#__PURE__*/React__default.createElement("p", {
+        className: getHelperLabelClasses("".concat(prefix, "--file--label"))
+      }, labelTitle), /*#__PURE__*/React__default.createElement("p", {
+        className: getHelperLabelClasses("".concat(prefix, "--label-description"))
+      }, labelDescription), /*#__PURE__*/React__default.createElement(FileUploaderButton, {
+        disabled: disabled,
+        labelText: buttonLabel,
+        multiple: multiple,
+        buttonKind: buttonKind,
+        onChange: this.handleChange,
+        disableLabelChanges: true,
+        accept: accept,
+        name: name,
+        size: size
+      }), /*#__PURE__*/React__default.createElement("div", {
+        className: "".concat(prefix, "--file-container")
+      }, this.state.filenames.length === 0 ? null : this.state.filenames.map(function (name, index) {
+        return /*#__PURE__*/React__default.createElement("span", _extends({
+          key: index,
+          className: selectedFileClasses,
+          ref: function ref(node) {
+            return _this2.nodes[index] = node;
+          } // eslint-disable-line
+
+        }, other), /*#__PURE__*/React__default.createElement("p", {
+          className: "".concat(prefix, "--file-filename")
+        }, name), /*#__PURE__*/React__default.createElement("span", {
+          className: "".concat(prefix, "--file__state-container")
+        }, /*#__PURE__*/React__default.createElement(Filename, {
+          iconDescription: iconDescription,
+          status: filenameStatus,
+          onKeyDown: function onKeyDown(evt) {
+            if (matches(evt, [Enter, Space])) {
+              _this2.handleClick(evt, {
+                index: index,
+                filenameStatus: filenameStatus
+              });
+            }
+          },
+          onClick: function onClick(evt) {
+            return _this2.handleClick(evt, {
+              index: index,
+              filenameStatus: filenameStatus
+            });
+          }
+        })));
+      })));
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(_ref2, state) {
+      var filenameStatus = _ref2.filenameStatus;
+      var prevFilenameStatus = state.prevFilenameStatus;
+      return prevFilenameStatus === filenameStatus ? null : {
+        filenameStatus: filenameStatus,
+        prevFilenameStatus: filenameStatus
+      };
+    }
+  }]);
+
+  return FileUploader;
+}(React__default.Component);
+
+_defineProperty(FileUploader, "propTypes", {
+  /**
+   * Specify the types of files that this input should be able to receive
+   */
+  accept: PropTypes.arrayOf(PropTypes.string),
+
+  /**
+   * Specify the type of the <FileUploaderButton>
+   */
+  buttonKind: PropTypes.oneOf(ButtonKinds),
+
+  /**
+   * Provide the label text to be read by screen readers when interacting with
+   * the <FileUploaderButton>
+   */
+  buttonLabel: PropTypes.string,
+
+  /**
+   * Provide a custom className to be applied to the container node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether file input is disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Specify the status of the File Upload
+   */
+  filenameStatus: PropTypes.oneOf(['edit', 'complete', 'uploading']).isRequired,
+
+  /**
+   * Provide a description for the complete/close icon that can be read by screen readers
+   */
+  iconDescription: FeatureFlags.enabled('enable-v11-release') ? PropTypes.string.isRequired : PropTypes.string,
+
+  /**
+   * Specify the description text of this <FileUploader>
+   */
+  labelDescription: PropTypes.string,
+
+  /**
+   * Specify the title text of this <FileUploader>
+   */
+  labelTitle: PropTypes.string,
+
+  /**
+   * Specify if the component should accept multiple files to upload
+   */
+  multiple: PropTypes.bool,
+
+  /**
+   * Provide a name for the underlying `<input>` node
+   */
+  name: PropTypes.string,
+
+  /**
+   * Provide an optional `onChange` hook that is called each time the input is
+   * changed
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Provide an optional `onClick` hook that is called each time the
+   * FileUploader is clicked
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Provide an optional `onDelete` hook that is called when an uploaded item
+   * is removed
+   */
+  onDelete: PropTypes.func,
+
+  /**
+   * Specify the size of the FileUploaderButton, from a list of available
+   * sizes.
+   */
+  size: FeatureFlags.enabled('enable-v11-release') ? PropTypes.oneOf(['sm', 'md', 'lg']) : PropTypes.oneOf(['default', 'field', 'small', 'sm', 'md', 'lg'])
+});
+
+_defineProperty(FileUploader, "contextType", PrefixContext);
+
+_defineProperty(FileUploader, "defaultProps", {
+  disabled: false,
+  iconDescription: FeatureFlags.enabled('enable-v11-release') ? undefined : 'Provide icon description',
+  filenameStatus: 'uploading',
+  buttonLabel: '',
+  buttonKind: 'primary',
+  multiple: false,
+  onClick: function onClick() {},
+  accept: []
+});
+
+export { FileUploader as default };

package/es/components/FileUploader/FileUploaderButton.js

@@ -0,0 +1,198 @@
+/**
+ * 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.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React__default, { useState, useRef } from 'react';
+import { ButtonKinds } from '../../prop-types/types.js';
+import uniqueId from '../../tools/uniqueId.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+import * as FeatureFlags from '@carbon/feature-flags';
+import { matches } from '../../internal/keyboard/match.js';
+import { Enter, Space } from '../../internal/keyboard/keys.js';
+
+var _excluded = ["accept", "buttonKind", "className", "disabled", "disableLabelChanges", "id", "labelText", "multiple", "onChange", "role", "name", "size", "tabIndex"];
+
+function noop() {}
+
+function FileUploaderButton(_ref) {
+  var _cx;
+
+  var accept = _ref.accept,
+      _ref$buttonKind = _ref.buttonKind,
+      buttonKind = _ref$buttonKind === void 0 ? 'primary' : _ref$buttonKind,
+      className = _ref.className,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$disableLabelChan = _ref.disableLabelChanges,
+      disableLabelChanges = _ref$disableLabelChan === void 0 ? false : _ref$disableLabelChan,
+      id = _ref.id,
+      _ref$labelText = _ref.labelText,
+      ownerLabelText = _ref$labelText === void 0 ? 'Add file' : _ref$labelText,
+      _ref$multiple = _ref.multiple,
+      multiple = _ref$multiple === void 0 ? false : _ref$multiple,
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? noop : _ref$onChange,
+      _ref$role = _ref.role,
+      role = _ref$role === void 0 ? 'button' : _ref$role,
+      name = _ref.name,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'md' : _ref$size,
+      _ref$tabIndex = _ref.tabIndex,
+      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
+      other = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+
+  var _useState = useState(ownerLabelText),
+      _useState2 = _slicedToArray(_useState, 2),
+      labelText = _useState2[0],
+      setLabelText = _useState2[1];
+
+  var _useState3 = useState(ownerLabelText),
+      _useState4 = _slicedToArray(_useState3, 2),
+      prevOwnerLabelText = _useState4[0],
+      setPrevOwnerLabelText = _useState4[1];
+
+  var _useRef = useRef(id || uniqueId()),
+      inputId = _useRef.current;
+
+  var inputNode = useRef(null);
+  var classes = cx("".concat(prefix, "--btn"), className, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--btn--").concat(buttonKind), buttonKind), _defineProperty(_cx, "".concat(prefix, "--btn--disabled"), disabled), _defineProperty(_cx, "".concat(prefix, "--btn--md"), size === 'field' || size === 'md'), _defineProperty(_cx, "".concat(prefix, "--btn--sm"), size === 'small' || size === 'sm'), _cx)); // Adjust label text state based on changes to the labelText prop
+
+  if (ownerLabelText !== prevOwnerLabelText) {
+    setLabelText(ownerLabelText);
+    setPrevOwnerLabelText(ownerLabelText);
+  }
+
+  function onClick(event) {
+    event.target.value = null;
+  }
+
+  function onKeyDown(event) {
+    if (matches(event, [Enter, Space])) {
+      inputNode.current.click();
+    }
+  }
+
+  function handleOnChange(event) {
+    var files = event.target.files;
+    var length = event.target.files.length;
+
+    if (files && !disableLabelChanges) {
+      if (length > 1) {
+        setLabelText("".concat(length, " files"));
+      } else if (length === 1) {
+        setLabelText(files[0].name);
+      }
+    }
+
+    onChange(event);
+  }
+
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("label", _extends({
+    tabIndex: disabled ? -1 : tabIndex || 0,
+    className: classes,
+    onKeyDown: onKeyDown,
+    htmlFor: inputId
+  }, other), /*#__PURE__*/React__default.createElement("span", {
+    role: role,
+    "aria-disabled": disabled
+  }, labelText)), /*#__PURE__*/React__default.createElement("input", {
+    className: "".concat(prefix, "--visually-hidden"),
+    ref: inputNode,
+    id: inputId,
+    disabled: disabled,
+    type: "file",
+    tabIndex: "-1",
+    multiple: multiple,
+    accept: accept,
+    name: name,
+    onChange: handleOnChange,
+    onClick: onClick
+  }));
+}
+
+FileUploaderButton.propTypes = {
+  /**
+   * Specify the types of files that this input should be able to receive
+   */
+  accept: PropTypes.arrayOf(PropTypes.string),
+
+  /**
+   * Specify the type of underlying button
+   */
+  buttonKind: PropTypes.oneOf(ButtonKinds),
+
+  /**
+   * Provide a custom className to be applied to the container node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether you want to disable any updates to the FileUploaderButton
+   * label
+   */
+  disableLabelChanges: PropTypes.bool,
+
+  /**
+   * Specify whether file input is disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Provide a unique id for the underlying <input> node
+   */
+  id: PropTypes.string,
+
+  /**
+   * Provide the label text to be read by screen readers when interacting with
+   * this control
+   */
+  labelText: PropTypes.node,
+
+  /**
+   * Specify if the component should accept multiple files to upload
+   */
+  multiple: PropTypes.bool,
+
+  /**
+   * Provide a name for the underlying <input> node
+   */
+  name: PropTypes.string,
+
+  /**
+   * Provide an optional `onChange` hook that is called each time the <input>
+   * value changes
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Provide an optional `onClick` hook that is called each time the button is
+   * clicked
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Provide an accessibility role for the <FileUploaderButton>
+   */
+  role: PropTypes.string,
+
+  /**
+   * Specify the size of the FileUploaderButton, from a list of available
+   * sizes.
+   */
+  size: FeatureFlags.enabled('enable-v11-release') ? PropTypes.oneOf(['sm', 'md', 'lg']) : PropTypes.oneOf(['default', 'field', 'small', 'sm', 'md', 'lg']),
+
+  /**
+   * Provide a custom tabIndex value for the <FileUploaderButton>
+   */
+  tabIndex: PropTypes.number
+};
+
+export { FileUploaderButton as default };