@carbon/react 0.16.2 → 1.0.0-rc.0

package/lib/components/Search/index.js

@@ -0,0 +1,39 @@
+/**
+ * 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 Search$2 = require('./next/Search.js');
+var Search$3 = 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;

package/lib/components/Search/next/Search.js

@@ -0,0 +1,273 @@
+/**
+ * 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 cx = require('classnames');
+var PropTypes = require('prop-types');
+var React = require('react');
+var index = require('../../../internal/focus/index.js');
+var useId = require('../../../internal/useId.js');
+var usePrefix = require('../../../internal/usePrefix.js');
+var deprecate = require('../../../prop-types/deprecate.js');
+var events = require('../../../tools/events.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 _Close;
+
+var _excluded = ["autoComplete", "className", "closeButtonLabelText", "defaultValue", "disabled", "id", "labelText", "light", "onChange", "onClear", "onKeyDown", "placeHolderText", "placeholder", "renderIcon", "role", "size", "type", "value"];
+
+function Search(_ref) {
+  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,
+      placeHolderText = _ref.placeHolderText,
+      _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 input = React.useRef(null);
+  var magnifier = React.useRef(null);
+  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);
+  }
+
+  function clearInput(event) {
+    if (!value) {
+      input.current.value = '';
+      onChange(event);
+    } else {
+      var clearedEvt = Object.assign({}, event.target, {
+        target: {
+          value: ''
+        }
+      });
+      onChange(clearedEvt);
+    }
+
+    onClear();
+    setHasContent(false);
+    index.focus(input);
+  }
+
+  function handleChange(event) {
+    setHasContent(event.target.value !== '');
+  }
+
+  function handleKeyDown(event) {
+    if (match.match(event, keys.Escape)) {
+      event.stopPropagation();
+      clearInput(event);
+    }
+  }
+
+  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: magnifier
+  }, /*#__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: input,
+    id: uniqueId,
+    onChange: events.composeEventHandlers([onChange, handleChange]),
+    onKeyDown: events.composeEventHandlers([onKeyDown, handleKeyDown]),
+    placeholder: placeHolderText || placeholder,
+    type: type,
+    value: value
+  })), /*#__PURE__*/React__default["default"].createElement("button", {
+    "aria-label": closeButtonLabelText,
+    className: clearClasses,
+    disabled: disabled,
+    onClick: clearInput,
+    type: "button"
+  }, _Close || (_Close = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null))));
+}
+
+Search.propTypes = {
+  /**
+   * Specify an optional value for the `autocomplete` property on the underlying
+   * `<input>`, defaults to "off"
+   */
+  autoComplete: PropTypes__default["default"].string,
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify a label to be read by screen readers on the "close" button
+   */
+  closeButtonLabelText: PropTypes__default["default"].string,
+
+  /**
+   * Optionally provide the default value of the `<input>`
+   */
+  defaultValue: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+
+  /**
+   * Specify whether the `<input>` should be disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * Specify a custom `id` for the input
+   */
+  id: PropTypes__default["default"].string,
+
+  /**
+   * Provide the label text for the Search icon
+   */
+  labelText: PropTypes__default["default"].node.isRequired,
+
+  /**
+   * Specify light version or default version of this control
+   */
+  light: PropTypes__default["default"].bool,
+
+  /**
+   * Optional callback called when the search value changes.
+   */
+  onChange: PropTypes__default["default"].func,
+
+  /**
+   * Optional callback called when the search value is cleared.
+   */
+  onClear: PropTypes__default["default"].func,
+
+  /**
+   * Provide a handler that is invoked on the key down event for the input
+   */
+  onKeyDown: PropTypes__default["default"].func,
+
+  /**
+   * Deprecated in favor of `placeholder`
+   */
+  placeHolderText: deprecate["default"](PropTypes__default["default"].string, "\nThe prop `placeHolderText` for Search has been deprecated in favor of `placeholder`. Please use `placeholder` instead."),
+
+  /**
+   * Provide an optional placeholder text for the Search.
+   * Note: if the label and placeholder differ,
+   * VoiceOver on Mac will read both
+   */
+  placeholder: PropTypes__default["default"].string,
+
+  /**
+   * Rendered icon for the Search.
+   * Can be a React component class
+   */
+  renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
+
+  /**
+   * Specify the role for the underlying `<input>`, defaults to `searchbox`
+   */
+  role: PropTypes__default["default"].string,
+
+  /**
+   * Specify the size of the Search
+   */
+  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
+
+  /**
+   * Optional prop to specify the type of the `<input>`
+   */
+  type: PropTypes__default["default"].string,
+
+  /**
+   * Specify the value of the `<input>`
+   */
+  value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
+};
+
+function CustomSearchIcon(_ref2) {
+  var icon = _ref2.icon;
+  var prefix = usePrefix.usePrefix();
+
+  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])
+};
+
+exports["default"] = Search;

package/lib/components/SearchFilterButton/SearchFilterButton.js

@@ -0,0 +1,70 @@
+/**
+ * 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 warning = require('../../internal/warning.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 _excluded = ["labelText", "iconDescription"];
+var didWarnAboutDeprecation = false;
+/**
+ * The filter button for `<Search>`.
+ */
+
+var SearchFilterButton = function SearchFilterButton(_ref) {
+  var labelText = _ref.labelText,
+      iconDescription = _ref.iconDescription,
+      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+
+  if (process.env.NODE_ENV !== "production") {
+    process.env.NODE_ENV !== "production" ? warning.warning(didWarnAboutDeprecation, 'The SearchFilterButton component has been deprecated and will be removed in the next major release of `carbon-components-react`') : void 0;
+    didWarnAboutDeprecation = true;
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
+    className: "".concat(prefix, "--search-button"),
+    type: "button",
+    "aria-label": labelText,
+    title: labelText
+  }, other), /*#__PURE__*/React__default["default"].createElement(iconsReact.Filter, {
+    className: "".concat(prefix, "--search-filter"),
+    "aria-label": iconDescription
+  }));
+};
+
+SearchFilterButton.propTypes = {
+  /**
+   * The icon description.
+   */
+  iconDescription: PropTypes__default["default"].string,
+
+  /**
+   * The a11y label text.
+   */
+  labelText: PropTypes__default["default"].string
+};
+SearchFilterButton.defaultProps = {
+  labelText: 'Search',
+  iconDescription: 'filter'
+};
+var SearchFilterButton$1 = SearchFilterButton;
+
+exports["default"] = SearchFilterButton$1;

package/lib/components/SearchLayoutButton/SearchLayoutButton.js

@@ -0,0 +1,160 @@
+/**
+ * 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 warning = require('../../internal/warning.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 didWarnAboutDeprecation = false;
+/**
+ * The layout button for `<Search>`.
+ */
+
+var SearchLayoutButton = /*#__PURE__*/function (_Component) {
+  _rollupPluginBabelHelpers.inherits(SearchLayoutButton, _Component);
+
+  var _super = _rollupPluginBabelHelpers.createSuper(SearchLayoutButton);
+
+  function SearchLayoutButton(props) {
+    var _this;
+
+    _rollupPluginBabelHelpers.classCallCheck(this, SearchLayoutButton);
+
+    _this = _super.call(this, props);
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "state", {
+      format: 'list'
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "toggleLayout", function () {
+      var format = _this.state.format === 'list' ? 'grid' : 'list';
+
+      _this.setState({
+        format: format
+      }, function () {
+        var onChangeFormat = _this.props.onChangeFormat;
+
+        if (typeof onChangeFormat === 'function') {
+          onChangeFormat({
+            format: format
+          });
+        }
+      });
+    });
+
+    if (process.env.NODE_ENV !== "production") {
+      process.env.NODE_ENV !== "production" ? warning.warning(didWarnAboutDeprecation, 'The SearchLayoutButton component has been deprecated and will be removed in the next major release of `carbon-components-react`') : void 0;
+      didWarnAboutDeprecation = true;
+    }
+
+    return _this;
+  }
+  /**
+   * Toggles the button state upon user-initiated event.
+   */
+
+
+  _rollupPluginBabelHelpers.createClass(SearchLayoutButton, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var prefix = this.context;
+      var _this$props = this.props,
+          labelText = _this$props.labelText,
+          iconDescriptionList = _this$props.iconDescriptionList,
+          iconDescriptionGrid = _this$props.iconDescriptionGrid;
+
+      var SearchLayoutButtonIcon = function SearchLayoutButtonIcon() {
+        if (_this2.state.format === 'list') {
+          return /*#__PURE__*/React__default["default"].createElement(iconsReact.ListBulleted, {
+            className: "".concat(prefix, "--search-view"),
+            "aria-label": iconDescriptionList
+          });
+        }
+
+        return /*#__PURE__*/React__default["default"].createElement(iconsReact.Grid, {
+          className: "".concat(prefix, "--search-view"),
+          "aria-label": iconDescriptionGrid
+        });
+      };
+
+      return /*#__PURE__*/React__default["default"].createElement("button", {
+        className: "".concat(prefix, "--search-button"),
+        type: "button",
+        onClick: this.toggleLayout,
+        "aria-label": labelText,
+        title: labelText
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "".concat(prefix, "--search__toggle-layout__container")
+      }, /*#__PURE__*/React__default["default"].createElement(SearchLayoutButtonIcon, null)));
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(_ref, state) {
+      var format = _ref.format;
+      var prevFormat = state.prevFormat;
+      return prevFormat === format ? null : {
+        format: format || 'list',
+        prevFormat: format
+      };
+    }
+  }]);
+
+  return SearchLayoutButton;
+}(React.Component);
+
+_rollupPluginBabelHelpers.defineProperty(SearchLayoutButton, "contextType", usePrefix.PrefixContext);
+
+_rollupPluginBabelHelpers.defineProperty(SearchLayoutButton, "propTypes", {
+  /**
+   * The layout.
+   */
+  format: PropTypes__default["default"].oneOf(['list', 'grid']),
+
+  /**
+   * The description for the "grid" icon.
+   */
+  iconDescriptionGrid: PropTypes__default["default"].string,
+
+  /**
+   * The description for the "list" icon.
+   */
+  iconDescriptionList: PropTypes__default["default"].string,
+
+  /**
+   * The a11y label text.
+   */
+  labelText: PropTypes__default["default"].string,
+
+  /**
+   * The callback called when layout switches.
+   */
+  onChangeFormat: PropTypes__default["default"].func
+});
+
+_rollupPluginBabelHelpers.defineProperty(SearchLayoutButton, "defaultProps", {
+  labelText: 'Filter',
+  iconDescriptionList: 'list',
+  iconDescriptionGrid: 'grid'
+});
+
+var SearchLayoutButton$1 = SearchLayoutButton;
+
+exports["default"] = SearchLayoutButton$1;

package/lib/components/SecondaryButton/SecondaryButton.js

@@ -0,0 +1,28 @@
+/**
+ * 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 Button = require('../Button/Button.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var SecondaryButton = function SecondaryButton(props) {
+  return /*#__PURE__*/React__default["default"].createElement(Button["default"], _rollupPluginBabelHelpers["extends"]({
+    kind: "secondary"
+  }, props));
+};
+
+var SecondaryButton$1 = SecondaryButton;
+
+exports["default"] = SecondaryButton$1;

package/lib/components/Select/Select.Skeleton.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 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 = ["hideLabel", "className"];
+
+var SelectSkeleton = function SelectSkeleton(_ref) {
+  var hideLabel = _ref.hideLabel,
+      className = _ref.className,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: cx__default["default"]("".concat(prefix, "--form-item"), className)
+  }, rest), !hideLabel && /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--label ").concat(prefix, "--skeleton")
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--select ").concat(prefix, "--skeleton")
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--select-input")
+  })));
+};
+
+SelectSkeleton.propTypes = {
+  /**
+   * Specify an optional className to add to the form item wrapper.
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify whether the label should be hidden, or not
+   */
+  hideLabel: PropTypes__default["default"].bool
+};
+var SelectSkeleton$1 = SelectSkeleton;
+
+exports["default"] = SelectSkeleton$1;