@carbon/ibm-products 1.50.0 → 1.52.0

package/lib/components/ExampleComponent/ExampleComponent.js

@@ -1,19 +1,24 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ExampleComponent = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _settings = require("../../settings");
+var _useExample3 = _interopRequireDefault(require("./useExample"));
 var _carbonComponentsReact = require("carbon-components-react");
-var _excluded = ["borderColor", "boxedBorder", "className", "disabled", "onPrimaryClick", "onSecondaryClick", "primaryButtonLabel", "primaryKind", "secondaryButtonLabel", "secondaryKind", "size", "style"];
+var _excluded = ["borderColor", "boxedBorder", "className", "disabled", "usesExampleHook", "onPrimaryClick", "onSecondaryClick", "primaryButtonLabel", "primaryKind", "secondaryButtonLabel", "secondaryKind", "secondaryIcon", "size", "style"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 // The block part of our conventional BEM class names (blockClass__E--M).
@@ -37,6 +42,7 @@ var ExampleComponent = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
     boxedBorder = _ref.boxedBorder,
     className = _ref.className,
     disabled = _ref.disabled,
+    usesExampleHook = _ref.usesExampleHook,
     onPrimaryClick = _ref.onPrimaryClick,
     onSecondaryClick = _ref.onSecondaryClick,
     primaryButtonLabel = _ref.primaryButtonLabel,
@@ -45,10 +51,18 @@ var ExampleComponent = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
     secondaryButtonLabel = _ref.secondaryButtonLabel,
     _ref$secondaryKind = _ref.secondaryKind,
     secondaryKind = _ref$secondaryKind === void 0 ? defaults.secondaryKind : _ref$secondaryKind,
+    secondaryIcon = _ref.secondaryIcon,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? defaults.size : _ref$size,
     style = _ref.style,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useState = (0, _react.useState)(primaryButtonLabel),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    thePrimaryButtonLabel = _useState2[0],
+    setThePrimaryButtonLabel = _useState2[1];
+  var _useExample = (0, _useExample3.default)(usesExampleHook),
+    _useExample2 = (0, _slicedToArray2.default)(_useExample, 1),
+    exampleUse = _useExample2[0];
   var modeClass = boxedBorder ? "".concat(blockClass, "--boxed-set") : "".concat(blockClass, "--shadow-set");
   var handlePrimaryClick = function handlePrimaryClick(e) {
     if (onPrimaryClick) {
@@ -60,6 +74,14 @@ var ExampleComponent = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
       onSecondaryClick(e);
     }
   };
+  var theSecondaryIcon = (0, _react.useRef)(secondaryIcon && _settings.pkg.checkReportFeatureEnabled('ExampleComponent.secondaryIcon') ? secondaryIcon : null);
+  (0, _react.useEffect)(function () {
+    if (usesExampleHook !== undefined && _settings.pkg.checkReportFeatureEnabled('ExampleComponent.useExample')) {
+      setThePrimaryButtonLabel("".concat(primaryButtonLabel, " ").concat(exampleUse.toFixed(1), "s"));
+    } else {
+      setThePrimaryButtonLabel(primaryButtonLabel);
+    }
+  }, [primaryButtonLabel, usesExampleHook, exampleUse]);
   return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ButtonSet, (0, _extends2.default)({}, rest, {
     className: (0, _classnames.default)(blockClass,
     // Apply the block class to the main HTML element
@@ -72,6 +94,7 @@ var ExampleComponent = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
     className: "".concat(blockClass, "__secondary-button"),
     kind: secondaryKind,
     onClick: handleSecondaryClick,
+    renderIcon: theSecondaryIcon.current,
     disabled: disabled,
     size: size
   }, secondaryButtonLabel), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
@@ -80,7 +103,7 @@ var ExampleComponent = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
     onClick: handlePrimaryClick,
     disabled: disabled,
     size: size
-  }, primaryButtonLabel));
+  }, thePrimaryButtonLabel));
 });
 
 // Return a placeholder if not released and not enabled by feature flag.
@@ -131,6 +154,10 @@ ExampleComponent.propTypes = {
    * The secondary button label.
    */
   secondaryButtonLabel: _propTypes.default.string.isRequired,
+  /**
+   * The icon to use for the secondary button.
+   */
+  secondaryIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   /**
    * The kind of button for the secondary button ('secondary' or 'tertiary').
    */
@@ -142,5 +169,9 @@ ExampleComponent.propTypes = {
   /**
    * Optional style settings for the containing node.
    */
-  style: _propTypes.default.object
+  style: _propTypes.default.object,
+  /**
+   * Hook example timeout (in seconds) or undefined
+   */
+  usesExampleHook: _propTypes.default.number
 };

package/lib/components/ExampleComponent/useExample.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _settings = require("../../settings");
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+
+var useExample = function useExample(initialTime) {
+  // NOTE: hooks cannot be called conditionally.
+  //
+  // ** If the hook uses other hooks then they must be called,
+  // ** this could lead to unexpected behavior.
+  // ** As some hooks may still be called even if the condition is false.
+
+  var _useState = (0, _react.useState)(
+    // Disable hook in a safe way if possible, else use despite feature disabled.
+    // Either a console error or warning will be logged.
+    initialTime),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    time = _useState2[0],
+    setTime = _useState2[1];
+
+  // Use of the feature flag to
+  var feature = 'ExampleComponent.useExample';
+  var tryFeature = initialTime !== undefined;
+  var featureEnabled = tryFeature && _settings.pkg.checkReportFeatureEnabled(feature);
+  if (tryFeature && !featureEnabled) {
+    // Output a useful message if the feature is disabled.
+    console.warn("Disabled feature \"".concat(feature, "\" does not change the initialTime."));
+  }
+
+  // Actual hook is code is below
+  (0, _react.useEffect)(function () {
+    if (!featureEnabled) {
+      return;
+    }
+
+    // turn off all or part of the feature
+    if (time > 0) {
+      setTimeout(function () {
+        setTime(Math.max(0, time - 0.1));
+      }, 100);
+    }
+  }, [featureEnabled, time]);
+  return [time];
+};
+var _default = useExample;
+exports.default = _default;

package/lib/components/InlineEdit/InlineEdit.js

@@ -38,8 +38,12 @@ var InlineEdit = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   return /*#__PURE__*/_react.default.createElement(_InlineEditV.InlineEditV1, props);
 });
 exports.InlineEdit = InlineEdit;
-exports.InlineEdit = InlineEdit = _settings.pkg.checkComponentEnabled(InlineEdit, componentName);
+InlineEdit.deprecated = {
+  details: "The InlineEdit component is being renamed to EditInPlace in the next major version of @carbon/ibm-products. You can prepare by updating your usage of InlineEdit to EditInPlace.",
+  level: 'warn'
+};
 InlineEdit.displayName = componentName;
+exports.InlineEdit = InlineEdit = _settings.pkg.checkComponentEnabled(InlineEdit, componentName);
 InlineEdit.propTypes = {
   v2: _propTypes.default.bool
 };

package/lib/components/InlineEditV1/InlineEditV1.js

@@ -15,7 +15,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _devtools = require("../../global/js/utils/devtools");
-var _pconsole = _interopRequireDefault(require("../../global/js/utils/pconsole"));
 var _settings = require("../../settings");
 var _carbonComponentsReact = require("carbon-components-react");
 var _iconsReact = require("@carbon/icons-react");
@@ -79,7 +78,6 @@ var InlineEditV1 = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn)
   var showValidation = invalid; // || warn;
   var validationText = invalidText; // || warnText;
   var validationIcon = showValidation ? /*#__PURE__*/_react.default.createElement(_iconsReact.WarningFilled16, null) : null;
-  _pconsole.default.warn("".concat(componentName, ": the v1 version of this component is being deprecated. please switch to the v2 component as soon as possible."));
 
   // sanitize the tooltip values
   var alignIsObject = (0, _typeof2.default)(buttonTooltipAlignment) === 'object';
@@ -301,6 +299,13 @@ var InlineEditV1 = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn)
 // is used in preference to relying on function.name.
 exports.InlineEditV1 = InlineEditV1;
 InlineEditV1.displayName = componentName;
+InlineEditV1.deprecated = {
+  level: 'warn',
+  details: "The v1 version of this component is being deprecated. please switch to the v2 component as soon as possible."
+};
+
+// needed to show deprecation message but based on host component name
+exports.InlineEditV1 = InlineEditV1 = _settings.pkg.checkComponentEnabled(InlineEditV1, 'InlineEdit');
 
 // The types and DocGen commentary for the component props,
 // in alphabetical order (for consistency).

package/lib/components/InlineEditV2/InlineEditV2.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.InlineEditV2 = void 0;
+exports.deprecatedProps = exports.InlineEditV2 = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -17,22 +17,32 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _iconsReact = require("@carbon/icons-react");
 var _settings = require("../../settings");
 var _devtools = require("../../global/js/utils/devtools");
-var _excluded = ["cancelLabel", "editLabel", "id", "invalid", "invalidLabel", "labelText", "onCancel", "onChange", "onSave", "saveLabel", "value"];
+var _excluded = ["cancelLabel", "editAlwaysVisible", "editLabel", "id", "inheritTypography", "invalid", "invalidLabel", "invalidText", "labelText", "onCancel", "onChange", "onSave", "size", "saveLabel", "value"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var componentName = 'InlineEditV2';
 var blockClass = "".concat(_settings.pkg.prefix, "--inline-edit-v2");
+var defaults = {
+  size: 'sm'
+};
 var InlineEditV2 = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _cx;
   var cancelLabel = _ref.cancelLabel,
+    editAlwaysVisible = _ref.editAlwaysVisible,
     editLabel = _ref.editLabel,
     id = _ref.id,
+    inheritTypography = _ref.inheritTypography,
     invalid = _ref.invalid,
-    invalidLabel = _ref.invalidLabel,
+    deprecated_invalidLabel = _ref.invalidLabel,
+    invalidText = _ref.invalidText,
     labelText = _ref.labelText,
     onCancel = _ref.onCancel,
     onChange = _ref.onChange,
     onSave = _ref.onSave,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? defaults.size : _ref$size,
     saveLabel = _ref.saveLabel,
     value = _ref.value,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -130,7 +140,7 @@ var InlineEditV2 = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
     ref: ref
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(blockClass, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--focused"), focused), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--invalid"), invalid), _cx)),
+    className: (0, _classnames.default)(blockClass, "".concat(blockClass, "--").concat(size), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--focused"), focused), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--invalid"), invalid), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--inherit-type"), inheritTypography), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--overflows"), inputRef.current && inputRef.current.scrollWidth > inputRef.current.offsetWidth), _cx)),
     onFocus: onFocusHandler,
     onBlur: onBlurHandler
   }, /*#__PURE__*/_react.default.createElement("label", {
@@ -138,7 +148,7 @@ var InlineEditV2 = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     htmlFor: id
   }, labelText), /*#__PURE__*/_react.default.createElement("input", {
     id: id,
-    className: (0, _classnames.default)("".concat(blockClass, "__text-input"), "".concat(_settings.carbon.prefix, "--text-input"), "".concat(_settings.carbon.prefix, "--text-input--sm")),
+    className: (0, _classnames.default)("".concat(blockClass, "__text-input"), "".concat(_settings.carbon.prefix, "--text-input"), "".concat(_settings.carbon.prefix, "--text-input--").concat(size)),
     type: "text",
     value: value,
     onChange: onChangeHandler,
@@ -147,13 +157,16 @@ var InlineEditV2 = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     ,
     onKeyDown: onKeyHandler
   }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__ellipsis"),
+    "aria-hidden": !focused
+  }, "\u2026"), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__toolbar")
-  }, focused ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, invalid && /*#__PURE__*/_react.default.createElement(_iconsReact.WarningFilled16, {
+  }, invalid && /*#__PURE__*/_react.default.createElement(_iconsReact.WarningFilled16, {
     className: "".concat(blockClass, "__warning-icon")
-  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+  }), focused ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
     hasIconOnly: true,
     renderIcon: _iconsReact.Close24,
-    size: "sm",
+    size: size,
     iconDescription: cancelLabel,
     onClick: onCancelHandler,
     kind: "ghost",
@@ -163,7 +176,7 @@ var InlineEditV2 = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
     hasIconOnly: true,
     renderIcon: _iconsReact.Checkmark24,
-    size: "sm",
+    size: size,
     iconDescription: saveLabel,
     onClick: onSaveHandler,
     kind: "ghost",
@@ -172,12 +185,12 @@ var InlineEditV2 = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     className: "".concat(blockClass, "__btn ").concat(blockClass, "__btn-save"),
     disabled: !canSave
   })) : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
-    className: "".concat(blockClass, "__btn ").concat(blockClass, "__btn-edit"),
+    className: (0, _classnames.default)("".concat(blockClass, "__btn"), "".concat(blockClass, "__btn-edit"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__btn-edit--always-visible"), editAlwaysVisible)),
     hasIconOnly: true
     // renderIcon={readOnly ? EditOff24 : Edit24}
     ,
     renderIcon: _iconsReact.Edit24,
-    size: "sm"
+    size: size
     // iconDescription={readOnly ? readOnlyLabel : editLabel}
     ,
     iconDescription: editLabel,
@@ -185,17 +198,29 @@ var InlineEditV2 = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     kind: "ghost",
     tabIndex: 0,
     key: "edit"
-  }))), focused && invalid && /*#__PURE__*/_react.default.createElement("p", {
+  }))), invalid && /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__warning-text")
-  }, invalidLabel));
+  }, invalidText !== null && invalidText !== void 0 ? invalidText : deprecated_invalidLabel));
 });
 exports.InlineEditV2 = InlineEditV2;
 InlineEditV2.displayName = componentName;
-InlineEditV2.propTypes = {
+var deprecatedProps = {
+  /**
+   * **Deprecated**
+   * invalidLabel was misnamed, using invalidText to match Carbon
+   */
+  invalidText: _propTypes.default.string
+};
+exports.deprecatedProps = deprecatedProps;
+InlineEditV2.propTypes = _objectSpread({
   /**
    * label for cancel button
    */
   cancelLabel: _propTypes.default.string.isRequired,
+  /**
+   * By default the edit icon is shown on hover only.
+   */
+  editAlwaysVisible: _propTypes.default.bool,
   /**
    * label for edit button
    */
@@ -204,6 +229,14 @@ InlineEditV2.propTypes = {
    * Specify a custom id for the input
    */
   id: _propTypes.default.string.isRequired,
+  /**
+   * inheritTypography - causes the text entry field to inherit typography settings
+   * assigned to the container. This is useful when editing titles for instance.
+   *
+   * NOTE: The size property limits the vertical size of the input element.
+   * Inherited font's should be selected to fit within the size selected.
+   */
+  inheritTypography: _propTypes.default.bool,
   /**
    * determines if the input is invalid
    */
@@ -211,7 +244,7 @@ InlineEditV2.propTypes = {
   /**
    * text that is displayed if the input is invalid
    */
-  invalidLabel: _propTypes.default.string,
+  invalidText: _propTypes.default.string,
   /**
    * Provide the text that will be read by a screen reader when visiting this control
    */
@@ -240,11 +273,15 @@ InlineEditV2.propTypes = {
    * label for save button
    */
   saveLabel: _propTypes.default.string.isRequired,
+  /**
+   * vertical size of control
+   */
+  size: _propTypes.default.oneOf(['sm', 'md', 'lg']),
   /**
    * current value of the input
    */
   value: _propTypes.default.string.isRequired
-};
+}, deprecatedProps);
 InlineEditV2.defaultProps = {
   invalid: false,
   invalidLabel: ''

package/lib/components/NonLinearReading/NonLinearReading.js

@@ -49,16 +49,16 @@ var NonLinearReading = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
     });
   };
   return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, rest, {
-    className: (0, _classnames.default)(blockClass, className),
+    className: (0, _classnames.default)(blockClass, "".concat(blockClass, "__").concat(theme), className),
     ref: ref,
     role: "main"
   }, (0, _devtools.getDevtoolsProps)(componentName)), ' ', /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
     "aria-expanded": isOpen,
-    className: (0, _classnames.default)("".concat(blockClass, "__term-").concat(theme), [isOpen ? ["".concat(blockClass, "__term-").concat(theme, "--open")] : ["".concat(blockClass, "__term-").concat(theme, "--closed")]]),
+    className: (0, _classnames.default)("".concat(blockClass, "__keyword"), [isOpen ? ["".concat(blockClass, "__keyword-open")] : ["".concat(blockClass, "__keyword-closed")]]),
     onClick: handleToggle
-  }, children, isOpen && /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronUp16, null)), ' ', isOpen && /*#__PURE__*/_react.default.createElement("span", {
-    className: "".concat(blockClass, "--body-").concat(theme)
+  }, children, /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronDown16, null)), ' ', isOpen && /*#__PURE__*/_react.default.createElement("span", {
+    className: "".concat(blockClass, "__body")
   }, definition), ' ');
 });
 
@@ -72,7 +72,7 @@ NonLinearReading.displayName = componentName;
 // See https://www.npmjs.com/package/prop-types#usage.
 NonLinearReading.propTypes = {
   /**
-   * The term of the component appears as a pill.
+   * The keyword of the component appears as a pill.
    */
   children: _propTypes.default.node.isRequired,
   /**
@@ -80,7 +80,7 @@ NonLinearReading.propTypes = {
    */
   className: _propTypes.default.string,
   /**
-   * The content that appears when the term is toggled open.
+   * The content that appears when the keyword is toggled open.
    */
   definition: _propTypes.default.node.isRequired,
   /**

package/lib/components/PageHeader/PageHeader.js

@@ -14,7 +14,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _layout = require("@carbon/layout");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _reactResizeDetector = require("react-resize-detector");
+var _useResizeObserver = require("../../global/js/hooks/useResizeObserver");
 var _carbonComponentsReact = require("carbon-components-react");
 var _hooks = require("../../global/js/hooks");
 var _devtools = require("../../global/js/utils/devtools");
@@ -39,7 +39,7 @@ var defaults = {
   narrowGrid: false
 };
 var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
-  var _withoutBackground, _enableBreadcrumbScro, _ref6, _cx2, _ref7, _cx4, _cx7;
+  var _withoutBackground, _enableBreadcrumbScro, _ref7, _cx2, _ref8, _cx4, _cx7;
   var actionBarItems = _ref.actionBarItems,
     actionBarMenuOptionsClass = _ref.actionBarMenuOptionsClass,
     actionBarOverflowAriaLabel = _ref.actionBarOverflowAriaLabel,
@@ -176,7 +176,8 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   };
 
   /* istanbul ignore next */
-  var handleResizeActionBarColumn = function handleResizeActionBarColumn(width) {
+  var handleResizeActionBarColumn = function handleResizeActionBarColumn(_ref4) {
+    var width = _ref4.width;
     /* don't know how to test resize */
     /* istanbul ignore next */
     setActionBarColumnWidth(width);
@@ -250,8 +251,8 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   (0, _hooks.useNearestScroll)(headerRef,
   // on scroll or various layout changes check updates if needed
   // istanbul ignore next
-  function (_ref4) {
-    var current = _ref4.current;
+  function (_ref5) {
+    var current = _ref5.current;
     setPageHeaderStyles(function (prev) {
       return _objectSpread(_objectSpread({}, prev), {}, (0, _defineProperty2.default)({}, "--".concat(_PageHeaderUtils.blockClass, "--breadcrumb-top"), "".concat(metrics.headerOffset, "px")));
     });
@@ -267,8 +268,8 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     document.documentElement.style.setProperty("--".concat(_PageHeaderUtils.blockClass, "--tagset-tooltip-offset"), "".concat(tagsetTooltipOffset, "px"));
     setScrollYValue(current.scrollY);
   }, [metrics.headerHeight, metrics.headerTopValue, metrics.headerOffset, enableBreadcrumbScroll]);
-  (0, _hooks.useWindowResize)(function (_ref5) {
-    var current = _ref5.current;
+  (0, _hooks.useWindowResize)(function (_ref6) {
+    var current = _ref6.current;
     // on window resize and other updates some values may have changed
     checkUpdateVerticalSpace();
     setWidthIsNarrow(current.innerWidth / 16 < parseInt(_layout.breakpoints.md.width)); // small (below medium) media query
@@ -314,15 +315,11 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       (0, _PageHeaderUtils.utilSetCollapsed)(collapseHeader, metrics.headerOffset, metrics.headerTopValue);
     }
   }, [collapseHeader, metrics.headerOffset, metrics.headerTopValue]);
-  (0, _reactResizeDetector.useResizeDetector)({
-    onResize: handleResizeActionBarColumn,
-    targetRef: sizingContainerRef,
-    handleWidth: true
+  (0, _useResizeObserver.useResizeObserver)(sizingContainerRef, {
+    callback: handleResizeActionBarColumn
   });
-  (0, _reactResizeDetector.useResizeDetector)({
-    onResize: handleResize,
-    targetRef: headerRef,
-    handleHeight: true
+  (0, _useResizeObserver.useResizeObserver)(headerRef, {
+    callback: handleResize
   });
 
   // Determine what form of title to display in the breadcrumb
@@ -331,7 +328,7 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     className: "".concat(_PageHeaderUtils.blockClass, "--offset-top-measuring-element"),
     ref: offsetTopMeasuringRef
   }), /*#__PURE__*/_react.default.createElement("section", (0, _extends2.default)({}, rest, {
-    className: (0, _classnames.default)([_PageHeaderUtils.blockClass, "".concat(_PageHeaderUtils.blockClass, "--no-margins-below-row"), className, (_ref6 = {}, (0, _defineProperty2.default)(_ref6, "".concat(_PageHeaderUtils.blockClass, "--has-navigation"), navigation || tags), (0, _defineProperty2.default)(_ref6, "".concat(_PageHeaderUtils.blockClass, "--has-navigation-tags-only"), !navigation && tags), _ref6)]),
+    className: (0, _classnames.default)([_PageHeaderUtils.blockClass, "".concat(_PageHeaderUtils.blockClass, "--no-margins-below-row"), className, (_ref7 = {}, (0, _defineProperty2.default)(_ref7, "".concat(_PageHeaderUtils.blockClass, "--has-navigation"), navigation || tags), (0, _defineProperty2.default)(_ref7, "".concat(_PageHeaderUtils.blockClass, "--has-navigation-tags-only"), !navigation && tags), _ref7)]),
     style: pageHeaderStyles,
     ref: headerRef
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Grid, {
@@ -352,7 +349,7 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     overflowAriaLabel: breadcrumbOverflowAriaLabel,
     breadcrumbs: breadcrumbs && breadcrumbItemForTitle ? breadcrumbs.concat(breadcrumbItemForTitle) : breadcrumbItemForTitle ? [breadcrumbItemForTitle] : breadcrumbs // breadcrumbs may be null or undefined
   }) : null), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Column, {
-    className: (0, _classnames.default)(["".concat(_PageHeaderUtils.blockClass, "__action-bar-column ").concat(_PageHeaderUtils.blockClass, "__action-bar-column--background"), (_ref7 = {}, (0, _defineProperty2.default)(_ref7, "".concat(_PageHeaderUtils.blockClass, "__action-bar-column--has-page-actions"), pageActions), (0, _defineProperty2.default)(_ref7, "".concat(_PageHeaderUtils.blockClass, "__action-bar-column--influenced-by-collapse-button"), spaceForCollapseButton), _ref7)])
+    className: (0, _classnames.default)(["".concat(_PageHeaderUtils.blockClass, "__action-bar-column ").concat(_PageHeaderUtils.blockClass, "__action-bar-column--background"), (_ref8 = {}, (0, _defineProperty2.default)(_ref8, "".concat(_PageHeaderUtils.blockClass, "__action-bar-column--has-page-actions"), pageActions), (0, _defineProperty2.default)(_ref8, "".concat(_PageHeaderUtils.blockClass, "__action-bar-column--influenced-by-collapse-button"), spaceForCollapseButton), _ref8)])
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_PageHeaderUtils.blockClass, "__action-bar-column-content"),
     ref: sizingContainerRef
@@ -503,8 +500,8 @@ PageHeader.propTypes = _objectSpread({
    *
    * NOTE: This prop is required if actionBarItems are supplied
    */
-  actionBarOverflowAriaLabel: _propTypes.default.string.isRequired.if(function (_ref9) {
-    var actionBarItems = _ref9.actionBarItems;
+  actionBarOverflowAriaLabel: _propTypes.default.string.isRequired.if(function (_ref10) {
+    var actionBarItems = _ref10.actionBarItems;
     return actionBarItems && actionBarItems.length > 0;
   }),
   /**
@@ -535,8 +532,8 @@ PageHeader.propTypes = _objectSpread({
    * If the user supplies breadcrumbs then this property is required.
    * It is used in an overflow menu when there is insufficient space to display all breadcrumbs inline.
    */
-  breadcrumbOverflowAriaLabel: _propTypes.default.string.isRequired.if(function (_ref10) {
-    var breadcrumbs = _ref10.breadcrumbs;
+  breadcrumbOverflowAriaLabel: _propTypes.default.string.isRequired.if(function (_ref11) {
+    var breadcrumbs = _ref11.breadcrumbs;
     return breadcrumbs && breadcrumbs.length > 0;
   }),
   /**
@@ -570,8 +567,8 @@ PageHeader.propTypes = _objectSpread({
     /**
      * A text version of the `label` for display, required if `label` is not a string.
      */
-    title: _propTypes.default.string.isRequired.if(function (_ref11) {
-      var label = _ref11.label;
+    title: _propTypes.default.string.isRequired.if(function (_ref12) {
+      var label = _ref12.label;
       return typeof label !== 'string';
     })
   })),
@@ -597,9 +594,9 @@ PageHeader.propTypes = _objectSpread({
    * If `hasCollapseHeaderToggle` is set and `withoutBackground` is unset/falsy then assistive text is
    * required for both the expend and collapse states of the button component used.
    */
-  collapseHeaderIconDescription: _propTypes.default.string.isRequired.if(function (_ref12) {
-    var withoutBackground = _ref12.withoutBackground,
-      hasCollapseHeaderToggle = _ref12.hasCollapseHeaderToggle;
+  collapseHeaderIconDescription: _propTypes.default.string.isRequired.if(function (_ref13) {
+    var withoutBackground = _ref13.withoutBackground,
+      hasCollapseHeaderToggle = _ref13.hasCollapseHeaderToggle;
     return !withoutBackground && hasCollapseHeaderToggle;
   }),
   /**
@@ -616,9 +613,9 @@ PageHeader.propTypes = _objectSpread({
    * If `hasCollapseHeaderToggle` is set and `withoutBackground` is unset/falsy then assistive text is
    * required for both the expend and collapse states of the button component used.
    */
-  expandHeaderIconDescription: _propTypes.default.string.isRequired.if(function (_ref13) {
-    var withoutBackground = _ref13.withoutBackground,
-      hasCollapseHeaderToggle = _ref13.hasCollapseHeaderToggle;
+  expandHeaderIconDescription: _propTypes.default.string.isRequired.if(function (_ref14) {
+    var withoutBackground = _ref14.withoutBackground,
+      hasCollapseHeaderToggle = _ref14.hasCollapseHeaderToggle;
     return !withoutBackground && hasCollapseHeaderToggle;
   }),
   /**
@@ -682,8 +679,8 @@ PageHeader.propTypes = _objectSpread({
    *
    * NOTE: This prop is required if pageActions are supplied
    */
-  pageActionsOverflowLabel: _propTypes.default.node.isRequired.if(function (_ref14) {
-    var pageActions = _ref14.pageActions;
+  pageActionsOverflowLabel: _propTypes.default.node.isRequired.if(function (_ref15) {
+    var pageActions = _ref15.pageActions;
     return pageActions && pageActions.length > 0 && !pageActions.content;
   }),
   /**