@carbon/react 0.16.2 → 1.0.0-rc.0

package/es/components/Dropdown/Dropdown.Skeleton.js

@@ -0,0 +1,55 @@
+/**
+ * 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 deprecate from '../../prop-types/deprecate.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
+
+var _excluded = ["className", "size", "inline"];
+
+var DropdownSkeleton = function DropdownSkeleton(_ref) {
+  var _cx;
+
+  var className = _ref.className,
+      size = _ref.size;
+      _ref.inline;
+      var rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var wrapperClasses = cx(className, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--skeleton"), true), _defineProperty(_cx, "".concat(prefix, "--dropdown-v2"), true), _defineProperty(_cx, "".concat(prefix, "--list-box"), true), _defineProperty(_cx, "".concat(prefix, "--form-item"), true), _defineProperty(_cx, "".concat(prefix, "--list-box--").concat(size), size), _cx));
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: wrapperClasses
+  }, rest), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--list-box__field")
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--list-box__label")
+  })));
+};
+
+DropdownSkeleton.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether you want the inline version of this control
+   */
+  inline: deprecate(PropTypes.bool, "The `inline` prop has been deprecated and will\n    be removed in the next major release. To specify the inline variant of Dropdown, please use the `type` prop."),
+
+  /**
+   * Specify the size of the ListBox.
+   */
+  size: ListBoxSize
+};
+var DropdownSkeleton$1 = DropdownSkeleton;
+
+export { DropdownSkeleton$1 as default };

package/es/components/Dropdown/Dropdown.js

@@ -0,0 +1,327 @@
+/**
+ * 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, objectSpread2 as _objectSpread2, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useRef } from 'react';
+import { useSelect } from 'downshift';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import { WarningFilled, WarningAltFilled, Checkmark } from '@carbon/icons-react';
+import '../ListBox/index.js';
+import { mapDownshiftProps } from '../../tools/createPropAdapter.js';
+import mergeRefs from '../../tools/mergeRefs.js';
+import deprecate from '../../prop-types/deprecate.js';
+import { useFeatureFlag } from '../FeatureFlags/index.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+import ListBox from '../ListBox/ListBox.js';
+import { ListBoxSize, ListBoxType } from '../ListBox/ListBoxPropTypes.js';
+
+var _excluded = ["className", "disabled", "direction", "items", "label", "ariaLabel", "itemToString", "itemToElement", "renderSelectedItem", "type", "size", "onChange", "id", "titleText", "hideLabel", "helperText", "translateWithId", "light", "invalid", "invalidText", "warn", "warnText", "initialSelectedItem", "selectedItem", "downshiftProps"];
+
+var defaultItemToString = function defaultItemToString(item) {
+  if (typeof item === 'string') {
+    return item;
+  }
+
+  return item ? item.label : '';
+};
+
+var Dropdown = /*#__PURE__*/React__default.forwardRef(function Dropdown(_ref, ref) {
+  var _cx, _cx2, _cx4;
+
+  var containerClassName = _ref.className,
+      disabled = _ref.disabled,
+      direction = _ref.direction,
+      items = _ref.items,
+      label = _ref.label,
+      ariaLabel = _ref.ariaLabel,
+      itemToString = _ref.itemToString,
+      itemToElement = _ref.itemToElement,
+      renderSelectedItem = _ref.renderSelectedItem,
+      type = _ref.type,
+      size = _ref.size,
+      onChange = _ref.onChange,
+      id = _ref.id,
+      titleText = _ref.titleText,
+      hideLabel = _ref.hideLabel,
+      helperText = _ref.helperText,
+      translateWithId = _ref.translateWithId,
+      light = _ref.light,
+      invalid = _ref.invalid,
+      invalidText = _ref.invalidText,
+      warn = _ref.warn,
+      warnText = _ref.warnText,
+      initialSelectedItem = _ref.initialSelectedItem,
+      controlledSelectedItem = _ref.selectedItem,
+      downshiftProps = _ref.downshiftProps,
+      other = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var selectProps = mapDownshiftProps(_objectSpread2(_objectSpread2({}, downshiftProps), {}, {
+    items: items,
+    itemToString: itemToString,
+    initialSelectedItem: initialSelectedItem,
+    onSelectedItemChange: onSelectedItemChange
+  })); // only set selectedItem if the prop is defined. Setting if it is undefined
+  // will overwrite default selected items from useSelect
+
+  if (controlledSelectedItem !== undefined) {
+    selectProps.selectedItem = controlledSelectedItem;
+  }
+
+  var _useSelect = useSelect(selectProps),
+      isOpen = _useSelect.isOpen,
+      getToggleButtonProps = _useSelect.getToggleButtonProps,
+      getLabelProps = _useSelect.getLabelProps,
+      getMenuProps = _useSelect.getMenuProps,
+      getItemProps = _useSelect.getItemProps,
+      highlightedIndex = _useSelect.highlightedIndex,
+      selectedItem = _useSelect.selectedItem;
+
+  var inline = type === 'inline';
+  var showWarning = !invalid && warn;
+  var enabled = useFeatureFlag('enable-v11-release');
+  var className = cx("".concat(prefix, "--dropdown"), [enabled ? null : containerClassName], (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--dropdown--invalid"), invalid), _defineProperty(_cx, "".concat(prefix, "--dropdown--warning"), showWarning), _defineProperty(_cx, "".concat(prefix, "--dropdown--open"), isOpen), _defineProperty(_cx, "".concat(prefix, "--dropdown--inline"), inline), _defineProperty(_cx, "".concat(prefix, "--dropdown--disabled"), disabled), _defineProperty(_cx, "".concat(prefix, "--dropdown--light"), light), _defineProperty(_cx, "".concat(prefix, "--dropdown--").concat(size), size), _defineProperty(_cx, "".concat(prefix, "--list-box--up"), direction === 'top'), _cx));
+  var titleClasses = cx("".concat(prefix, "--label"), (_cx2 = {}, _defineProperty(_cx2, "".concat(prefix, "--label--disabled"), disabled), _defineProperty(_cx2, "".concat(prefix, "--visually-hidden"), hideLabel), _cx2));
+  var helperClasses = cx("".concat(prefix, "--form__helper-text"), _defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
+  var wrapperClasses = cx("".concat(prefix, "--dropdown__wrapper"), "".concat(prefix, "--list-box__wrapper"), [enabled ? containerClassName : null], (_cx4 = {}, _defineProperty(_cx4, "".concat(prefix, "--dropdown__wrapper--inline"), inline), _defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--inline"), inline), _defineProperty(_cx4, "".concat(prefix, "--dropdown__wrapper--inline--invalid"), inline && invalid), _defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--inline--invalid"), inline && invalid), _cx4)); // needs to be Capitalized for react to render it correctly
+
+  var ItemToElement = itemToElement;
+  var toggleButtonProps = getToggleButtonProps();
+  var helper = helperText ? /*#__PURE__*/React__default.createElement("div", {
+    className: helperClasses
+  }, helperText) : null;
+
+  function onSelectedItemChange(_ref2) {
+    var selectedItem = _ref2.selectedItem;
+
+    if (onChange) {
+      onChange({
+        selectedItem: selectedItem
+      });
+    }
+  }
+
+  var menuItemOptionRefs = useRef(items.map(function (_) {
+    return /*#__PURE__*/React__default.createRef();
+  }));
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: wrapperClasses
+  }, other), titleText && /*#__PURE__*/React__default.createElement("label", _extends({
+    className: titleClasses
+  }, getLabelProps()), titleText), /*#__PURE__*/React__default.createElement(ListBox, {
+    "aria-label": ariaLabel,
+    size: size,
+    className: className,
+    invalid: invalid,
+    invalidText: invalidText,
+    warn: warn,
+    warnText: warnText,
+    light: light,
+    isOpen: isOpen,
+    id: id
+  }, invalid && /*#__PURE__*/React__default.createElement(WarningFilled, {
+    className: "".concat(prefix, "--list-box__invalid-icon")
+  }), showWarning && /*#__PURE__*/React__default.createElement(WarningAltFilled, {
+    className: "".concat(prefix, "--list-box__invalid-icon ").concat(prefix, "--list-box__invalid-icon--warning")
+  }), /*#__PURE__*/React__default.createElement("button", _extends({
+    type: "button",
+    className: "".concat(prefix, "--list-box__field"),
+    disabled: disabled,
+    "aria-disabled": disabled,
+    title: selectedItem ? itemToString(selectedItem) : label
+  }, toggleButtonProps, {
+    ref: mergeRefs(toggleButtonProps.ref, ref)
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--list-box__label")
+  }, selectedItem ? renderSelectedItem ? renderSelectedItem(selectedItem) : itemToString(selectedItem) : label), /*#__PURE__*/React__default.createElement(ListBox.MenuIcon, {
+    isOpen: isOpen,
+    translateWithId: translateWithId
+  })), /*#__PURE__*/React__default.createElement(ListBox.Menu, getMenuProps(), isOpen && items.map(function (item, index) {
+    var _menuItemOptionRefs$c;
+
+    var itemProps = getItemProps({
+      item: item,
+      index: index,
+      disabled: item.disabled
+    });
+    var title = itemToElement ? item.text : itemToString(item);
+
+    var _ref3 = (menuItemOptionRefs === null || menuItemOptionRefs === void 0 ? void 0 : (_menuItemOptionRefs$c = menuItemOptionRefs.current[index]) === null || _menuItemOptionRefs$c === void 0 ? void 0 : _menuItemOptionRefs$c.current) || {},
+        offsetWidth = _ref3.offsetWidth,
+        scrollWidth = _ref3.scrollWidth;
+
+    return /*#__PURE__*/React__default.createElement(ListBox.MenuItem, _extends({
+      key: itemProps.id,
+      isActive: selectedItem === item,
+      isHighlighted: highlightedIndex === index || selectedItem === item,
+      title: offsetWidth < scrollWidth && title || undefined,
+      ref: {
+        menuItemOptionRef: menuItemOptionRefs.current[index]
+      }
+    }, itemProps), itemToElement ? /*#__PURE__*/React__default.createElement(ItemToElement, _extends({
+      key: itemProps.id
+    }, item)) : itemToString(item), selectedItem === item && /*#__PURE__*/React__default.createElement(Checkmark, {
+      className: "".concat(prefix, "--list-box__menu-item__selected-icon")
+    }));
+  }))), !inline && !invalid && !warn && helper);
+});
+Dropdown.displayName = 'Dropdown';
+Dropdown.propTypes = {
+  /**
+   * 'aria-label' of the ListBox component.
+   */
+  ariaLabel: PropTypes.string,
+
+  /**
+   * Provide a custom className to be applied on the bx--dropdown node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify the direction of the dropdown. Can be either top or bottom.
+   */
+  direction: PropTypes.oneOf(['top', 'bottom']),
+
+  /**
+   * Disable the control
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Additional props passed to Downshift
+   */
+  downshiftProps: PropTypes.object,
+
+  /**
+   * Provide helper text that is used alongside the control label for
+   * additional help
+   */
+  helperText: PropTypes.node,
+
+  /**
+   * Specify whether the title text should be hidden or not
+   */
+  hideLabel: PropTypes.bool,
+
+  /**
+   * Specify a custom `id`
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * Allow users to pass in an arbitrary item or a string (in case their items are an array of strings)
+   * from their collection that are pre-selected
+   */
+  initialSelectedItem: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.number]),
+
+  /**
+   * Specify whether you want the inline version of this control
+   */
+  inline: deprecate(PropTypes.bool, "The `inline` prop has been deprecated and will\n    be removed in the next major release. To specify the inline variant of Dropdown, please use the `type` prop."),
+
+  /**
+   * Specify if the currently selected value is invalid.
+   */
+  invalid: PropTypes.bool,
+
+  /**
+   * Message which is displayed if the value is invalid.
+   */
+  invalidText: PropTypes.node,
+
+  /**
+   * Function to render items as custom components instead of strings.
+   * Defaults to null and is overridden by a getter
+   */
+  itemToElement: PropTypes.func,
+
+  /**
+   * Helper function passed to downshift that allows the library to render a
+   * given item to a string label. By default, it extracts the `label` field
+   * from a given item to serve as the item label in the list.
+   */
+  itemToString: PropTypes.func,
+
+  /**
+   * We try to stay as generic as possible here to allow individuals to pass
+   * in a collection of whatever kind of data structure they prefer
+   */
+  items: PropTypes.array.isRequired,
+
+  /**
+   * Generic `label` that will be used as the textual representation of what
+   * this field is for
+   */
+  label: PropTypes.node.isRequired,
+
+  /**
+   * `true` to use the light version.
+   */
+  light: PropTypes.bool,
+
+  /**
+   * `onChange` is a utility for this controlled component to communicate to a
+   * consuming component what kind of internal state changes are occurring.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * An optional callback to render the currently selected item as a react element instead of only
+   * as a string.
+   */
+  renderSelectedItem: PropTypes.func,
+
+  /**
+   * In the case you want to control the dropdown selection entirely.
+   */
+  selectedItem: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.number]),
+
+  /**
+   * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
+   */
+  size: ListBoxSize,
+
+  /**
+   * Provide the title text that will be read by a screen reader when
+   * visiting this control
+   */
+  titleText: PropTypes.node,
+
+  /**
+   * Callback function for translating ListBoxMenuIcon SVG title
+   */
+  translateWithId: PropTypes.func,
+
+  /**
+   * The dropdown type, `default` or `inline`
+   */
+  type: ListBoxType,
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  warnText: PropTypes.node
+};
+Dropdown.defaultProps = {
+  disabled: false,
+  type: 'default',
+  itemToString: defaultItemToString,
+  itemToElement: null,
+  light: false,
+  titleText: '',
+  helperText: '',
+  direction: 'bottom'
+};
+var Dropdown$1 = Dropdown;
+
+export { Dropdown$1 as default };

package/es/components/ErrorBoundary/ErrorBoundary.js

@@ -0,0 +1,96 @@
+/**
+ * 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 React__default from 'react';
+import PropTypes from 'prop-types';
+import { ErrorBoundaryContext } from './ErrorBoundaryContext.js';
+
+/**
+ * React introduced additional lifecycle methods in v16 for capturing errors
+ * that occur in a specific sub-tree of components. This component helps to
+ * consolidate some of the duplication that occurs when using these lifecycle
+ * methods across a codebase. In addition, it allows you to specify the fallback
+ * UI to display when an error occurs in the sub-tree through the `fallback`
+ * prop.
+ *
+ * This component roughly follows the React.js docs example code for these
+ * methods. In addition, it takes advantage of an `ErrorBoundaryContext` so that
+ * consumers can specify their own logic for logging errors. For example,
+ * reporting an error in the UI to an external service for every `ErrorBoundary`
+ * used.
+ *
+ * Reference:
+ * https://reactjs.org/docs/error-boundaries.html#introducing-error-boundaries
+ */
+
+var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  _inherits(ErrorBoundary, _React$Component);
+
+  var _super = _createSuper(ErrorBoundary);
+
+  function ErrorBoundary() {
+    var _this;
+
+    _classCallCheck(this, ErrorBoundary);
+
+    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", {
+      hasError: false
+    });
+
+    return _this;
+  }
+
+  _createClass(ErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error, info) {
+      this.context.log(error, info);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.children !== this.props.children) {
+        this.setState({
+          hasError: false
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      if (this.state.hasError) {
+        return this.props.fallback;
+      }
+
+      return this.props.children;
+    }
+  }], [{
+    key: "getDerivedStateFromError",
+    value: function getDerivedStateFromError() {
+      return {
+        hasError: true
+      };
+    }
+  }]);
+
+  return ErrorBoundary;
+}(React__default.Component);
+
+_defineProperty(ErrorBoundary, "propTypes", {
+  children: PropTypes.node,
+  fallback: PropTypes.node
+});
+
+_defineProperty(ErrorBoundary, "contextType", ErrorBoundaryContext);
+
+export { ErrorBoundary as default };

package/es/components/ErrorBoundary/ErrorBoundaryContext.js

@@ -0,0 +1,16 @@
+/**
+ * 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 ErrorBoundaryContext = /*#__PURE__*/createContext({
+  log: function log(error, info) {
+    console.log(info.componentStack);
+  }
+});
+
+export { ErrorBoundaryContext };

package/es/components/ExpandableSearch/ExpandableSearch.js

@@ -0,0 +1,67 @@
+/**
+ * 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 { slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useState, useRef, useEffect } from 'react';
+import cx from 'classnames';
+import Search from '../Search/index.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+function ExpandableSearch(props) {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      expanded = _useState2[0],
+      setExpanded = _useState2[1];
+
+  var searchRef = useRef(null);
+  var prefix = usePrefix();
+
+  function handleFocus() {
+    if (!expanded) {
+      setExpanded(true);
+    }
+  }
+
+  function handleBlur(evt) {
+    var relatedTargetIsAllowed = evt.relatedTarget && evt.relatedTarget.classList.contains("".concat(prefix, "--search-close"));
+
+    if (expanded && !relatedTargetIsAllowed && !searchRef.current.state.hasContent) {
+      setExpanded(false);
+    }
+  }
+
+  useEffect(function () {
+    var _searchRef$current2;
+
+    function focusInput() {
+      var _searchRef$current;
+
+      if (!expanded && (_searchRef$current = searchRef.current) !== null && _searchRef$current !== void 0 && _searchRef$current.input) {
+        searchRef.current.input.focus();
+      }
+    }
+
+    if ((_searchRef$current2 = searchRef.current) !== null && _searchRef$current2 !== void 0 && _searchRef$current2.magnifier) {
+      var magnifier = searchRef.current.magnifier;
+      magnifier.addEventListener('click', focusInput);
+      return function () {
+        magnifier.removeEventListener('click', focusInput);
+      };
+    }
+  }, [expanded, searchRef]);
+  var classes = cx("".concat(prefix, "--search--expandable"), _defineProperty({}, "".concat(prefix, "--search--expanded"), expanded), props.className);
+  return /*#__PURE__*/React__default.createElement(Search, _extends({}, props, {
+    ref: searchRef,
+    className: classes,
+    onFocus: handleFocus,
+    onBlur: handleBlur
+  }));
+}
+
+ExpandableSearch.propTypes = Search.propTypes;
+
+export { ExpandableSearch as default };

package/es/components/ExpandableSearch/index.js

@@ -0,0 +1,9 @@
+/**
+ * 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 ExpandableSearch from './ExpandableSearch.js';
+export { default } from './ExpandableSearch.js';