@carbon/react 0.17.0-rc.0 → 1.0.0

package/es/components/Tabs/next/usePressable.js

@@ -0,0 +1,145 @@
+/**
+ * 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 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { useRef, useState, useEffect } from 'react';
+
+function usePressable(ref) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      onPress = _ref.onPress,
+      onPressIn = _ref.onPressIn,
+      onPressOut = _ref.onPressOut,
+      onLongPress = _ref.onLongPress,
+      _ref$delayLongPressMs = _ref.delayLongPressMs,
+      delayLongPressMs = _ref$delayLongPressMs === void 0 ? 500 : _ref$delayLongPressMs;
+
+  var savedOnPress = useRef(onPress);
+  var savedOnPressIn = useRef(onPressIn);
+  var savedOnPressOut = useRef(onPressOut);
+  var savedOnLongPress = useRef(onLongPress);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      pendingLongPress = _useState2[0],
+      setPendingLongPress = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      longPress = _useState4[0],
+      setLongPress = _useState4[1];
+
+  var state = useRef({
+    longPress: false
+  });
+  useEffect(function () {
+    savedOnPress.current = onPress;
+  }, [onPress]);
+  useEffect(function () {
+    savedOnPressIn.current = onPressIn;
+  }, [onPressIn]);
+  useEffect(function () {
+    savedOnPressOut.current = onPressOut;
+  }, [onPressOut]);
+  useEffect(function () {
+    savedOnLongPress.current = onLongPress;
+  }, [onLongPress]);
+  useEffect(function () {
+    var element = ref.current; // Fired when a pointer becomes active buttons state.
+
+    function onPointerDown(event) {
+      var _savedOnPressIn$curre;
+
+      setPendingLongPress(true);
+      (_savedOnPressIn$curre = savedOnPressIn.current) === null || _savedOnPressIn$curre === void 0 ? void 0 : _savedOnPressIn$curre.call(savedOnPressIn);
+      event.preventDefault();
+    } // Fired when a pointer is no longer active buttons state.
+
+
+    function onPointerUp() {
+      var _savedOnPressOut$curr;
+
+      setPendingLongPress(false);
+      setLongPress(false);
+      (_savedOnPressOut$curr = savedOnPressOut.current) === null || _savedOnPressOut$curr === void 0 ? void 0 : _savedOnPressOut$curr.call(savedOnPressOut, state.current);
+    } // A browser fires this event if it concludes the pointer
+    // will no longer be able to generate events (for example
+    // the related device is deactivated).
+
+
+    function onPointerCancel() {
+      var _savedOnPressOut$curr2;
+
+      setPendingLongPress(false);
+      setLongPress(false);
+      (_savedOnPressOut$curr2 = savedOnPressOut.current) === null || _savedOnPressOut$curr2 === void 0 ? void 0 : _savedOnPressOut$curr2.call(savedOnPressOut);
+      state.current.longPress = false;
+    } // Fired when a pointer is moved out of the hit test
+    // boundaries of an element. For pen devices, this event
+    // is fired when the stylus leaves the hover range
+    // detectable by the digitizer.
+
+
+    function onPointerLeave() {
+      var _savedOnPressOut$curr3;
+
+      setPendingLongPress(false);
+      setLongPress(false);
+      (_savedOnPressOut$curr3 = savedOnPressOut.current) === null || _savedOnPressOut$curr3 === void 0 ? void 0 : _savedOnPressOut$curr3.call(savedOnPressOut);
+      state.current.longPress = false;
+    }
+
+    function onClick() {
+      var _savedOnPress$current;
+
+      setLongPress(false);
+      setPendingLongPress(false);
+      (_savedOnPress$current = savedOnPress.current) === null || _savedOnPress$current === void 0 ? void 0 : _savedOnPress$current.call(savedOnPress, state.current);
+      state.current.longPress = false;
+    } // Certain devices treat long press events as context menu triggers
+
+
+    function onContextMenu(event) {
+      event.preventDefault();
+    }
+
+    element.addEventListener('pointerdown', onPointerDown);
+    element.addEventListener('pointerup', onPointerUp);
+    element.addEventListener('pointercancel', onPointerCancel);
+    element.addEventListener('pointerleave', onPointerLeave);
+    element.addEventListener('click', onClick);
+    element.addEventListener('contextmenu', onContextMenu);
+    return function () {
+      element.removeEventListener('pointerdown', onPointerDown);
+      element.removeEventListener('pointerup', onPointerUp);
+      element.removeEventListener('pointercancel', onPointerCancel);
+      element.removeEventListener('pointerleave', onPointerLeave);
+      element.removeEventListener('click', onClick);
+      element.removeEventListener('contextmenu', onContextMenu);
+    };
+  }, [ref]);
+  useEffect(function () {
+    if (pendingLongPress) {
+      var timeoutId = setTimeout(function () {
+        setPendingLongPress(false);
+        setLongPress(true);
+      }, delayLongPressMs);
+      return function () {
+        clearTimeout(timeoutId);
+      };
+    }
+  }, [pendingLongPress, delayLongPressMs]);
+  useEffect(function () {
+    if (longPress) {
+      var _savedOnLongPress$cur;
+
+      state.current.longPress = true;
+      return (_savedOnLongPress$cur = savedOnLongPress.current) === null || _savedOnLongPress$cur === void 0 ? void 0 : _savedOnLongPress$cur.call(savedOnLongPress);
+    }
+  }, [longPress]);
+}
+
+export { usePressable };

package/es/components/Tag/Tag.Skeleton.js

@@ -0,0 +1,40 @@
+/**
+ * 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, defineProperty as _defineProperty } 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", "size"];
+
+function TagSkeleton(_ref) {
+  var className = _ref.className,
+      size = _ref.size,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  return /*#__PURE__*/React__default.createElement("span", _extends({
+    className: cx("".concat(prefix, "--tag"), "".concat(prefix, "--skeleton"), className, _defineProperty({}, "".concat(prefix, "--tag--").concat(size), size))
+  }, rest));
+}
+
+TagSkeleton.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify the size of the Tag. Currently supports either `sm` or
+   * default sizes.
+   */
+  size: PropTypes.oneOf(['sm'])
+};
+
+export { TagSkeleton as default };

package/es/components/Tag/Tag.js

@@ -0,0 +1,146 @@
+/**
+ * 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 { Close } from '@carbon/icons-react';
+import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _Close;
+
+var _excluded = ["children", "className", "id", "type", "filter", "renderIcon", "title", "disabled", "onClose", "size"];
+var getInstanceId = setupGetInstanceId();
+var TYPES = {
+  red: 'Red',
+  magenta: 'Magenta',
+  purple: 'Purple',
+  blue: 'Blue',
+  cyan: 'Cyan',
+  teal: 'Teal',
+  green: 'Green',
+  gray: 'Gray',
+  'cool-gray': 'Cool-Gray',
+  'warm-gray': 'Warm-Gray',
+  'high-contrast': 'High-Contrast',
+  outline: 'Outline'
+};
+
+var Tag = function Tag(_ref) {
+  var _classNames;
+
+  var children = _ref.children,
+      className = _ref.className,
+      id = _ref.id,
+      type = _ref.type,
+      filter = _ref.filter,
+      CustomIconElement = _ref.renderIcon,
+      title = _ref.title,
+      disabled = _ref.disabled,
+      onClose = _ref.onClose,
+      size = _ref.size,
+      other = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var tagId = id || "tag-".concat(getInstanceId());
+  var tagClasses = cx("".concat(prefix, "--tag"), className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--tag--disabled"), disabled), _defineProperty(_classNames, "".concat(prefix, "--tag--filter"), filter), _defineProperty(_classNames, "".concat(prefix, "--tag--").concat(size), size), _defineProperty(_classNames, "".concat(prefix, "--tag--").concat(type), type), _defineProperty(_classNames, "".concat(prefix, "--tag--interactive"), other.onClick && !filter), _classNames));
+
+  var handleClose = function handleClose(event) {
+    if (onClose) {
+      event.stopPropagation();
+      onClose(event);
+    }
+  };
+
+  if (filter) {
+    return /*#__PURE__*/React__default.createElement("div", _extends({
+      className: tagClasses,
+      "aria-label": title !== undefined ? "".concat(title, " ").concat(children) : "Clear filter ".concat(children),
+      id: tagId
+    }, other), /*#__PURE__*/React__default.createElement("span", {
+      className: "".concat(prefix, "--tag__label"),
+      title: typeof children === 'string' ? children : null
+    }, children !== null && children !== undefined ? children : TYPES[type]), /*#__PURE__*/React__default.createElement("button", {
+      type: "button",
+      className: "".concat(prefix, "--tag__close-icon"),
+      onClick: handleClose,
+      disabled: disabled,
+      "aria-labelledby": tagId,
+      title: title
+    }, _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, null))));
+  }
+
+  var ComponentTag = other.onClick ? 'button' : 'div';
+  return /*#__PURE__*/React__default.createElement(ComponentTag, _extends({
+    disabled: ComponentTag === 'button' ? disabled : null,
+    className: tagClasses,
+    id: tagId
+  }, other), CustomIconElement ? /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--tag__custom-icon")
+  }, /*#__PURE__*/React__default.createElement(CustomIconElement, null)) : '', /*#__PURE__*/React__default.createElement("span", {
+    title: typeof children === 'string' ? children : null
+  }, children !== null && children !== undefined ? children : TYPES[type]));
+};
+
+Tag.propTypes = {
+  /**
+   * Provide content to be rendered inside of a <Tag>
+   */
+  children: PropTypes.node,
+
+  /**
+   * Provide a custom className that is applied to the containing <span>
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify if the <Tag> is disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Determine if <Tag> is a filter/chip
+   */
+  filter: PropTypes.bool,
+
+  /**
+   * Specify the id for the tag.
+   */
+  id: PropTypes.string,
+
+  /**
+   * Click handler for filter tag close button.
+   */
+  onClose: PropTypes.func,
+
+  /**
+   * Optional prop to render a custom icon.
+   * Can be a React component class
+   */
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+
+  /**
+   * Specify the size of the Tag. Currently supports either `sm` or
+   * 'md' (default) sizes.
+   */
+  size: PropTypes.oneOf(['sm', 'md']),
+
+  /**
+   * Text to show on clear filters
+   */
+  title: PropTypes.string,
+
+  /**
+   * Specify the type of the <Tag>
+   */
+  type: PropTypes.oneOf(Object.keys(TYPES))
+};
+var Tag$1 = Tag;
+
+export { Tag$1 as default };

package/es/components/Text/Text.js

@@ -0,0 +1,98 @@
+/**
+ * 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, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default, { useContext } from 'react';
+import { TextDirectionContext } from './TextDirectionContext.js';
+
+var _excluded = ["as", "children", "dir"];
+
+function Text(_ref) {
+  var _ref$as = _ref.as,
+      BaseComponent = _ref$as === void 0 ? 'span' : _ref$as,
+      children = _ref.children,
+      _ref$dir = _ref.dir,
+      dir = _ref$dir === void 0 ? 'auto' : _ref$dir,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var context = useContext(TextDirectionContext);
+  var textProps = {};
+
+  var value = _objectSpread2({}, context);
+
+  if (!context) {
+    textProps.dir = dir;
+    value.direction = dir;
+  } else {
+    var parentDirection = context.direction,
+        getTextDirection = context.getTextDirection;
+
+    if (getTextDirection && getTextDirection.current) {
+      var text = getTextFromChildren(children);
+      var override = getTextDirection.current(text);
+
+      if (parentDirection !== override) {
+        textProps.dir = override;
+        value.direction = override;
+      } else if (parentDirection === 'auto') {
+        textProps.dir = override;
+      }
+    } else if (parentDirection !== dir) {
+      textProps.dir = dir;
+      value.direction = dir;
+    } else if (parentDirection === 'auto') {
+      textProps.dir = dir;
+    }
+  }
+
+  return /*#__PURE__*/React__default.createElement(TextDirectionContext.Provider, {
+    value: value
+  }, /*#__PURE__*/React__default.createElement(BaseComponent, _extends({}, rest, textProps), children));
+}
+
+Text.propTypes = {
+  /**
+   * Provide a custom element type used to render the outermost node
+   */
+  as: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.elementType]),
+
+  /**
+   * Provide child elements or text to be rendered inside of this component
+   */
+  children: PropTypes.node.isRequired,
+
+  /**
+   * Specify the text direction to be used for this component and any of its
+   * children
+   */
+  dir: PropTypes.oneOf(['ltr', 'rtl', 'auto'])
+};
+
+function getTextFromChildren(children) {
+  if (typeof children === 'string') {
+    return children;
+  }
+
+  var text = React__default.Children.map(children, function (child) {
+    if (typeof child === 'string') {
+      return child;
+    }
+
+    return null;
+  }).filter(function (text) {
+    return text !== null;
+  });
+
+  if (text.length === 1) {
+    return text[0];
+  }
+
+  return text;
+}
+
+export { Text };

package/es/components/Text/TextDirectionContext.js

@@ -0,0 +1,12 @@
+/**
+ * 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 TextDirectionContext = /*#__PURE__*/createContext(null);
+
+export { TextDirectionContext };

package/es/components/Text/createTextComponent.js

@@ -0,0 +1,33 @@
+/**
+ * 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 { Text } from './Text.js';
+
+/**
+ * Create a text component wrapper for a given text node type. Useful for
+ * returning a `Text` component for a text node like a `<label>`.
+ * @param {string} element
+ * @param {string} displayName
+ */
+
+function createTextComponent(element, displayName) {
+  function TextWrapper(props) {
+    return /*#__PURE__*/React__default.createElement(Text, _extends({
+      as: element
+    }, props));
+  }
+
+  if (process.env.NODE_ENV !== "production") {
+    TextWrapper.displayName = displayName;
+  }
+
+  return TextWrapper;
+}
+
+export { createTextComponent };

package/es/components/Text/index.js

@@ -0,0 +1,13 @@
+/**
+ * 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 { createTextComponent } from './createTextComponent.js';
+
+createTextComponent('label', 'Label');
+var Legend = createTextComponent('legend', 'Legend');
+
+export { Legend };

package/es/components/TextArea/TextArea.Skeleton.js

@@ -0,0 +1,44 @@
+/**
+ * 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 TextAreaSkeleton = function TextAreaSkeleton(_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, "--skeleton ").concat(prefix, "--text-area")
+  }));
+};
+
+TextAreaSkeleton.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 TextAreaSkeleton$1 = TextAreaSkeleton;
+
+export { TextAreaSkeleton$1 as default };