@carbon/react 0.17.0 → 1.0.0-rc.0

package/lib/components/FileUploader/FileUploaderDropContainer.js

@@ -0,0 +1,233 @@
+/**
+ * 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 cx = require('classnames');
+var uniqueId = require('../../tools/uniqueId.js');
+var usePrefix = require('../../internal/usePrefix.js');
+var match = require('../../internal/keyboard/match.js');
+var keys = require('../../internal/keyboard/keys.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);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var _excluded = ["accept", "className", "id", "disabled", "labelText", "multiple", "name", "onAddFiles", "pattern", "role", "tabIndex"];
+
+function FileUploaderDropContainer(_ref) {
+  var _classNames2;
+
+  var accept = _ref.accept,
+      className = _ref.className,
+      id = _ref.id,
+      disabled = _ref.disabled,
+      labelText = _ref.labelText,
+      multiple = _ref.multiple,
+      name = _ref.name,
+      onAddFiles = _ref.onAddFiles,
+      pattern = _ref.pattern,
+      role = _ref.role,
+      tabIndex = _ref.tabIndex,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var inputRef = React.useRef(null);
+
+  var _useRef = React.useRef(id || uniqueId["default"]()),
+      uid = _useRef.current;
+
+  var _useState = React.useState(false),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      isActive = _useState2[0],
+      setActive = _useState2[1];
+
+  var labelClasses = cx__default["default"]("".concat(prefix, "--file-browse-btn"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--file-browse-btn--disabled"), disabled));
+  var dropareaClasses = cx__default["default"]("".concat(prefix, "--file__drop-container"), (_classNames2 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--file__drop-container--drag-over"), isActive), _rollupPluginBabelHelpers.defineProperty(_classNames2, className, className), _classNames2));
+  /**
+   * Filters the array of added files based on file type restrictions
+   * @param {Event} event - Event object, used to get the list of files added
+   */
+
+  function validateFiles(event) {
+    var transferredFiles = event.type === 'drop' ? _rollupPluginBabelHelpers.toConsumableArray(event.dataTransfer.files) : _rollupPluginBabelHelpers.toConsumableArray(event.target.files);
+
+    if (!accept.length) {
+      return transferredFiles;
+    }
+
+    var acceptedTypes = new Set(accept);
+    return transferredFiles.reduce(function (acc, curr) {
+      var name = curr.name,
+          _curr$type = curr.type,
+          mimeType = _curr$type === void 0 ? '' : _curr$type;
+      var fileExtensionRegExp = new RegExp(pattern, 'i');
+      var hasFileExtension = fileExtensionRegExp.test(name);
+
+      if (!hasFileExtension) {
+        return acc;
+      }
+
+      var _name$match = name.match(fileExtensionRegExp),
+          _name$match2 = _rollupPluginBabelHelpers.slicedToArray(_name$match, 1),
+          fileExtension = _name$match2[0];
+
+      if (acceptedTypes.has(mimeType) || acceptedTypes.has(fileExtension)) {
+        return acc.concat([curr]);
+      }
+
+      curr.invalidFileType = true;
+      return acc.concat([curr]);
+    }, []);
+  }
+
+  function handleChange(event) {
+    var addedFiles = validateFiles(event);
+    return onAddFiles(event, {
+      addedFiles: addedFiles
+    });
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--file"),
+    onDragOver: function onDragOver(evt) {
+      evt.stopPropagation();
+      evt.preventDefault();
+
+      if (disabled) {
+        return;
+      }
+
+      setActive(true);
+      evt.dataTransfer.dropEffect = 'copy';
+    },
+    onDragLeave: function onDragLeave(evt) {
+      evt.stopPropagation();
+      evt.preventDefault();
+
+      if (disabled) {
+        return;
+      }
+
+      setActive(false);
+      evt.dataTransfer.dropEffect = 'move';
+    },
+    onDrop: function onDrop(evt) {
+      evt.stopPropagation();
+      evt.preventDefault();
+
+      if (disabled) {
+        return;
+      }
+
+      setActive(false);
+      handleChange(evt);
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
+    className: labelClasses,
+    htmlFor: uid,
+    tabIndex: tabIndex || 0,
+    onKeyDown: function onKeyDown(evt) {
+      if (match.matches(evt, [keys.Enter, keys.Space])) {
+        inputRef.current.click();
+      }
+    }
+  }, rest), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: dropareaClasses,
+    role: role || 'button'
+  }, labelText)), /*#__PURE__*/React__default["default"].createElement("input", {
+    type: "file",
+    id: uid,
+    className: "".concat(prefix, "--file-input"),
+    ref: inputRef,
+    tabIndex: "-1",
+    disabled: disabled,
+    accept: accept,
+    name: name,
+    multiple: multiple,
+    onChange: handleChange,
+    onClick: function onClick(evt) {
+      evt.target.value = null;
+    }
+  }));
+}
+
+FileUploaderDropContainer.propTypes = {
+  /**
+   * Specify the types of files that this input should be able to receive
+   */
+  accept: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
+
+  /**
+   * Provide a custom className to be applied to the container node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify whether file input is disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * Provide a unique id for the underlying `<input>` node
+   */
+  id: PropTypes__default["default"].string,
+
+  /**
+   * Provide the label text to be read by screen readers when interacting with
+   * this control
+   */
+  labelText: PropTypes__default["default"].string.isRequired,
+
+  /**
+   * Specify if the component should accept multiple files to upload
+   */
+  multiple: PropTypes__default["default"].bool,
+
+  /**
+   * Provide a name for the underlying `<input>` node
+   */
+  name: PropTypes__default["default"].string,
+
+  /**
+   * Event handler that is called after files are added to the uploader
+   * The event handler signature looks like `onAddFiles(evt, { addedFiles })`
+   */
+  onAddFiles: PropTypes__default["default"].func,
+
+  /**
+   * Provide a custom regex pattern for the acceptedTypes
+   */
+  pattern: PropTypes__default["default"].string,
+
+  /**
+   * Provide an accessibility role for the <FileUploaderButton>
+   */
+  role: PropTypes__default["default"].string,
+
+  /**
+   * Provide a custom tabIndex value for the <FileUploaderButton>
+   */
+  tabIndex: PropTypes__default["default"].number
+};
+FileUploaderDropContainer.defaultProps = {
+  tabIndex: 0,
+  labelText: 'Add file',
+  multiple: false,
+  onAddFiles: function onAddFiles() {},
+  accept: [],
+  pattern: '.[0-9a-z]+$'
+};
+
+exports["default"] = FileUploaderDropContainer;

package/lib/components/FileUploader/FileUploaderItem.js

@@ -0,0 +1,159 @@
+/**
+ * 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 cx = require('classnames');
+var PropTypes = require('prop-types');
+var React = require('react');
+var Filename = require('./Filename.js');
+var uniqueId = require('../../tools/uniqueId.js');
+var usePrefix = require('../../internal/usePrefix.js');
+var FeatureFlags = require('@carbon/feature-flags');
+var match = require('../../internal/keyboard/match.js');
+var keys = require('../../internal/keyboard/keys.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
+
+var _excluded = ["uuid", "name", "status", "iconDescription", "onDelete", "invalid", "errorSubject", "errorBody", "size"];
+
+function FileUploaderItem(_ref) {
+  var _cx;
+
+  var uuid = _ref.uuid,
+      name = _ref.name,
+      status = _ref.status,
+      iconDescription = _ref.iconDescription,
+      onDelete = _ref.onDelete,
+      invalid = _ref.invalid,
+      errorSubject = _ref.errorSubject,
+      errorBody = _ref.errorBody,
+      size = _ref.size,
+      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+
+  var _useRef = React.useRef(uuid || uniqueId["default"]()),
+      id = _useRef.current;
+
+  var classes = cx__default["default"]("".concat(prefix, "--file__selected-file"), (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--file__selected-file--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--file__selected-file--md"), size === 'field' || size === 'md'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--file__selected-file--sm"), size === 'small' || size === 'sm'), _cx));
+  return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({
+    className: classes
+  }, other), /*#__PURE__*/React__default["default"].createElement("p", {
+    className: "".concat(prefix, "--file-filename"),
+    title: name
+  }, name), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--file__state-container")
+  }, /*#__PURE__*/React__default["default"].createElement(Filename["default"], {
+    iconDescription: iconDescription,
+    status: status,
+    invalid: invalid,
+    onKeyDown: function onKeyDown(evt) {
+      if (match.matches(evt, [keys.Enter, keys.Space])) {
+        if (status === 'edit') {
+          onDelete(evt, {
+            uuid: id
+          });
+        }
+      }
+    },
+    onClick: function onClick(evt) {
+      if (status === 'edit') {
+        onDelete(evt, {
+          uuid: id
+        });
+      }
+    }
+  })), invalid && errorSubject && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--form-requirement")
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--form-requirement__title")
+  }, errorSubject), errorBody && /*#__PURE__*/React__default["default"].createElement("p", {
+    className: "".concat(prefix, "--form-requirement__supplement")
+  }, errorBody)));
+}
+
+FileUploaderItem.propTypes = {
+  /**
+   * Error message body for an invalid file upload
+   */
+  errorBody: PropTypes__default["default"].string,
+
+  /**
+   * Error message subject for an invalid file upload
+   */
+  errorSubject: PropTypes__default["default"].string,
+
+  /**
+   * Description of status icon (displayed in native tooltip)
+   */
+  iconDescription: PropTypes__default["default"].string,
+
+  /**
+   * Specify if the currently uploaded file is invalid
+   */
+  invalid: PropTypes__default["default"].bool,
+
+  /**
+   * Name of the uploaded file
+   */
+  name: PropTypes__default["default"].string,
+
+  /**
+   * Event handler that is called after removing a file from the file uploader
+   * The event handler signature looks like `onDelete(evt, { uuid })`
+   */
+  onDelete: PropTypes__default["default"].func,
+
+  /**
+   * Specify the size of the FileUploaderButton, from a list of available
+   * sizes.
+   */
+  size: FeatureFlags__namespace.enabled('enable-v11-release') ? PropTypes__default["default"].oneOf(['sm', 'md', 'lg']) : PropTypes__default["default"].oneOf(['default', 'field', 'small', 'sm', 'md', 'lg']),
+
+  /**
+   * Status of the file upload
+   */
+  status: PropTypes__default["default"].oneOf(['uploading', 'edit', 'complete']),
+
+  /**
+   * Unique identifier for the file object
+   */
+  uuid: PropTypes__default["default"].string
+};
+FileUploaderItem.defaultProps = {
+  status: 'uploading',
+  onDelete: function onDelete() {}
+};
+
+exports["default"] = FileUploaderItem;

package/lib/components/FileUploader/Filename.js

@@ -0,0 +1,91 @@
+/**
+ * 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 iconsReact = require('@carbon/icons-react');
+var PropTypes = require('prop-types');
+var React = require('react');
+var Loading = require('../Loading/Loading.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 _Close;
+
+var _excluded = ["iconDescription", "status", "invalid"];
+
+function Filename(_ref) {
+  var iconDescription = _ref.iconDescription,
+      status = _ref.status,
+      invalid = _ref.invalid,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+
+  switch (status) {
+    case 'uploading':
+      return /*#__PURE__*/React__default["default"].createElement(Loading["default"], {
+        description: iconDescription,
+        small: true,
+        withOverlay: false
+      });
+
+    case 'edit':
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, invalid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
+        className: "".concat(prefix, "--file-invalid")
+      }), /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
+        "aria-label": iconDescription,
+        className: "".concat(prefix, "--file-close"),
+        type: "button"
+      }, rest), _Close || (_Close = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null))));
+
+    case 'complete':
+      return /*#__PURE__*/React__default["default"].createElement(iconsReact.CheckmarkFilled, _rollupPluginBabelHelpers["extends"]({
+        "aria-label": iconDescription,
+        className: "".concat(prefix, "--file-complete")
+      }, rest), iconDescription && /*#__PURE__*/React__default["default"].createElement("title", null, iconDescription));
+
+    default:
+      return null;
+  }
+}
+
+Filename.propTypes = {
+  /**
+   * Provide a description of the SVG icon to denote file upload status
+   */
+  iconDescription: PropTypes__default["default"].string,
+
+  /**
+   * Specify if the file is invalid
+   */
+  invalid: PropTypes__default["default"].bool,
+
+  /**
+   * Status of the file upload
+   */
+  status: PropTypes__default["default"].oneOf(['edit', 'complete', 'uploading']),
+
+  /**
+   * Provide a custom tabIndex value for the <Filename>
+   */
+  tabIndex: PropTypes__default["default"].string
+};
+Filename.defaultProps = {
+  iconDescription: 'Uploading file',
+  status: 'uploading',
+  tabIndex: '0'
+};
+
+exports["default"] = Filename;

package/lib/components/FileUploader/index.js

@@ -0,0 +1,38 @@
+/**
+ * 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 FeatureFlags = require('@carbon/feature-flags');
+var FileUploader = require('./FileUploader.js');
+var createClassWrapper = require('../../internal/createClassWrapper.js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
+
+var index = FeatureFlags__namespace.enabled('enable-v11-release') ? createClassWrapper.createClassWrapper(FileUploader["default"]) : FileUploader["default"];
+
+exports["default"] = index;

package/lib/components/FluidForm/FluidForm.js

@@ -0,0 +1,56 @@
+/**
+ * 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 Form = require('../Form/Form.js');
+var FormContext = require('./FormContext.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 _excluded = ["className", "children"];
+
+function FluidForm(_ref) {
+  var className = _ref.className,
+      children = _ref.children,
+      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var classNames = cx__default["default"]("".concat(prefix, "--form--fluid"), className);
+  return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(Form["default"], _rollupPluginBabelHelpers["extends"]({
+    className: classNames
+  }, other), children));
+}
+
+FluidForm.propTypes = {
+  /**
+   * Provide children to be rendered inside of the <form> element
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Provide a custom className to be applied on the containing <form> node
+   */
+  className: PropTypes__default["default"].string
+};
+
+exports["default"] = FluidForm;

package/lib/components/FluidForm/FormContext.js

@@ -0,0 +1,18 @@
+/**
+ * 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 FormContext = /*#__PURE__*/React.createContext({
+  isFluid: false
+});
+
+exports.FormContext = FormContext;

package/lib/components/Form/Form.js

@@ -0,0 +1,51 @@
+/**
+ * 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 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 _excluded = ["className", "children"];
+
+var Form = function Form(_ref) {
+  var className = _ref.className,
+      children = _ref.children,
+      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var classNames = cx__default["default"]("".concat(prefix, "--form"), className);
+  return /*#__PURE__*/React__default["default"].createElement("form", _rollupPluginBabelHelpers["extends"]({
+    className: classNames
+  }, other), ' ', children, ' ');
+};
+
+Form.propTypes = {
+  /**
+   * Provide children to be rendered inside of the <form> element
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Provide a custom className to be applied on the containing <form> node
+   */
+  className: PropTypes__default["default"].string
+};
+var Form$1 = Form;
+
+exports["default"] = Form$1;