@carbon/react 0.16.2 → 1.0.0-rc.0

package/es/components/Search/next/Search.js

@@ -0,0 +1,263 @@
+/**
+ * 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 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { Close, Search as Search$1 } from '@carbon/icons-react';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React__default, { useRef, useState } from 'react';
+import { focus } from '../../../internal/focus/index.js';
+import { useId } from '../../../internal/useId.js';
+import { usePrefix } from '../../../internal/usePrefix.js';
+import deprecate from '../../../prop-types/deprecate.js';
+import { composeEventHandlers } from '../../../tools/events.js';
+import { match } from '../../../internal/keyboard/match.js';
+import { Escape } from '../../../internal/keyboard/keys.js';
+
+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 = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var input = useRef(null);
+  var magnifier = useRef(null);
+  var inputId = useId('search-input');
+  var uniqueId = id || inputId;
+  var searchId = "".concat(uniqueId, "-search");
+
+  var _useState = useState(value || defaultValue || false),
+      _useState2 = _slicedToArray(_useState, 2),
+      hasContent = _useState2[0],
+      setHasContent = _useState2[1];
+
+  var _useState3 = useState(value),
+      _useState4 = _slicedToArray(_useState3, 2),
+      prevValue = _useState4[0],
+      setPrevValue = _useState4[1];
+
+  var searchClasses = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--search"), true), _defineProperty(_cx, "".concat(prefix, "--search--sm"), size === 'sm'), _defineProperty(_cx, "".concat(prefix, "--search--md"), size === 'md'), _defineProperty(_cx, "".concat(prefix, "--search--lg"), size === 'lg'), _defineProperty(_cx, "".concat(prefix, "--search--light"), light), _defineProperty(_cx, "".concat(prefix, "--search--disabled"), disabled), _defineProperty(_cx, className, className), _cx));
+  var clearClasses = cx((_cx2 = {}, _defineProperty(_cx2, "".concat(prefix, "--search-close"), true), _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);
+    focus(input);
+  }
+
+  function handleChange(event) {
+    setHasContent(event.target.value !== '');
+  }
+
+  function handleKeyDown(event) {
+    if (match(event, Escape)) {
+      event.stopPropagation();
+      clearInput(event);
+    }
+  }
+
+  return /*#__PURE__*/React__default.createElement("div", {
+    role: "search",
+    "aria-labelledby": searchId,
+    className: searchClasses
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--search-magnifier"),
+    ref: magnifier
+  }, /*#__PURE__*/React__default.createElement(CustomSearchIcon, {
+    icon: renderIcon
+  })), /*#__PURE__*/React__default.createElement("label", {
+    id: searchId,
+    htmlFor: uniqueId,
+    className: "".concat(prefix, "--label")
+  }, labelText), /*#__PURE__*/React__default.createElement("input", _extends({}, rest, {
+    autoComplete: autoComplete,
+    className: "".concat(prefix, "--search-input"),
+    defaultValue: defaultValue,
+    disabled: disabled,
+    role: role,
+    ref: input,
+    id: uniqueId,
+    onChange: composeEventHandlers([onChange, handleChange]),
+    onKeyDown: composeEventHandlers([onKeyDown, handleKeyDown]),
+    placeholder: placeHolderText || placeholder,
+    type: type,
+    value: value
+  })), /*#__PURE__*/React__default.createElement("button", {
+    "aria-label": closeButtonLabelText,
+    className: clearClasses,
+    disabled: disabled,
+    onClick: clearInput,
+    type: "button"
+  }, _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, null))));
+}
+
+Search.propTypes = {
+  /**
+   * Specify an optional value for the `autocomplete` property on the underlying
+   * `<input>`, defaults to "off"
+   */
+  autoComplete: PropTypes.string,
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify a label to be read by screen readers on the "close" button
+   */
+  closeButtonLabelText: PropTypes.string,
+
+  /**
+   * Optionally provide the default value of the `<input>`
+   */
+  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   * Specify whether the `<input>` should be disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Specify a custom `id` for the input
+   */
+  id: PropTypes.string,
+
+  /**
+   * Provide the label text for the Search icon
+   */
+  labelText: PropTypes.node.isRequired,
+
+  /**
+   * Specify light version or default version of this control
+   */
+  light: PropTypes.bool,
+
+  /**
+   * Optional callback called when the search value changes.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Optional callback called when the search value is cleared.
+   */
+  onClear: PropTypes.func,
+
+  /**
+   * Provide a handler that is invoked on the key down event for the input
+   */
+  onKeyDown: PropTypes.func,
+
+  /**
+   * Deprecated in favor of `placeholder`
+   */
+  placeHolderText: deprecate(PropTypes.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.string,
+
+  /**
+   * Rendered icon for the Search.
+   * Can be a React component class
+   */
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+
+  /**
+   * Specify the role for the underlying `<input>`, defaults to `searchbox`
+   */
+  role: PropTypes.string,
+
+  /**
+   * Specify the size of the Search
+   */
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+
+  /**
+   * Optional prop to specify the type of the `<input>`
+   */
+  type: PropTypes.string,
+
+  /**
+   * Specify the value of the `<input>`
+   */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+
+function CustomSearchIcon(_ref2) {
+  var icon = _ref2.icon;
+  var prefix = usePrefix();
+
+  if (icon) {
+    return /*#__PURE__*/React__default.cloneElement(icon, {
+      className: "".concat(prefix, "--search-magnifier-icon")
+    });
+  }
+
+  return /*#__PURE__*/React__default.createElement(Search$1, {
+    className: "".concat(prefix, "--search-magnifier-icon")
+  });
+}
+
+CustomSearchIcon.propTypes = {
+  /**
+   * Rendered icon for the Search. Can be a React component class
+   */
+  icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+};
+
+export { Search as default };

package/es/components/SearchFilterButton/SearchFilterButton.js

@@ -0,0 +1,61 @@
+/**
+ * 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 { Filter } from '@carbon/icons-react';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import { warning } from '../../internal/warning.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+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 = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+
+  if (process.env.NODE_ENV !== "production") {
+    process.env.NODE_ENV !== "production" ? 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.createElement("button", _extends({
+    className: "".concat(prefix, "--search-button"),
+    type: "button",
+    "aria-label": labelText,
+    title: labelText
+  }, other), /*#__PURE__*/React__default.createElement(Filter, {
+    className: "".concat(prefix, "--search-filter"),
+    "aria-label": iconDescription
+  }));
+};
+
+SearchFilterButton.propTypes = {
+  /**
+   * The icon description.
+   */
+  iconDescription: PropTypes.string,
+
+  /**
+   * The a11y label text.
+   */
+  labelText: PropTypes.string
+};
+SearchFilterButton.defaultProps = {
+  labelText: 'Search',
+  iconDescription: 'filter'
+};
+var SearchFilterButton$1 = SearchFilterButton;
+
+export { SearchFilterButton$1 as default };

package/es/components/SearchLayoutButton/SearchLayoutButton.js

@@ -0,0 +1,151 @@
+/**
+ * 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 { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, createClass as _createClass } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { ListBulleted, Grid } from '@carbon/icons-react';
+import PropTypes from 'prop-types';
+import React__default, { Component } from 'react';
+import { warning } from '../../internal/warning.js';
+import { PrefixContext } from '../../internal/usePrefix.js';
+
+var didWarnAboutDeprecation = false;
+/**
+ * The layout button for `<Search>`.
+ */
+
+var SearchLayoutButton = /*#__PURE__*/function (_Component) {
+  _inherits(SearchLayoutButton, _Component);
+
+  var _super = _createSuper(SearchLayoutButton);
+
+  function SearchLayoutButton(props) {
+    var _this;
+
+    _classCallCheck(this, SearchLayoutButton);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      format: 'list'
+    });
+
+    _defineProperty(_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(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.
+   */
+
+
+  _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.createElement(ListBulleted, {
+            className: "".concat(prefix, "--search-view"),
+            "aria-label": iconDescriptionList
+          });
+        }
+
+        return /*#__PURE__*/React__default.createElement(Grid, {
+          className: "".concat(prefix, "--search-view"),
+          "aria-label": iconDescriptionGrid
+        });
+      };
+
+      return /*#__PURE__*/React__default.createElement("button", {
+        className: "".concat(prefix, "--search-button"),
+        type: "button",
+        onClick: this.toggleLayout,
+        "aria-label": labelText,
+        title: labelText
+      }, /*#__PURE__*/React__default.createElement("div", {
+        className: "".concat(prefix, "--search__toggle-layout__container")
+      }, /*#__PURE__*/React__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;
+}(Component);
+
+_defineProperty(SearchLayoutButton, "contextType", PrefixContext);
+
+_defineProperty(SearchLayoutButton, "propTypes", {
+  /**
+   * The layout.
+   */
+  format: PropTypes.oneOf(['list', 'grid']),
+
+  /**
+   * The description for the "grid" icon.
+   */
+  iconDescriptionGrid: PropTypes.string,
+
+  /**
+   * The description for the "list" icon.
+   */
+  iconDescriptionList: PropTypes.string,
+
+  /**
+   * The a11y label text.
+   */
+  labelText: PropTypes.string,
+
+  /**
+   * The callback called when layout switches.
+   */
+  onChangeFormat: PropTypes.func
+});
+
+_defineProperty(SearchLayoutButton, "defaultProps", {
+  labelText: 'Filter',
+  iconDescriptionList: 'list',
+  iconDescriptionGrid: 'grid'
+});
+
+var SearchLayoutButton$1 = SearchLayoutButton;
+
+export { SearchLayoutButton$1 as default };

package/es/components/SecondaryButton/SecondaryButton.js

@@ -0,0 +1,20 @@
+/**
+ * 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 { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import Button from '../Button/Button.js';
+
+var SecondaryButton = function SecondaryButton(props) {
+  return /*#__PURE__*/React__default.createElement(Button, _extends({
+    kind: "secondary"
+  }, props));
+};
+
+var SecondaryButton$1 = SecondaryButton;
+
+export { SecondaryButton$1 as default };

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