@carbon/react 1.16.0-rc.0 → 1.17.0-rc.0

package/lib/components/Search/Search.js

@@ -10,190 +10,157 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var iconsReact = require('@carbon/icons-react');
+var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
-var cx = require('classnames');
-var iconsReact = require('@carbon/icons-react');
+var index = require('../../internal/focus/index.js');
+var useId = require('../../internal/useId.js');
+var usePrefix = require('../../internal/usePrefix.js');
 var events = require('../../tools/events.js');
+var useMergedRefs = require('../../internal/useMergedRefs.js');
 var deprecate = require('../../prop-types/deprecate.js');
-var index = require('../FeatureFlags/index.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 cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _Close;
 
-var _excluded = ["className", "type", "id", "placeHolderText", "placeholder", "labelText", "closeButtonLabelText", "small", "size", "light", "disabled", "onChange", "onKeyDown", "renderIcon", "onClear", "onExpand"];
-
-var Search = /*#__PURE__*/function (_Component) {
-  _rollupPluginBabelHelpers.inherits(Search, _Component);
-
-  var _super = _rollupPluginBabelHelpers.createSuper(Search);
-
-  function Search() {
-    var _this;
-
-    _rollupPluginBabelHelpers.classCallCheck(this, Search);
+var _excluded = ["autoComplete", "className", "closeButtonLabelText", "defaultValue", "disabled", "id", "labelText", "light", "onChange", "onClear", "onKeyDown", "onExpand", "placeholder", "renderIcon", "role", "size", "type", "value"];
+var Search = /*#__PURE__*/React__default["default"].forwardRef(function Search(_ref, forwardRef) {
+  var _cx, _cx2;
+
+  var _ref$autoComplete = _ref.autoComplete,
+      autoComplete = _ref$autoComplete === void 0 ? 'off' : _ref$autoComplete,
+      className = _ref.className,
+      _ref$closeButtonLabel = _ref.closeButtonLabelText,
+      closeButtonLabelText = _ref$closeButtonLabel === void 0 ? 'Clear search input' : _ref$closeButtonLabel,
+      defaultValue = _ref.defaultValue,
+      disabled = _ref.disabled,
+      id = _ref.id,
+      labelText = _ref.labelText,
+      light = _ref.light,
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+      _ref$onClear = _ref.onClear,
+      onClear = _ref$onClear === void 0 ? function () {} : _ref$onClear,
+      onKeyDown = _ref.onKeyDown,
+      onExpand = _ref.onExpand,
+      _ref$placeholder = _ref.placeholder,
+      placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
+      renderIcon = _ref.renderIcon,
+      _ref$role = _ref.role,
+      role = _ref$role === void 0 ? 'searchbox' : _ref$role,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'md' : _ref$size,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'text' : _ref$type,
+      value = _ref.value,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var inputRef = React.useRef(null);
+  var ref = useMergedRefs.useMergedRefs([forwardRef, inputRef]);
+  var inputId = useId.useId('search-input');
+  var uniqueId = id || inputId;
+  var searchId = "".concat(uniqueId, "-search");
+
+  var _useState = React.useState(value || defaultValue || false),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      hasContent = _useState2[0],
+      setHasContent = _useState2[1];
+
+  var _useState3 = React.useState(value),
+      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+      prevValue = _useState4[0],
+      setPrevValue = _useState4[1];
+
+  var searchClasses = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--search"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--search--sm"), size === 'sm'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--search--md"), size === 'md'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--search--lg"), size === 'lg'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--search--light"), light), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--search--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_cx, className, className), _cx));
+  var clearClasses = cx__default["default"]((_cx2 = {}, _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--search-close"), true), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--search-close--hidden"), !hasContent), _cx2));
+
+  if (value !== prevValue) {
+    setHasContent(!!value);
+    setPrevValue(value);
+  }
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+  function clearInput() {
+    if (!value) {
+      inputRef.current.value = '';
     }
 
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "state", {
-      hasContent: _this.props.value || _this.props.defaultValue || false,
-      prevValue: _this.props.value
-    });
-
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "clearInput", function (evt) {
-      if (!_this.props.value) {
-        _this.input.value = '';
-
-        _this.props.onChange(evt);
-      } else {
-        var clearedEvt = Object.assign({}, evt.target, {
-          target: {
-            value: ''
-          }
-        });
-
-        _this.props.onChange(clearedEvt);
-      }
-
-      _this.props.onClear();
-
-      _this.setState({
-        hasContent: false
-      }, function () {
-        return _this.input.focus();
-      });
-    });
-
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleChange", function (evt) {
-      _this.setState({
-        hasContent: evt.target.value !== ''
-      });
-    });
-
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleKeyDown", function (evt) {
-      if (match.match(evt, keys.Escape)) {
-        _this.clearInput(evt);
-      }
+    var inputTarget = Object.assign({}, inputRef.current, {
+      value: ''
     });
+    var clearedEvt = {
+      target: inputTarget,
+      type: 'change'
+    };
+    onChange(clearedEvt);
+    onClear();
+    setHasContent(false);
+    index.focus(inputRef);
+  }
 
-    return _this;
+  function handleChange(event) {
+    setHasContent(event.target.value !== '');
   }
 
-  _rollupPluginBabelHelpers.createClass(Search, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props = this.props,
-          className = _this$props.className,
-          type = _this$props.type,
-          _this$props$id = _this$props.id,
-          id = _this$props$id === void 0 ? this._inputId = this._inputId || "search__input__id_".concat(Math.random().toString(36).substr(2)) : _this$props$id,
-          placeHolderText = _this$props.placeHolderText,
-          placeholder = _this$props.placeholder,
-          labelText = _this$props.labelText,
-          closeButtonLabelText = _this$props.closeButtonLabelText,
-          small = _this$props.small,
-          _this$props$size = _this$props.size,
-          size = _this$props$size === void 0 ? !small ? 'xl' : 'sm' : _this$props$size,
-          light = _this$props.light,
-          disabled = _this$props.disabled,
-          onChange = _this$props.onChange,
-          onKeyDown = _this$props.onKeyDown,
-          renderIcon = _this$props.renderIcon;
-          _this$props.onClear;
-          _this$props.onExpand;
-          var other = _rollupPluginBabelHelpers.objectWithoutProperties(_this$props, _excluded);
-
-      var hasContent = this.state.hasContent;
-      var scope = this.context;
-      var enabled;
-
-      if (scope.enabled) {
-        enabled = scope.enabled('enable-v11-release');
-      }
-
-      return /*#__PURE__*/React__default["default"].createElement(usePrefix.PrefixContext.Consumer, null, function (prefix) {
-        var _classNames, _classNames2;
-
-        var searchClasses = cx__default["default"]((_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--search"), true), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--search--sm"), size === 'sm'), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--search--lg"), enabled ? size === 'md' : size === 'lg'), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--search--xl"), enabled ? size === 'lg' : size === 'xl'), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--search--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--search--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_classNames, className, className), _classNames));
-        var clearClasses = cx__default["default"]((_classNames2 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--search-close"), true), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--search-close--hidden"), !hasContent), _classNames2));
-        var customIcon;
-
-        if (renderIcon) {
-          customIcon = /*#__PURE__*/React__default["default"].cloneElement(renderIcon, {
-            className: "".concat(prefix, "--search-magnifier-icon")
-          });
-        }
-
-        var searchId = "".concat(id, "-search");
-        var searchIcon = renderIcon ? customIcon : /*#__PURE__*/React__default["default"].createElement(iconsReact.Search, {
-          className: "".concat(prefix, "--search-magnifier-icon")
-        });
-        return /*#__PURE__*/React__default["default"].createElement("div", {
-          role: "search",
-          "aria-labelledby": searchId,
-          className: searchClasses
-        }, /*#__PURE__*/React__default["default"].createElement("div", {
-          className: "".concat(prefix, "--search-magnifier"),
-          ref: function ref(magnifier) {
-            _this2.magnifier = magnifier;
-          }
-        }, searchIcon), /*#__PURE__*/React__default["default"].createElement("label", {
-          id: searchId,
-          htmlFor: id,
-          className: "".concat(prefix, "--label")
-        }, labelText), /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({
-          role: "searchbox",
-          autoComplete: "off"
-        }, other, {
-          type: type,
-          disabled: disabled,
-          className: "".concat(prefix, "--search-input"),
-          id: id,
-          placeholder: placeHolderText || placeholder,
-          onChange: events.composeEventHandlers([onChange, _this2.handleChange]),
-          onKeyDown: events.composeEventHandlers([onKeyDown, _this2.handleKeyDown]),
-          ref: function ref(input) {
-            _this2.input = input;
-          }
-        })), /*#__PURE__*/React__default["default"].createElement("button", {
-          className: clearClasses,
-          disabled: disabled,
-          onClick: _this2.clearInput,
-          type: "button",
-          "aria-label": closeButtonLabelText
-        }, _Close || (_Close = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null))));
-      });
-    }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(_ref, state) {
-      var value = _ref.value;
-      var prevValue = state.prevValue;
-      return prevValue === value ? null : {
-        hasContent: !!value,
-        prevValue: value
-      };
+  function handleKeyDown(event) {
+    if (match.match(event, keys.Escape)) {
+      event.stopPropagation();
+      clearInput();
     }
-  }]);
+  }
 
-  return Search;
-}(React.Component);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    role: "search",
+    "aria-labelledby": searchId,
+    className: searchClasses
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    role: onExpand ? 'button' : null,
+    className: "".concat(prefix, "--search-magnifier"),
+    onClick: onExpand
+  }, /*#__PURE__*/React__default["default"].createElement(CustomSearchIcon, {
+    icon: renderIcon
+  })), /*#__PURE__*/React__default["default"].createElement("label", {
+    id: searchId,
+    htmlFor: uniqueId,
+    className: "".concat(prefix, "--label")
+  }, labelText), /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    autoComplete: autoComplete,
+    className: "".concat(prefix, "--search-input"),
+    defaultValue: defaultValue,
+    disabled: disabled,
+    role: role,
+    ref: ref,
+    id: uniqueId,
+    onChange: events.composeEventHandlers([onChange, handleChange]),
+    onKeyDown: events.composeEventHandlers([onKeyDown, handleKeyDown]),
+    placeholder: placeholder,
+    type: type,
+    value: value
+  })), /*#__PURE__*/React__default["default"].createElement("button", {
+    "aria-label": closeButtonLabelText,
+    className: clearClasses,
+    disabled: disabled,
+    onClick: clearInput,
+    title: closeButtonLabelText,
+    type: "button"
+  }, _Close || (_Close = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null))));
+});
+Search.displayName = 'Search';
+Search.propTypes = {
+  /**
+   * Specify an optional value for the `autocomplete` property on the underlying
+   * `<input>`, defaults to "off"
+   */
+  autoComplete: PropTypes__default["default"].string,
 
-_rollupPluginBabelHelpers.defineProperty(Search, "propTypes", {
   /**
    * Specify an optional className to be applied to the container node
    */
@@ -227,7 +194,7 @@ _rollupPluginBabelHelpers.defineProperty(Search, "propTypes", {
   /**
    * Specify light version or default version of this control
    */
-  light: PropTypes__default["default"].bool,
+  light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `Search` is no longer needed and has ' + 'been deprecated in v11 in favor of the new `Layer` component. It will be moved in the next major release.'),
 
   /**
    * Optional callback called when the search value changes.
@@ -240,14 +207,14 @@ _rollupPluginBabelHelpers.defineProperty(Search, "propTypes", {
   onClear: PropTypes__default["default"].func,
 
   /**
-   * Provide a handler that is invoked on the key down event for the input
+   * Optional callback called when the magnifier icon is clicked in ExpandableSearch.
    */
-  onKeyDown: PropTypes__default["default"].func,
+  onExpand: PropTypes__default["default"].func,
 
   /**
-   * Deprecated in favor of `placeholder`
+   * Provide a handler that is invoked on the key down event for the input
    */
-  placeHolderText: deprecate["default"](PropTypes__default["default"].string, "\nThe prop `placeHolderText` for Search has been deprecated in favor of `placeholder`. Please use `placeholder` instead."),
+  onKeyDown: PropTypes__default["default"].func,
 
   /**
    * Provide an optional placeholder text for the Search.
@@ -263,18 +230,14 @@ _rollupPluginBabelHelpers.defineProperty(Search, "propTypes", {
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
 
   /**
-   * Specify the search size
+   * Specify the role for the underlying `<input>`, defaults to `searchbox`
    */
-  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg', 'xl']),
+  role: PropTypes__default["default"].string,
 
   /**
-   * Specify whether the Search should be a small variant
+   * Specify the size of the Search
    */
-
-  /**
-   * Specify whether the load was successful
-   */
-  small: deprecate["default"](PropTypes__default["default"].bool, "\nThe prop `small` for Search has been deprecated in favor of `size`. Please use `size=\"sm\"` instead."),
+  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
 
   /**
    * Optional prop to specify the type of the `<input>`
@@ -285,16 +248,29 @@ _rollupPluginBabelHelpers.defineProperty(Search, "propTypes", {
    * Specify the value of the `<input>`
    */
   value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
-});
+};
 
-_rollupPluginBabelHelpers.defineProperty(Search, "contextType", index.FeatureFlagContext);
+function CustomSearchIcon(_ref2) {
+  var icon = _ref2.icon;
+  var prefix = usePrefix.usePrefix();
 
-_rollupPluginBabelHelpers.defineProperty(Search, "defaultProps", {
-  type: 'text',
-  placeholder: '',
-  closeButtonLabelText: 'Clear search input',
-  onChange: function onChange() {},
-  onClear: function onClear() {}
-});
+  if (icon) {
+    return /*#__PURE__*/React__default["default"].cloneElement(icon, {
+      className: "".concat(prefix, "--search-magnifier-icon")
+    });
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement(iconsReact.Search, {
+    className: "".concat(prefix, "--search-magnifier-icon")
+  });
+}
+
+CustomSearchIcon.propTypes = {
+  /**
+   * Rendered icon for the Search. Can be a React component class
+   */
+  icon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object])
+};
+var Search$1 = Search;
 
-exports["default"] = Search;
+exports["default"] = Search$1;

package/lib/components/Search/index.js

@@ -9,31 +9,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FeatureFlags = require('@carbon/feature-flags');
-var Search$2 = require('./next/Search.js');
-var Search$3 = require('./Search.js');
+var Search = require('./Search.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 Search = FeatureFlags__namespace.enabled('enable-v11-release') ? Search$2["default"] : Search$3["default"];
-var Search$1 = Search;
-
-exports["default"] = Search$1;
+exports["default"] = Search["default"];

package/lib/components/Tab/index.js

@@ -10,7 +10,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var FeatureFlags = require('@carbon/feature-flags');
-var Tabs = require('../Tabs/next/Tabs.js');
+var Tabs = require('../Tabs/Tabs.js');
 var Tab$2 = require('./Tab.js');
 
 function _interopNamespace(e) {

package/lib/components/Tabs/Tabs.Skeleton.js

@@ -21,14 +21,14 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["className", "type"];
+var _excluded = ["className", "contained"];
 
 var _span;
 
 function Tab() {
   var prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement("li", {
-    className: "".concat(prefix, "--tabs--scrollable__nav-item")
+    className: "".concat(prefix, "--tabs__nav-item")
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(prefix, "--tabs__nav-link")
   }, _span || (_span = /*#__PURE__*/React__default["default"].createElement("span", null))));
@@ -36,15 +36,15 @@ function Tab() {
 
 function TabsSkeleton(_ref) {
   var className = _ref.className,
-      type = _ref.type,
+      contained = _ref.contained,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
-  var tabClasses = cx__default["default"](className, "".concat(prefix, "--tabs"), "".concat(prefix, "--skeleton"), "".concat(prefix, "--tabs--scrollable"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--tabs--scrollable--container"), type === 'container'));
+  var tabClasses = cx__default["default"](className, "".concat(prefix, "--tabs"), "".concat(prefix, "--skeleton"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--tabs--contained"), contained));
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: tabClasses
   }, rest), /*#__PURE__*/React__default["default"].createElement("ul", {
-    className: "".concat(prefix, "--tabs--scrollable__nav")
+    className: "".concat(prefix, "--tabs__nav")
   }, Tab(), Tab(), Tab(), Tab(), Tab()));
 }
 
@@ -57,7 +57,7 @@ TabsSkeleton.propTypes = {
   /**
    * Provide the type of Tab
    */
-  type: PropTypes__default["default"].oneOf(['', 'default', 'container'])
+  contained: PropTypes__default["default"].bool
 };
 
 exports["default"] = TabsSkeleton;