@carbon/react 0.17.0-rc.0 → 1.0.0

package/es/components/Button/Button.js

@@ -0,0 +1,289 @@
+/**
+ * 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, objectSpread2 as _objectSpread2, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default, { useRef } from 'react';
+import cx from 'classnames';
+import { ButtonKinds } from '../../prop-types/types.js';
+import { IconButton } from '../IconButton/index.js';
+import { composeEventHandlers } from '../../tools/events.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { useId } from '../../internal/useId.js';
+
+var _excluded = ["as", "children", "className", "dangerDescription", "disabled", "hasIconOnly", "href", "iconDescription", "isExpressive", "isSelected", "kind", "onBlur", "onClick", "onFocus", "onMouseEnter", "onMouseLeave", "renderIcon", "size", "tabIndex", "tooltipAlignment", "tooltipPosition", "type"];
+var Button = /*#__PURE__*/React__default.forwardRef(function Button(_ref, ref) {
+  var _classNames;
+
+  var as = _ref.as,
+      children = _ref.children,
+      className = _ref.className,
+      _ref$dangerDescriptio = _ref.dangerDescription,
+      dangerDescription = _ref$dangerDescriptio === void 0 ? 'danger' : _ref$dangerDescriptio,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$hasIconOnly = _ref.hasIconOnly,
+      hasIconOnly = _ref$hasIconOnly === void 0 ? false : _ref$hasIconOnly,
+      href = _ref.href,
+      iconDescription = _ref.iconDescription,
+      _ref$isExpressive = _ref.isExpressive,
+      isExpressive = _ref$isExpressive === void 0 ? false : _ref$isExpressive,
+      isSelected = _ref.isSelected,
+      _ref$kind = _ref.kind,
+      kind = _ref$kind === void 0 ? 'primary' : _ref$kind,
+      onBlur = _ref.onBlur,
+      onClick = _ref.onClick,
+      onFocus = _ref.onFocus,
+      onMouseEnter = _ref.onMouseEnter,
+      onMouseLeave = _ref.onMouseLeave,
+      ButtonImageElement = _ref.renderIcon,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'lg' : _ref$size,
+      _ref$tabIndex = _ref.tabIndex,
+      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
+      _ref$tooltipAlignment = _ref.tooltipAlignment,
+      tooltipAlignment = _ref$tooltipAlignment === void 0 ? 'center' : _ref$tooltipAlignment,
+      _ref$tooltipPosition = _ref.tooltipPosition,
+      tooltipPosition = _ref$tooltipPosition === void 0 ? 'top' : _ref$tooltipPosition,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'button' : _ref$type,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var tooltipRef = useRef(null);
+  var prefix = usePrefix();
+
+  var handleClick = function handleClick(evt) {
+    // Prevent clicks on the tooltip from triggering the button click event
+    if (evt.target === tooltipRef.current) {
+      evt.preventDefault();
+      return;
+    }
+  };
+
+  var buttonClasses = cx(className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--btn"), true), _defineProperty(_classNames, "".concat(prefix, "--btn--sm"), size === 'sm' && !isExpressive), _defineProperty(_classNames, "".concat(prefix, "--btn--md"), size === 'md' && !isExpressive), _defineProperty(_classNames, "".concat(prefix, "--btn--xl"), size === 'xl'), _defineProperty(_classNames, "".concat(prefix, "--btn--2xl"), size === '2xl'), _defineProperty(_classNames, "".concat(prefix, "--btn--").concat(kind), kind), _defineProperty(_classNames, "".concat(prefix, "--btn--disabled"), disabled), _defineProperty(_classNames, "".concat(prefix, "--btn--expressive"), isExpressive), _defineProperty(_classNames, "".concat(prefix, "--btn--icon-only"), hasIconOnly), _defineProperty(_classNames, "".concat(prefix, "--btn--selected"), hasIconOnly && isSelected && kind === 'ghost'), _classNames));
+  var commonProps = {
+    tabIndex: tabIndex,
+    className: buttonClasses,
+    ref: ref
+  };
+  var buttonImage = !ButtonImageElement ? null : /*#__PURE__*/React__default.createElement(ButtonImageElement, {
+    "aria-label": iconDescription,
+    className: "".concat(prefix, "--btn__icon"),
+    "aria-hidden": "true"
+  });
+  var iconOnlyImage = !ButtonImageElement ? null : /*#__PURE__*/React__default.createElement(ButtonImageElement, null);
+  var dangerButtonVariants = ['danger', 'danger--tertiary', 'danger--ghost'];
+  var component = 'button';
+  var assistiveId = useId('danger-description');
+  var otherProps = {
+    disabled: disabled,
+    type: type,
+    'aria-describedby': dangerButtonVariants.includes(kind) ? assistiveId : null,
+    'aria-pressed': hasIconOnly && kind === 'ghost' ? isSelected : null
+  };
+  var anchorProps = {
+    href: href
+  };
+  var assistiveText;
+
+  if (dangerButtonVariants.includes(kind)) {
+    assistiveText = /*#__PURE__*/React__default.createElement("span", {
+      id: assistiveId,
+      className: "".concat(prefix, "--visually-hidden")
+    }, dangerDescription);
+  } else {
+    assistiveText = null;
+  }
+
+  if (as) {
+    component = as;
+    otherProps = _objectSpread2(_objectSpread2({}, otherProps), anchorProps);
+  } else if (href && !disabled) {
+    component = 'a';
+    otherProps = anchorProps;
+  }
+
+  var Button = /*#__PURE__*/React__default.createElement(component, _objectSpread2(_objectSpread2(_objectSpread2({
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onClick: onClick
+  }, rest), commonProps), otherProps), assistiveText, children, buttonImage);
+
+  if (hasIconOnly) {
+    var align;
+
+    if (tooltipPosition === 'top' || tooltipPosition === 'bottom') {
+      if (tooltipAlignment === 'center') {
+        align = tooltipPosition;
+      }
+
+      if (tooltipAlignment === 'end') {
+        align = "".concat(tooltipPosition, "-right");
+      }
+
+      if (tooltipAlignment === 'start') {
+        align = "".concat(tooltipPosition, "-left");
+      }
+    }
+
+    if (tooltipPosition === 'right' || tooltipPosition === 'left') {
+      align = tooltipPosition;
+    }
+
+    return /*#__PURE__*/React__default.createElement(IconButton, _extends({
+      align: align,
+      label: iconDescription,
+      kind: kind,
+      size: size,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      onClick: composeEventHandlers([onClick, handleClick])
+    }, rest, commonProps, otherProps), iconOnlyImage ? iconOnlyImage : children);
+  }
+
+  return Button;
+});
+Button.displayName = 'Button';
+Button.propTypes = {
+  /**
+   * Specify how the button itself should be rendered.
+   * Make sure to apply all props to the root node and render children appropriately
+   */
+  as: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.elementType]),
+
+  /**
+   * Specify the content of your Button
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be added to your Button
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify the message read by screen readers for the danger button variant
+   */
+  dangerDescription: PropTypes.string,
+
+  /**
+   * Specify whether the Button should be disabled, or not
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Specify if the button is an icon-only button
+   */
+  hasIconOnly: PropTypes.bool,
+
+  /**
+   * Optionally specify an href for your Button to become an `<a>` element
+   */
+  href: PropTypes.string,
+
+  /**
+   * If specifying the `renderIcon` prop, provide a description for that icon that can
+   * be read by screen readers
+   */
+  iconDescription: function iconDescription(props) {
+    if (props.renderIcon && !props.children && !props.iconDescription) {
+      return new Error('renderIcon property specified without also providing an iconDescription property.');
+    }
+
+    return undefined;
+  },
+
+  /**
+   * Specify whether the Button is expressive, or not
+   */
+  isExpressive: PropTypes.bool,
+
+  /**
+   * Specify whether the Button is currently selected. Only applies to the Ghost variant.
+   */
+  isSelected: PropTypes.bool,
+
+  /**
+   * Specify the kind of Button you want to create
+   */
+  kind: PropTypes.oneOf(ButtonKinds),
+
+  /**
+   * Provide an optional function to be called when the button element
+   * loses focus
+   */
+  onBlur: PropTypes.func,
+
+  /**
+   * Provide an optional function to be called when the button element
+   * is clicked
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Provide an optional function to be called when the button element
+   * receives focus
+   */
+  onFocus: PropTypes.func,
+
+  /**
+   * Provide an optional function to be called when the mouse
+   * enters the button element
+   */
+  onMouseEnter: PropTypes.func,
+
+  /**
+   * Provide an optional function to be called when the mouse
+   * leaves the button element
+   */
+  onMouseLeave: PropTypes.func,
+
+  /**
+   * Optional prop to allow overriding the icon rendering.
+   * Can be a React component class
+   */
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+
+  /**
+   * Optional prop to specify the role of the Button
+   */
+  role: PropTypes.string,
+
+  /**
+   * Specify the size of the button, from the following list of sizes:
+   */
+  size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl', '2xl']),
+
+  /**
+   * Optional prop to specify the tabIndex of the Button
+   */
+  tabIndex: PropTypes.number,
+
+  /**
+   * Specify the alignment of the tooltip to the icon-only button.
+   * Can be one of: start, center, or end.
+   */
+  tooltipAlignment: PropTypes.oneOf(['start', 'center', 'end']),
+
+  /**
+   * Specify the direction of the tooltip for icon-only buttons.
+   * Can be either top, right, bottom, or left.
+   */
+  tooltipPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+
+  /**
+   * Optional prop to specify the type of the Button
+   */
+  type: PropTypes.oneOf(['button', 'reset', 'submit'])
+};
+var Button$1 = Button;
+
+export { Button$1 as default };

package/es/components/ButtonSet/ButtonSet.js

@@ -0,0 +1,48 @@
+/**
+ * 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 React__default from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _excluded = ["children", "className", "stacked"];
+var ButtonSet = /*#__PURE__*/React__default.forwardRef(function ButtonSet(_ref, ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      stacked = _ref.stacked,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var buttonSetClasses = cx(className, "".concat(prefix, "--btn-set"), _defineProperty({}, "".concat(prefix, "--btn-set--stacked"), stacked));
+  return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
+    className: buttonSetClasses,
+    ref: ref
+  }), children);
+});
+ButtonSet.displayName = 'ButtonSet';
+ButtonSet.propTypes = {
+  /**
+   * Specify the content of your ButtonSet
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be added to your ButtonSet
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify the button arrangement of the set (vertically stacked or
+   * horizontal)
+   */
+  stacked: PropTypes.bool
+};
+var ButtonSet$1 = ButtonSet;
+
+export { ButtonSet$1 as default };

package/es/components/Checkbox/Checkbox.Skeleton.js

@@ -0,0 +1,36 @@
+/**
+ * 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 = ["className"];
+
+var CheckboxSkeleton = function CheckboxSkeleton(_ref) {
+  var className = _ref.className,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: cx("".concat(prefix, "--form-item"), "".concat(prefix, "--checkbox-wrapper"), "".concat(prefix, "--checkbox-label"), className)
+  }, rest), /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--checkbox-label-text ").concat(prefix, "--skeleton")
+  }));
+};
+
+CheckboxSkeleton.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes.string
+};
+var CheckboxSkeleton$1 = CheckboxSkeleton;
+
+export { CheckboxSkeleton$1 as default };

package/es/components/Checkbox/Checkbox.js

@@ -0,0 +1,123 @@
+/**
+ * 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 '../Text/index.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { Text } from '../Text/Text.js';
+
+var _excluded = ["className", "id", "labelText", "onChange", "indeterminate", "hideLabel", "title"];
+var Checkbox = /*#__PURE__*/React__default.forwardRef(function Checkbox(_ref, _ref2) {
+  var className = _ref.className,
+      id = _ref.id,
+      labelText = _ref.labelText,
+      _onChange = _ref.onChange,
+      indeterminate = _ref.indeterminate,
+      hideLabel = _ref.hideLabel,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '' : _ref$title,
+      other = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var labelClasses = cx("".concat(prefix, "--checkbox-label"), [className]);
+  var innerLabelClasses = cx("".concat(prefix, "--checkbox-label-text"), _defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
+  var wrapperClasses = cx("".concat(prefix, "--form-item"), "".concat(prefix, "--checkbox-wrapper"), [className]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: wrapperClasses
+  }, /*#__PURE__*/React__default.createElement("input", _extends({}, other, {
+    type: "checkbox",
+    onChange: function onChange(evt) {
+      _onChange(evt, {
+        checked: evt.target.checked,
+        id: id
+      });
+    },
+    className: "".concat(prefix, "--checkbox"),
+    id: id,
+    ref: function ref(el) {
+      if (el) {
+        el.indeterminate = indeterminate;
+      }
+
+      if (typeof _ref2 === 'function') {
+        _ref2(el);
+      } else if (Object(_ref2) === _ref2) {
+        _ref2.current = el;
+      }
+    }
+  })), /*#__PURE__*/React__default.createElement("label", {
+    htmlFor: id,
+    className: labelClasses,
+    title: title || null
+  }, /*#__PURE__*/React__default.createElement(Text, {
+    className: innerLabelClasses
+  }, labelText)));
+});
+Checkbox.propTypes = {
+  /**
+   * Specify whether the underlying input should be checked
+   */
+  checked: PropTypes.bool,
+
+  /**
+   * Specify an optional className to be applied to the <label> node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether the underlying input should be checked by default
+   */
+  defaultChecked: PropTypes.bool,
+
+  /**
+   * Specify whether the Checkbox should be disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Specify whether the label should be hidden, or not
+   */
+  hideLabel: PropTypes.bool,
+
+  /**
+   * Provide an `id` to uniquely identify the Checkbox input
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * Specify whether the Checkbox is in an indeterminate state
+   */
+  indeterminate: PropTypes.bool,
+
+  /**
+   * Provide a label to provide a description of the Checkbox input that you are
+   * exposing to the user
+   */
+  labelText: PropTypes.node.isRequired,
+
+  /**
+   * Receives three arguments: true/false, the checkbox's id, and the dom event.
+   * `(value, id, event) => console.log({value, id, event})`
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Specify a title for the <label> node for the Checkbox
+   */
+  title: PropTypes.string
+};
+Checkbox.defaultProps = {
+  onChange: function onChange() {},
+  indeterminate: false
+};
+Checkbox.displayName = 'Checkbox';
+var Checkbox$1 = Checkbox;
+
+export { Checkbox$1 as default };

package/es/components/CodeSnippet/CodeSnippet.Skeleton.js

@@ -0,0 +1,58 @@
+/**
+ * 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 cx from 'classnames';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _span, _span2, _span3, _span4;
+
+var _excluded = ["className", "type"];
+
+function CodeSnippetSkeleton(_ref) {
+  var _cx;
+
+  var containerClassName = _ref.className,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'single' : _ref$type,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var className = cx(containerClassName, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--snippet"), true), _defineProperty(_cx, "".concat(prefix, "--skeleton"), true), _defineProperty(_cx, "".concat(prefix, "--snippet--single"), type === 'single'), _defineProperty(_cx, "".concat(prefix, "--snippet--multi"), type === 'multi'), _cx));
+
+  if (type === 'single') {
+    return /*#__PURE__*/React__default.createElement("div", _extends({
+      className: className
+    }, rest), /*#__PURE__*/React__default.createElement("div", {
+      className: "".concat(prefix, "--snippet-container")
+    }, _span || (_span = /*#__PURE__*/React__default.createElement("span", null))));
+  }
+
+  if (type === 'multi') {
+    return /*#__PURE__*/React__default.createElement("div", _extends({
+      className: className
+    }, rest), /*#__PURE__*/React__default.createElement("div", {
+      className: "".concat(prefix, "--snippet-container")
+    }, _span2 || (_span2 = /*#__PURE__*/React__default.createElement("span", null)), _span3 || (_span3 = /*#__PURE__*/React__default.createElement("span", null)), _span4 || (_span4 = /*#__PURE__*/React__default.createElement("span", null))));
+  }
+}
+
+CodeSnippetSkeleton.propTypes = {
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes.string,
+
+  /**
+   * The type of the code snippet, including single or multi
+   */
+  type: PropTypes.oneOf(['single', 'multi'])
+};
+
+export { CodeSnippetSkeleton as default };