@carbon/react 1.0.0-rc.0 → 1.0.2

package/lib/components/Tile/next/Tile.js

@@ -32,8 +32,8 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var _CheckboxCheckedFille, _Checkbox, _ChevronDown, _ChevronDown2;
 
 var _excluded = ["children", "className", "light"],
-    _excluded2 = ["children", "className", "clicked", "handleClick", "handleKeyDown", "href", "light", "onClick", "onKeyDown"],
-    _excluded3 = ["children", "className", "disabled", "handleClick", "handleKeyDown", "iconDescription", "id", "light", "name", "onClick", "onChange", "onKeyDown", "selected", "tabIndex", "title", "value"],
+    _excluded2 = ["children", "className", "clicked", "href", "light", "onClick", "onKeyDown"],
+    _excluded3 = ["children", "className", "disabled", "id", "light", "name", "onClick", "onChange", "onKeyDown", "selected", "tabIndex", "title", "value"],
     _excluded4 = ["tabIndex", "className", "children", "expanded", "tileMaxHeight", "tilePadding", "onClick", "onKeyUp", "tileCollapsedIconText", "tileExpandedIconText", "tileCollapsedLabel", "tileExpandedLabel", "light"];
 var Tile = /*#__PURE__*/React__default["default"].forwardRef(function Tile(_ref, ref) {
   var children = _ref.children,
@@ -74,11 +74,8 @@ var ClickableTile = /*#__PURE__*/React__default["default"].forwardRef(function C
       className = _ref2.className,
       _ref2$clicked = _ref2.clicked,
       clicked = _ref2$clicked === void 0 ? false : _ref2$clicked,
-      handleClick = _ref2.handleClick,
-      handleKeyDown = _ref2.handleKeyDown,
       href = _ref2.href,
-      _ref2$light = _ref2.light,
-      light = _ref2$light === void 0 ? false : _ref2$light,
+      light = _ref2.light,
       _ref2$onClick = _ref2.onClick,
       onClick = _ref2$onClick === void 0 ? function () {} : _ref2$onClick,
       _ref2$onKeyDown = _ref2.onKeyDown,
@@ -91,17 +88,12 @@ var ClickableTile = /*#__PURE__*/React__default["default"].forwardRef(function C
   var _useState = React.useState(clicked),
       _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
       isSelected = _useState2[0],
-      setIsSelected = _useState2[1]; // TODO: replace with onClick when handleClick prop is deprecated
-
-
-  var clickHandler = handleClick || onClick; // TODO: replace with onClick when handleClick prop is deprecated
-
-  var keyDownHandler = handleKeyDown || onKeyDown;
+      setIsSelected = _useState2[1];
 
   function handleOnClick(evt) {
     evt.persist();
     setIsSelected(!isSelected);
-    clickHandler(evt);
+    onClick(evt);
   }
 
   function handleOnKeyDown(evt) {
@@ -110,10 +102,10 @@ var ClickableTile = /*#__PURE__*/React__default["default"].forwardRef(function C
     if (match.matches(evt, [keys.Enter, keys.Space])) {
       evt.preventDefault();
       setIsSelected(!isSelected);
-      keyDownHandler(evt);
+      onKeyDown(evt);
     }
 
-    keyDownHandler(evt);
+    onKeyDown(evt);
   }
 
   return /*#__PURE__*/React__default["default"].createElement(Link["default"], _rollupPluginBabelHelpers["extends"]({
@@ -141,16 +133,6 @@ ClickableTile.propTypes = {
    */
   clicked: PropTypes__default["default"].bool,
 
-  /**
-   * Deprecated in v11. Use 'onClick' instead.
-   */
-  handleClick: deprecate["default"](PropTypes__default["default"].func, 'The handleClick prop for ClickableTile has been deprecated in favor of onClick. It will be removed in the next major release.'),
-
-  /**
-   * Specify the function to run when the ClickableTile is interacted with via a keyboard
-   */
-  handleKeyDown: deprecate["default"](PropTypes__default["default"].func, 'The handleKeyDown prop for ClickableTile has been deprecated in favor of onKeyDown. It will be removed in the next major release.'),
-
   /**
    * The href for the link.
    */
@@ -183,12 +165,8 @@ var SelectableTile = /*#__PURE__*/React__default["default"].forwardRef(function
   var children = _ref3.children,
       className = _ref3.className,
       disabled = _ref3.disabled,
-      handleClick = _ref3.handleClick,
-      handleKeyDown = _ref3.handleKeyDown;
-      _ref3.iconDescription;
-      var id = _ref3.id,
-      _ref3$light = _ref3.light,
-      light = _ref3$light === void 0 ? false : _ref3$light,
+      id = _ref3.id,
+      light = _ref3.light,
       name = _ref3.name,
       _ref3$onClick = _ref3.onClick,
       onClick = _ref3$onClick === void 0 ? function () {} : _ref3$onClick,
@@ -206,11 +184,9 @@ var SelectableTile = /*#__PURE__*/React__default["default"].forwardRef(function
       value = _ref3$value === void 0 ? 'value' : _ref3$value,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref3, _excluded3);
 
-  var prefix = usePrefix.usePrefix(); // TODO: replace with onClick when handleClick prop is deprecated
-
-  var clickHandler = handleClick || onClick; // TODO: replace with onKeyDown when handleKeyDown prop is deprecated
-
-  var keyDownHandler = handleKeyDown || onKeyDown;
+  var prefix = usePrefix.usePrefix();
+  var clickHandler = onClick;
+  var keyDownHandler = onKeyDown;
 
   var _useState3 = React.useState(selected),
       _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
@@ -298,21 +274,6 @@ SelectableTile.propTypes = {
    */
   disabled: PropTypes__default["default"].bool,
 
-  /**
-   * Specify the function to run when the SelectableTile is clicked
-   */
-  handleClick: deprecate["default"](PropTypes__default["default"].func, 'The `handleClick` prop for `SelectableTile` has been deprecated in favor of `onClick`. It will be removed in the next major release.'),
-
-  /**
-   * Specify the function to run when the SelectableTile is interacted with via a keyboard
-   */
-  handleKeyDown: deprecate["default"](PropTypes__default["default"].func, 'The `handleKeyDown` prop for `SelectableTile` has been deprecated in favor of `onKeyDown`. It will be removed in the next major release.'),
-
-  /**
-   * The description of the checkmark icon.
-   */
-  iconDescription: deprecate["default"](PropTypes__default["default"].string, 'The `iconDescription` prop for `SelectableTile` is no longer needed and has ' + 'been deprecated. It will be removed in the next major release.'),
-
   /**
    * The ID of the `<input>`.
    */

package/lib/components/TileGroup/index.js

@@ -0,0 +1,17 @@
+/**
+ * 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 createClassWrapper = require('../../internal/createClassWrapper.js');
+var TileGroup = require('./TileGroup.js');
+
+var index = createClassWrapper.createClassWrapper(TileGroup["default"]);
+
+exports["default"] = index;

package/lib/components/TimePickerSelect/next/TimePickerSelect.js

@@ -15,7 +15,6 @@ var React = require('react');
 var cx = require('classnames');
 var iconsReact = require('@carbon/icons-react');
 var usePrefix = require('../../../internal/usePrefix.js');
-var deprecate = require('../../../prop-types/deprecate.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -72,11 +71,6 @@ TimePickerSelect.propTypes = {
    */
   disabled: PropTypes__default["default"].bool,
 
-  /**
-   * Provide a description for the twistie icon that can be read by screen readers
-   */
-  iconDescription: deprecate["default"](PropTypes__default["default"].string, 'The `iconDescription` prop for `TimePickerSelect` is no longer needed and has ' + 'been deprecated. It will be moved in the next major release. Use "aria-label" instead'),
-
   /**
    * Specify a custom `id` for the `<select>`
    */

package/lib/components/Toggletip/index.js

@@ -0,0 +1,266 @@
+/**
+ * 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 cx = require('classnames');
+var PropTypes = require('prop-types');
+var React = require('react');
+var index = require('../Popover/index.js');
+var useEvent = require('../../internal/useEvent.js');
+var useId = require('../../internal/useId.js');
+var usePrefix = require('../../internal/usePrefix.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);
+
+/**
+ * Used to render the label for a Toggletip
+ */
+
+function ToggletipLabel(_ref) {
+  var _ref$as = _ref.as,
+      BaseComponent = _ref$as === void 0 ? 'span' : _ref$as,
+      children = _ref.children,
+      customClassName = _ref.className;
+  var prefix = usePrefix.usePrefix();
+  var className = cx__default["default"]("".concat(prefix, "--toggletip-label"), customClassName);
+  return /*#__PURE__*/React__default["default"].createElement(BaseComponent, {
+    className: className
+  }, children);
+}
+
+ToggletipLabel.propTypes = {
+  /**
+   * Provide a custom element or component to render the top-level node for the
+   * component.
+   */
+  as: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].elementType]),
+
+  /**
+   * Custom children to be rendered as the content of the label
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Provide a custom class name to be added to the outermost node in the
+   * component
+   */
+  className: PropTypes__default["default"].string
+}; // Used to coordinate accessibility props between button and content along with
+// the actions to open and close the toggletip
+
+var ToggletipContext = /*#__PURE__*/React__default["default"].createContext();
+
+function useToggletip() {
+  return React.useContext(ToggletipContext);
+}
+/**
+ * Used as a container for the button and content of a toggletip. This component
+ * is responsible for coordinating between interactions with the button and the
+ * visibility of the content
+ */
+
+
+function Toggletip(_ref2) {
+  var align = _ref2.align,
+      as = _ref2.as,
+      customClassName = _ref2.className,
+      children = _ref2.children,
+      _ref2$defaultOpen = _ref2.defaultOpen,
+      defaultOpen = _ref2$defaultOpen === void 0 ? false : _ref2$defaultOpen;
+  var ref = React.useRef();
+
+  var _useState = React.useState(defaultOpen),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  var prefix = usePrefix.usePrefix();
+  var id = useId.useId();
+  var className = cx__default["default"]("".concat(prefix, "--toggletip"), customClassName, _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--toggletip--open"), open));
+  var actions = {
+    toggle: function toggle() {
+      setOpen(!open);
+    },
+    close: function close() {
+      setOpen(false);
+    }
+  };
+  var value = {
+    buttonProps: {
+      'aria-expanded': open,
+      'aria-controls': id,
+      onClick: actions.toggle
+    },
+    contentProps: {
+      id: id
+    }
+  };
+
+  function onKeyDown(event) {
+    if (open && match.match(event, keys.Escape)) {
+      actions.close();
+    }
+  }
+
+  useEvent.useWindowEvent('click', function (event) {
+    if (open && !ref.current.contains(event.target)) {
+      actions.close();
+    }
+  });
+  return /*#__PURE__*/React__default["default"].createElement(ToggletipContext.Provider, {
+    value: value
+  }, /*#__PURE__*/React__default["default"].createElement(index.Popover, {
+    align: align,
+    as: as,
+    caret: true,
+    className: className,
+    dropShadow: false,
+    highContrast: true,
+    open: open,
+    onKeyDown: onKeyDown,
+    ref: ref
+  }, children));
+}
+
+Toggletip.propTypes = {
+  /**
+   * Specify how the toggletip should align with the button
+   */
+  align: PropTypes__default["default"].oneOf(['top', 'bottom', 'left', 'right']),
+
+  /**
+   * Provide a custom element or component to render the top-level node for the
+   * component.
+   */
+  as: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].elementType]),
+
+  /**
+   * Custom children to be rendered as the content of the label
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Provide a custom class name to be added to the outermost node in the
+   * component
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify if the toggletip should be open by default
+   */
+  defaultOpen: PropTypes__default["default"].bool
+};
+/**
+ * `ToggletipButton` controls the visibility of the Toggletip through mouse
+ * clicks and keyboard interactions.
+ */
+
+function ToggletipButton(_ref3) {
+  var children = _ref3.children,
+      customClassName = _ref3.className,
+      _ref3$label = _ref3.label,
+      label = _ref3$label === void 0 ? 'Show information' : _ref3$label;
+  var toggletip = useToggletip();
+  var prefix = usePrefix.usePrefix();
+  var className = cx__default["default"]("".concat(prefix, "--toggletip-button"), customClassName);
+  return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, toggletip.buttonProps, {
+    "aria-label": label,
+    type: "button",
+    className: className
+  }), children);
+}
+
+ToggletipButton.propTypes = {
+  /**
+   * Custom children to be rendered as the content of the label
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Provide a custom class name to be added to the outermost node in the
+   * component
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Provide an accessible label for this button
+   */
+  label: PropTypes__default["default"].string
+};
+/**
+ * `ToggletipContent` is a wrapper around `PopoverContent`. It places the
+ * `children` passed in as a prop inside of `PopoverContent` so that they will
+ * be rendered inside of the popover for this component.
+ */
+
+function ToggletipContent(_ref4) {
+  var children = _ref4.children,
+      customClassName = _ref4.className;
+  var toggletip = useToggletip();
+  var prefix = usePrefix.usePrefix();
+  return /*#__PURE__*/React__default["default"].createElement(index.PopoverContent, _rollupPluginBabelHelpers["extends"]({
+    className: customClassName
+  }, toggletip.contentProps), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--toggletip-content")
+  }, children));
+}
+
+ToggletipContent.propTypes = {
+  /**
+   * Custom children to be rendered as the content of the label
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Provide a custom class name to be added to the outermost node in the
+   * component
+   */
+  className: PropTypes__default["default"].string
+};
+/**
+ * `ToggletipActions` is a container for one or two actions present at the base
+ * of a toggletip. It is used for layout of these items.
+ */
+
+function ToggletipActions(_ref5) {
+  var children = _ref5.children,
+      customClassName = _ref5.className;
+  var prefix = usePrefix.usePrefix();
+  var className = cx__default["default"]("".concat(prefix, "--toggletip-actions"), customClassName);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: className
+  }, children);
+}
+
+ToggletipActions.propTypes = {
+  /**
+   * Custom children to be rendered as the content of the label
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Provide a custom class name to be added to the outermost node in the
+   * component
+   */
+  className: PropTypes__default["default"].string
+};
+
+exports.Toggletip = Toggletip;
+exports.ToggletipActions = ToggletipActions;
+exports.ToggletipButton = ToggletipButton;
+exports.ToggletipContent = ToggletipContent;
+exports.ToggletipLabel = ToggletipLabel;

package/lib/components/Tooltip/next/DefinitionTooltip.js

@@ -117,7 +117,7 @@ DefinitionTooltip.propTypes = {
   id: PropTypes__default["default"].string,
 
   /**
-   * [Deprecated] Please use the `definition` prop instead.
+   * [Deprecated in v11] Please use the `definition` prop instead.
    *
    * Provide the text that will be displayed in the tooltip when it is rendered.
    */