@carbon/react 1.27.0 → 1.28.0

package/es/components/ExpandableSearch/ExpandableSearch.js

@@ -5,7 +5,7 @@
  * 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 { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, useRef } from 'react';
 import cx from 'classnames';
 import Search from '../Search/Search.js';
@@ -13,27 +13,18 @@ import '../Search/Search.Skeleton.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { composeEventHandlers } from '../../tools/events.js';
 
-var _excluded = ["onBlur", "onChange", "onExpand", "onFocus"];
-
 function ExpandableSearch(_ref) {
-  var onBlur = _ref.onBlur,
-      onChange = _ref.onChange,
-      onExpand = _ref.onExpand,
-      onFocus = _ref.onFocus,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      expanded = _useState2[0],
-      setExpanded = _useState2[1];
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      hasContent = _useState4[0],
-      setHasContent = _useState4[1];
-
-  var searchRef = useRef(null);
-  var prefix = usePrefix();
+  let {
+    onBlur,
+    onChange,
+    onExpand,
+    onFocus,
+    ...props
+  } = _ref;
+  const [expanded, setExpanded] = useState(false);
+  const [hasContent, setHasContent] = useState(false);
+  const searchRef = useRef(null);
+  const prefix = usePrefix();
 
   function handleFocus() {
     if (!expanded) {
@@ -42,7 +33,7 @@ function ExpandableSearch(_ref) {
   }
 
   function handleBlur(evt) {
-    var relatedTargetIsAllowed = evt.relatedTarget && evt.relatedTarget.classList.contains("".concat(prefix, "--search-close"));
+    const relatedTargetIsAllowed = evt.relatedTarget && evt.relatedTarget.classList.contains(`${prefix}--search-close`);
 
     if (expanded && !relatedTargetIsAllowed && !hasContent) {
       setExpanded(false);
@@ -54,12 +45,14 @@ function ExpandableSearch(_ref) {
   }
 
   function handleExpand() {
-    var _searchRef$current$fo, _searchRef$current;
+    var _searchRef$current, _searchRef$current$fo;
 
-    (_searchRef$current$fo = (_searchRef$current = searchRef.current).focus) === null || _searchRef$current$fo === void 0 ? void 0 : _searchRef$current$fo.call(_searchRef$current);
+    (_searchRef$current = searchRef.current) === null || _searchRef$current === void 0 ? void 0 : (_searchRef$current$fo = _searchRef$current.focus) === null || _searchRef$current$fo === void 0 ? void 0 : _searchRef$current$fo.call(_searchRef$current);
   }
 
-  var classes = cx("".concat(prefix, "--search--expandable"), _defineProperty({}, "".concat(prefix, "--search--expanded"), expanded), props.className);
+  const classes = cx(`${prefix}--search--expandable`, {
+    [`${prefix}--search--expanded`]: expanded
+  }, props.className);
   return /*#__PURE__*/React__default.createElement(Search, _extends({}, props, {
     ref: searchRef,
     className: classes,
@@ -71,5 +64,6 @@ function ExpandableSearch(_ref) {
 }
 
 ExpandableSearch.propTypes = Search.propTypes;
+ExpandableSearch.displayName = 'ExpandableSearch';
 
 export { ExpandableSearch as default };

package/es/components/FeatureFlags/index.js

@@ -5,7 +5,6 @@
  * 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';
@@ -15,7 +14,7 @@ import React__default, { useContext, useState, useRef, useEffect, createContext
  * or disable feature flags in a given React tree
  */
 
-var FeatureFlagContext = /*#__PURE__*/createContext(FeatureFlags$1);
+const 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
@@ -23,39 +22,30 @@ var FeatureFlagContext = /*#__PURE__*/createContext(FeatureFlags$1);
  */
 
 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);
+  let {
+    children,
+    flags = {}
+  } = _ref;
+  const parentScope = useContext(FeatureFlagContext);
+  const [prevParentScope, setPrevParentScope] = useState(parentScope);
+  const [scope, updateScope] = useState(() => {
+    const 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);
+    const 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);
+  useChangedValue(flags, isEqual, changedFlags => {
+    const scope = createScope(changedFlags);
     scope.mergeWithScope(parentScope);
     updateScope(scope);
   });
@@ -84,28 +74,24 @@ FeatureFlags.propTypes = {
  */
 
 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];
+  const initialRender = useRef(false);
+  const savedCallback = useRef(callback);
+  const [prevValue, setPrevValue] = useState(value);
 
   if (!compare(prevValue, value)) {
     setPrevValue(value);
   }
 
-  useEffect(function () {
+  useEffect(() => {
     savedCallback.current = callback;
   });
-  useEffect(function () {
+  useEffect(() => {
     // We only want the callback triggered after the first render
     if (initialRender.current) {
       savedCallback.current(prevValue);
     }
   }, [prevValue]);
-  useEffect(function () {
+  useEffect(() => {
     initialRender.current = true;
   }, []);
 }
@@ -118,7 +104,7 @@ function useChangedValue(value, compare, callback) {
 
 
 function useFeatureFlag(flag) {
-  var scope = useContext(FeatureFlagContext);
+  const scope = useContext(FeatureFlagContext);
   return scope.enabled(flag);
 }
 /**
@@ -147,18 +133,14 @@ function isEqual(a, b) {
     return true;
   }
 
-  for (var _i = 0, _Object$keys = Object.keys(a); _i < _Object$keys.length; _i++) {
-    var key = _Object$keys[_i];
-
+  for (const key of Object.keys(a)) {
     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]) {
+  for (const key of Object.keys(b)) {
+    if (b[key] !== a[key]) {
       return false;
     }
   }

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
@@ -15,21 +15,20 @@ 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();
+  let {
+    className,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
   return /*#__PURE__*/React__default.createElement("div", _extends({
-    className: cx("".concat(prefix, "--form-item"), className)
+    className: cx(`${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")
+    className: `${prefix}--label-description`
   }), _ButtonSkeleton || (_ButtonSkeleton = /*#__PURE__*/React__default.createElement(ButtonSkeleton, null)));
 }
 

package/es/components/FileUploader/FileUploader.js

@@ -5,7 +5,7 @@
  * 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 { defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import * as FeatureFlags from '@carbon/feature-flags';
@@ -17,181 +17,154 @@ 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"];
+class FileUploader extends React__default.Component {
+  constructor() {
+    super(...arguments);
 
-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", {
+    _defineProperty(this, "state", {
       filenames: []
     });
 
-    _defineProperty(_assertThisInitialized(_this), "nodes", []);
+    _defineProperty(this, "nodes", []);
 
-    _defineProperty(_assertThisInitialized(_this), "uploaderButton", /*#__PURE__*/React__default.createRef());
+    _defineProperty(this, "uploaderButton", /*#__PURE__*/React__default.createRef());
 
-    _defineProperty(_assertThisInitialized(_this), "handleChange", function (evt) {
+    _defineProperty(this, "handleChange", evt => {
       evt.stopPropagation();
-      var filenames = Array.prototype.map.call(evt.target.files, function (file) {
-        return file.name;
+      const filenames = Array.prototype.map.call(evt.target.files, file => file.name);
+      this.setState({
+        filenames: this.props.multiple ? this.state.filenames.concat(filenames) : filenames
       });
 
-      _this.setState({
-        filenames: _this.props.multiple ? _this.state.filenames.concat(filenames) : filenames
-      });
-
-      if (_this.props.onChange) {
-        _this.props.onChange(evt);
+      if (this.props.onChange) {
+        this.props.onChange(evt);
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "handleClick", function (evt, _ref) {
-      var index = _ref.index,
-          filenameStatus = _ref.filenameStatus;
+    _defineProperty(this, "handleClick", (evt, _ref) => {
+      let {
+        index,
+        filenameStatus
+      } = _ref;
 
       if (filenameStatus === 'edit') {
         evt.stopPropagation();
-
-        var filteredArray = _this.state.filenames.filter(function (filename) {
-          return filename !== _this.nodes[index].innerText.trim();
-        });
-
-        _this.setState({
+        const filteredArray = this.state.filenames.filter(filename => filename !== this.nodes[index].innerText.trim());
+        this.setState({
           filenames: filteredArray
         });
 
-        if (_this.props.onDelete) {
-          _this.props.onDelete(evt);
-
-          _this.uploaderButton.current.focus();
+        if (this.props.onDelete) {
+          this.props.onDelete(evt);
+          this.uploaderButton.current.focus();
         }
 
-        _this.props.onClick(evt);
+        this.props.onClick(evt);
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "clearFiles", function () {
+    _defineProperty(this, "clearFiles", () => {
       // A clearFiles function that resets filenames and can be referenced using a ref by the parent.
-      _this.setState({
+      this.setState({
         filenames: []
       });
     });
+  }
+
+  static getDerivedStateFromProps(_ref2, state) {
+    let {
+      filenameStatus
+    } = _ref2;
+    const {
+      prevFilenameStatus
+    } = state;
+    return prevFilenameStatus === filenameStatus ? null : {
+      filenameStatus,
+      prevFilenameStatus: filenameStatus
+    };
+  }
+
+  render() {
+    const {
+      iconDescription,
+      buttonLabel,
+      buttonKind,
+      disabled,
+      filenameStatus,
+      labelDescription,
+      labelTitle,
+      className,
+      multiple,
+      accept,
+      name,
+      size = 'md',
+      onDelete,
+      // eslint-disable-line no-unused-vars
+      ...other
+    } = this.props;
+    const prefix = this.context;
+    const classes = cx({
+      [`${prefix}--form-item`]: true,
+      [className]: className
+    });
+
+    const getHelperLabelClasses = baseClass => cx(baseClass, {
+      [`${prefix}--label-description--disabled`]: disabled
+    });
 
-    return _this;
+    const selectedFileClasses = cx(`${prefix}--file__selected-file`, {
+      [`${prefix}--file__selected-file--md`]: size === 'field' || size === 'md',
+      [`${prefix}--file__selected-file--sm`]: size === 'small' || size === 'sm'
+    });
+    return /*#__PURE__*/React__default.createElement("div", _extends({
+      className: classes
+    }, other), FeatureFlags.enabled('enable-v11-release') && !labelTitle ? null : /*#__PURE__*/React__default.createElement("p", {
+      className: getHelperLabelClasses(`${prefix}--file--label`)
+    }, labelTitle), /*#__PURE__*/React__default.createElement("p", {
+      className: getHelperLabelClasses(`${prefix}--label-description`)
+    }, labelDescription), /*#__PURE__*/React__default.createElement(FileUploaderButton, {
+      innerRef: this.uploaderButton,
+      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: `${prefix}--file-container`
+    }, this.state.filenames.length === 0 ? null : this.state.filenames.map((name, index) => /*#__PURE__*/React__default.createElement("span", _extends({
+      key: index,
+      className: selectedFileClasses,
+      ref: node => this.nodes[index] = node // eslint-disable-line
+
+    }, other), /*#__PURE__*/React__default.createElement("p", {
+      className: `${prefix}--file-filename`,
+      id: name
+    }, name), /*#__PURE__*/React__default.createElement("span", {
+      className: `${prefix}--file__state-container`
+    }, /*#__PURE__*/React__default.createElement(Filename, {
+      name: name,
+      iconDescription: iconDescription,
+      status: filenameStatus,
+      onKeyDown: evt => {
+        if (matches(evt, [Enter, Space])) {
+          this.handleClick(evt, {
+            index,
+            filenameStatus
+          });
+        }
+      },
+      onClick: evt => this.handleClick(evt, {
+        index,
+        filenameStatus
+      })
+    }))))));
   }
 
-  _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, {
-        innerRef: this.uploaderButton,
-        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"),
-          id: name
-        }, name), /*#__PURE__*/React__default.createElement("span", {
-          className: "".concat(prefix, "--file__state-container")
-        }, /*#__PURE__*/React__default.createElement(Filename, {
-          name: name,
-          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", {
   /**
@@ -284,7 +257,7 @@ _defineProperty(FileUploader, "defaultProps", {
   buttonLabel: '',
   buttonKind: 'primary',
   multiple: false,
-  onClick: function onClick() {},
+  onClick: () => {},
   accept: []
 });