@carbon/react 0.16.2 → 1.0.0-rc.0

package/es/components/FileUploader/FileUploaderDropContainer.js

@@ -0,0 +1,223 @@
+/**
+ * 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, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import uniqueId from '../../tools/uniqueId.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { matches } from '../../internal/keyboard/match.js';
+import { Enter, Space } from '../../internal/keyboard/keys.js';
+
+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 = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var inputRef = useRef(null);
+
+  var _useRef = useRef(id || uniqueId()),
+      uid = _useRef.current;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isActive = _useState2[0],
+      setActive = _useState2[1];
+
+  var labelClasses = cx("".concat(prefix, "--file-browse-btn"), _defineProperty({}, "".concat(prefix, "--file-browse-btn--disabled"), disabled));
+  var dropareaClasses = cx("".concat(prefix, "--file__drop-container"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefix, "--file__drop-container--drag-over"), isActive), _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' ? _toConsumableArray(event.dataTransfer.files) : _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 = _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.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.createElement("label", _extends({
+    className: labelClasses,
+    htmlFor: uid,
+    tabIndex: tabIndex || 0,
+    onKeyDown: function onKeyDown(evt) {
+      if (matches(evt, [Enter, Space])) {
+        inputRef.current.click();
+      }
+    }
+  }, rest), /*#__PURE__*/React__default.createElement("div", {
+    className: dropareaClasses,
+    role: role || 'button'
+  }, labelText)), /*#__PURE__*/React__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.arrayOf(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,
+
+  /**
+   * 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.string.isRequired,
+
+  /**
+   * Specify if the component should accept multiple files to upload
+   */
+  multiple: PropTypes.bool,
+
+  /**
+   * Provide a name for the underlying `<input>` node
+   */
+  name: PropTypes.string,
+
+  /**
+   * Event handler that is called after files are added to the uploader
+   * The event handler signature looks like `onAddFiles(evt, { addedFiles })`
+   */
+  onAddFiles: PropTypes.func,
+
+  /**
+   * Provide a custom regex pattern for the acceptedTypes
+   */
+  pattern: PropTypes.string,
+
+  /**
+   * Provide an accessibility role for the <FileUploaderButton>
+   */
+  role: PropTypes.string,
+
+  /**
+   * Provide a custom tabIndex value for the <FileUploaderButton>
+   */
+  tabIndex: PropTypes.number
+};
+FileUploaderDropContainer.defaultProps = {
+  tabIndex: 0,
+  labelText: 'Add file',
+  multiple: false,
+  onAddFiles: function onAddFiles() {},
+  accept: [],
+  pattern: '.[0-9a-z]+$'
+};
+
+export { FileUploaderDropContainer as default };

package/es/components/FileUploader/FileUploaderItem.js

@@ -0,0 +1,130 @@
+/**
+ * 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, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React__default, { useRef } from 'react';
+import Filename from './Filename.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 = ["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 = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+
+  var _useRef = useRef(uuid || uniqueId()),
+      id = _useRef.current;
+
+  var classes = cx("".concat(prefix, "--file__selected-file"), (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--file__selected-file--invalid"), invalid), _defineProperty(_cx, "".concat(prefix, "--file__selected-file--md"), size === 'field' || size === 'md'), _defineProperty(_cx, "".concat(prefix, "--file__selected-file--sm"), size === 'small' || size === 'sm'), _cx));
+  return /*#__PURE__*/React__default.createElement("span", _extends({
+    className: classes
+  }, other), /*#__PURE__*/React__default.createElement("p", {
+    className: "".concat(prefix, "--file-filename"),
+    title: name
+  }, name), /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--file__state-container")
+  }, /*#__PURE__*/React__default.createElement(Filename, {
+    iconDescription: iconDescription,
+    status: status,
+    invalid: invalid,
+    onKeyDown: function onKeyDown(evt) {
+      if (matches(evt, [Enter, Space])) {
+        if (status === 'edit') {
+          onDelete(evt, {
+            uuid: id
+          });
+        }
+      }
+    },
+    onClick: function onClick(evt) {
+      if (status === 'edit') {
+        onDelete(evt, {
+          uuid: id
+        });
+      }
+    }
+  })), invalid && errorSubject && /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--form-requirement")
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--form-requirement__title")
+  }, errorSubject), errorBody && /*#__PURE__*/React__default.createElement("p", {
+    className: "".concat(prefix, "--form-requirement__supplement")
+  }, errorBody)));
+}
+
+FileUploaderItem.propTypes = {
+  /**
+   * Error message body for an invalid file upload
+   */
+  errorBody: PropTypes.string,
+
+  /**
+   * Error message subject for an invalid file upload
+   */
+  errorSubject: PropTypes.string,
+
+  /**
+   * Description of status icon (displayed in native tooltip)
+   */
+  iconDescription: PropTypes.string,
+
+  /**
+   * Specify if the currently uploaded file is invalid
+   */
+  invalid: PropTypes.bool,
+
+  /**
+   * Name of the uploaded file
+   */
+  name: PropTypes.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.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']),
+
+  /**
+   * Status of the file upload
+   */
+  status: PropTypes.oneOf(['uploading', 'edit', 'complete']),
+
+  /**
+   * Unique identifier for the file object
+   */
+  uuid: PropTypes.string
+};
+FileUploaderItem.defaultProps = {
+  status: 'uploading',
+  onDelete: function onDelete() {}
+};
+
+export { FileUploaderItem as default };

package/es/components/FileUploader/Filename.js

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

package/es/components/FileUploader/index.js

@@ -0,0 +1,14 @@
+/**
+ * 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 * as FeatureFlags from '@carbon/feature-flags';
+import FileUploader from './FileUploader.js';
+import { createClassWrapper } from '../../internal/createClassWrapper.js';
+
+var index = FeatureFlags.enabled('enable-v11-release') ? createClassWrapper(FileUploader) : FileUploader;
+
+export { index as default };

package/es/components/FluidForm/FluidForm.js

@@ -0,0 +1,46 @@
+/**
+ * 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 Form from '../Form/Form.js';
+import { FormContext } from './FormContext.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _excluded = ["className", "children"];
+
+function FluidForm(_ref) {
+  var className = _ref.className,
+      children = _ref.children,
+      other = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var classNames = cx("".concat(prefix, "--form--fluid"), className);
+  return /*#__PURE__*/React__default.createElement(FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React__default.createElement(Form, _extends({
+    className: classNames
+  }, other), children));
+}
+
+FluidForm.propTypes = {
+  /**
+   * Provide children to be rendered inside of the <form> element
+   */
+  children: PropTypes.node,
+
+  /**
+   * Provide a custom className to be applied on the containing <form> node
+   */
+  className: PropTypes.string
+};
+
+export { FluidForm as default };

package/es/components/FluidForm/FormContext.js

@@ -0,0 +1,14 @@
+/**
+ * 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 { createContext } from 'react';
+
+var FormContext = /*#__PURE__*/createContext({
+  isFluid: false
+});
+
+export { FormContext };

package/es/components/Form/Form.js

@@ -0,0 +1,41 @@
+/**
+ * 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 { usePrefix } from '../../internal/usePrefix.js';
+
+var _excluded = ["className", "children"];
+
+var Form = function Form(_ref) {
+  var className = _ref.className,
+      children = _ref.children,
+      other = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var classNames = cx("".concat(prefix, "--form"), className);
+  return /*#__PURE__*/React__default.createElement("form", _extends({
+    className: classNames
+  }, other), ' ', children, ' ');
+};
+
+Form.propTypes = {
+  /**
+   * Provide children to be rendered inside of the <form> element
+   */
+  children: PropTypes.node,
+
+  /**
+   * Provide a custom className to be applied on the containing <form> node
+   */
+  className: PropTypes.string
+};
+var Form$1 = Form;
+
+export { Form$1 as default };

package/es/components/FormGroup/FormGroup.js

@@ -0,0 +1,97 @@
+/**
+ * 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, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import { useFeatureFlag } from '../FeatureFlags/index.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _excluded = ["legendId", "legendText", "invalid", "children", "className", "message", "messageText", "hasMargin"];
+
+var FormGroup = function FormGroup(_ref) {
+  var legendId = _ref.legendId,
+      legendText = _ref.legendText,
+      invalid = _ref.invalid,
+      children = _ref.children,
+      className = _ref.className,
+      message = _ref.message,
+      messageText = _ref.messageText,
+      hasMargin = _ref.hasMargin,
+      other = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var enabled = useFeatureFlag('enable-v11-release');
+  var classNamesLegend = cx("".concat(prefix, "--label"), [enabled ? null : className]); // TODO - remove `fieldset--no-margin` in v11
+
+  var classNamesFieldset = cx("".concat(prefix, "--fieldset"), className, _defineProperty({}, "".concat(prefix, "--fieldset--no-margin"), !hasMargin));
+  return /*#__PURE__*/React__default.createElement("fieldset", _extends({}, invalid && {
+    'data-invalid': ''
+  }, {
+    className: classNamesFieldset
+  }, other, {
+    "aria-labelledby": other['aria-labelledby'] || legendId
+  }), /*#__PURE__*/React__default.createElement("legend", {
+    className: classNamesLegend,
+    id: legendId || other['aria-labelledby']
+  }, legendText), children, message ? /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--form__requirements")
+  }, messageText) : null);
+};
+
+FormGroup.propTypes = {
+  /**
+   * Provide the children form elements to be rendered inside of the <fieldset>
+   */
+  children: PropTypes.node,
+
+  /**
+   * Provide a custom className to be applied to the containing <fieldset> node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether or not the FormGroup should provide bottom margin
+   */
+  hasMargin: PropTypes.bool,
+
+  /**
+   * Specify whether the <FormGroup> is invalid
+   */
+  invalid: PropTypes.bool,
+
+  /**
+   * Provide id for the fieldset <legend> which corresponds to the fieldset
+   * `aria-labelledby`
+   */
+  legendId: PropTypes.node,
+
+  /**
+   * Provide the text to be rendered inside of the fieldset <legend>
+   */
+  legendText: PropTypes.node.isRequired,
+
+  /**
+   * Specify whether the message should be displayed in the <FormGroup>
+   */
+  message: PropTypes.bool,
+
+  /**
+   * Provide the text for the message in the <FormGroup>
+   */
+  messageText: PropTypes.string
+};
+FormGroup.defaultProps = {
+  invalid: false,
+  message: false,
+  messageText: '',
+  hasMargin: true
+};
+var FormGroup$1 = FormGroup;
+
+export { FormGroup$1 as default };

package/es/components/FormItem/FormItem.js

@@ -0,0 +1,41 @@
+/**
+ * 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 { usePrefix } from '../../internal/usePrefix.js';
+
+var _excluded = ["className", "children"];
+
+var FormItem = function FormItem(_ref) {
+  var className = _ref.className,
+      children = _ref.children,
+      other = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var classNames = cx("".concat(prefix, "--form-item"), className);
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: classNames
+  }, other), children);
+};
+
+FormItem.propTypes = {
+  /**
+   * Provide content to be rendered in the form item
+   */
+  children: PropTypes.node,
+
+  /**
+   * Provide a custom className to be applied to the containing node
+   */
+  className: PropTypes.string
+};
+var FormItem$1 = FormItem;
+
+export { FormItem$1 as default };