@carbon/ibm-products 1.51.0 → 1.53.0

package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js

@@ -23,7 +23,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { Link, TooltipIcon } from 'carbon-components-react';
 import { pkg, carbon } from '../../settings';
-import { useResizeDetector } from 'react-resize-detector';
+import { useResizeObserver } from '../../global/js/hooks/useResizeObserver';
 import { ArrowLeft16 } from '@carbon/icons-react';
 
 // Carbon and package components we use.
@@ -238,24 +238,19 @@ export var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
     /* istanbul ignore next */ // not sure how to test resize
     checkFullyVisibleBreadcrumbItems();
   };
-
-  /* istanbul ignore next */ // not sure how to test resize
-  var handleBreadcrumbItemsResize = function handleBreadcrumbItemsResize() {
-    /* istanbul ignore next */ // not sure how to test resize
-    checkFullyVisibleBreadcrumbItems();
-  };
   var backItem = breadcrumbs[breadcrumbs.length - 1];
   /* istanbul ignore if */ // not sure how to test media queries
   if (backItem.isCurrentPage) {
     backItem = breadcrumbs[breadcrumbs.length - 2];
   }
-  useResizeDetector({
-    onResize: handleBreadcrumbItemsResize,
-    targetRef: sizingContainerRef
+
+  // container resize
+  useResizeObserver(sizingContainerRef, {
+    callback: handleResize
   });
-  useResizeDetector({
-    onResize: handleResize,
-    targetRef: breadcrumbItemWithOverflow
+  // item resize
+  useResizeObserver(breadcrumbItemWithOverflow, {
+    callback: handleResize
   });
   return /*#__PURE__*/React.createElement("div", {
     className: cx(blockClass, className, _defineProperty({}, "".concat(blockClass, "__with-items"), displayedBreadcrumbItems.length > 1)),

package/es/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js

@@ -21,7 +21,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 import React, { useEffect, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { useResizeDetector } from 'react-resize-detector';
+import { useResizeObserver } from '../../global/js/hooks/useResizeObserver';
 import { ButtonSet, Button } from 'carbon-components-react';
 import { ButtonMenu, ButtonMenuItem } from '../ButtonMenu';
 import { pkg, carbon } from '../../settings';
@@ -135,18 +135,14 @@ export var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
       }, prepareProps(other, ['iconDescription', 'renderIcon'])));
     }).reverse());
   });
-  useResizeDetector({
-    onResize: checkFullyVisibleItems,
-    targetRef: sizingContainerRefSet
+  useResizeObserver(sizingContainerRefSet, {
+    callback: checkFullyVisibleItems
   });
-  useResizeDetector({
-    onResize: checkFullyVisibleItems,
-    targetRef: sizingContainerRefCombo
+  useResizeObserver(sizingContainerRefCombo, {
+    callback: checkFullyVisibleItems
   });
-  useResizeDetector({
-    onResize: checkFullyVisibleItems,
-    targetRef: spaceAvailableRef,
-    handleWidth: true
+  useResizeObserver(spaceAvailableRef, {
+    callback: checkFullyVisibleItems
   });
   return /*#__PURE__*/React.createElement("div", {
     className: cx([blockClass, className, _defineProperty({}, "".concat(blockClass, "--right"), rightAlign)]),

package/es/components/Datagrid/Datagrid/DatagridToolbar.js

@@ -7,10 +7,10 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Add16, OverflowMenuVertical16 } from '@carbon/icons-react';
 import { DataTable, TableBatchActions, TableBatchAction } from 'carbon-components-react';
-import { useResizeDetector } from 'react-resize-detector';
+import { useResizeObserver } from '../../../global/js/hooks/useResizeObserver';
 import { ButtonMenu, ButtonMenuItem } from '../../ButtonMenu';
 import { pkg, carbon } from '../../../settings';
 import cx from 'classnames';
@@ -124,9 +124,9 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
   })), renderBatchActionOverflow());
 };
 var DatagridToolbar = function DatagridToolbar(datagridState) {
-  var _useResizeDetector = useResizeDetector(),
-    width = _useResizeDetector.width,
-    ref = _useResizeDetector.ref;
+  var ref = useRef(null);
+  var _useResizeObserver = useResizeObserver(ref),
+    width = _useResizeObserver.width;
   var DatagridActions = datagridState.DatagridActions,
     DatagridBatchActions = datagridState.DatagridBatchActions,
     batchActions = datagridState.batchActions,

package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js

@@ -13,7 +13,7 @@ import React, { useEffect } from 'react';
 import { VariableSizeList } from 'react-window';
 import { DataTable } from 'carbon-components-react';
 import { px } from '@carbon/layout';
-import { useResizeDetector } from 'react-resize-detector';
+import { useResizeObserver } from '../../../global/js/hooks/useResizeObserver';
 import { pkg } from '../../../settings';
 import DatagridHead from './DatagridHead';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
@@ -51,9 +51,8 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
     var gridRefElement = gridRef === null || gridRef === void 0 ? void 0 : gridRef.current;
     gridRefElement.style.width = gridRefElement === null || gridRefElement === void 0 ? void 0 : gridRefElement.clientWidth;
   };
-  useResizeDetector({
-    onResize: handleVirtualGridResize,
-    targetRef: gridRef
+  useResizeObserver(gridRef, {
+    callback: handleVirtualGridResize
   });
   var syncScroll = function syncScroll(e) {
     var virtualBody = e.target;

package/es/components/Datagrid/index.js

@@ -23,5 +23,6 @@ export { default as useSelectAllWithToggle } from './useSelectAllToggle';
 export { default as useColumnCenterAlign } from './useColumnCenterAlign';
 export { default as useColumnOrder } from './useColumnOrder';
 export { default as useInlineEdit } from './useInlineEdit';
+export { default as useEditableCell } from './useEditableCell';
 export { default as useFiltering } from './useFiltering';
 export { getAutoSizedColumnWidth } from './utils/getAutoSizedColumnWidth';

package/es/components/Datagrid/useActionsColumn.js

@@ -5,19 +5,22 @@ var _excluded = ["id", "itemText", "onClick", "icon"],
   _excluded2 = ["id", "onClick", "shouldHideMenuItem", "shouldDisableMenuItem", "disabled"];
 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) { _defineProperty(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; }
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2021
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+/**
+ * Copyright IBM Corp. 2021, 2023
+ *
+ * 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 React from 'react';
+
+import React, { useEffect } from 'react';
 import cx from 'classnames';
 import { IconSkeleton, OverflowMenu, OverflowMenuItem } from 'carbon-components-react';
 import { pkg } from '../../settings';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var useActionsColumn = function useActionsColumn(hooks) {
+  useEffect(function () {
+    pkg.checkReportFeatureEnabled('Datagrid.useActionsColumn');
+  }, []);
   var useAttachActionsOnInstance = function useAttachActionsOnInstance(instance) {
     var rowActions = instance.rowActions,
       isFetching = instance.isFetching,

package/es/components/Datagrid/useCustomizeColumns.js

@@ -4,15 +4,19 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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) { _defineProperty(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; }
 /**
- * Copyright IBM Corp. 2022, 2022
+ * Copyright IBM Corp. 2022, 2023
  *
  * 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 * as React from 'react';
+import { pkg } from '../../settings';
 import { CustomizeColumnsTearsheetWrapper, ToggleButtonWrapper } from './Datagrid/addons/CustomizeColumns';
 var useCustomizeColumns = function useCustomizeColumns(hooks) {
+  React.useEffect(function () {
+    pkg.checkReportFeatureEnabled('Datagrid.useCustomizeColumns');
+  }, []);
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isTearsheetOpen = _React$useState2[0],

package/es/components/Datagrid/useEditableCell.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * 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 useInlineEdit from './useInlineEdit';
+var useEditableCell = function useEditableCell(hooks) {
+  useInlineEdit(hooks, 'usingEditableCell');
+};
+export default useEditableCell;

package/es/components/Datagrid/useExpandedRow.js

@@ -2,17 +2,21 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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) { _defineProperty(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; }
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2020
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+/**
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * 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 { useState } from 'react';
+
+import { useEffect, useState } from 'react';
+import { pkg } from '../../settings';
 import DatagridExpandedRow from './Datagrid/DatagridExpandedRow';
 import useRowExpander from './useRowExpander';
 var useExpandedRow = function useExpandedRow(hooks) {
+  useEffect(function () {
+    pkg.checkReportFeatureEnabled('Datagrid.useExpandedRow');
+  }, []);
   useRowExpander(hooks);
   var useInstance = function useInstance(instance) {
     var rows = instance.rows,

package/es/components/Datagrid/useFiltering.js

@@ -2,18 +2,21 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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) { _defineProperty(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; }
-// @flow
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2022
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+/**
+ * Copyright IBM Corp. 2022, 2023
+ *
+ * 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 { useMemo } from 'react';
+
+import { useMemo, useEffect } from 'react';
+import { pkg } from '../../settings';
 import { FilterFlyout } from './Datagrid/addons/Filtering';
 import { BATCH } from './Datagrid/addons/Filtering/constants';
 var useFiltering = function useFiltering(hooks) {
+  useEffect(function () {
+    pkg.checkReportFeatureEnabled('Datagrid.useFiltering');
+  }, []);
   var filterTypes = useMemo(function () {
     return {
       date: function date(rows, id, _ref) {

package/es/components/Datagrid/useInlineEdit.js

@@ -1,17 +1,26 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2022
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+/**
+ * Copyright IBM Corp. 2022, 2023
+ *
+ * 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 React from 'react';
+
+import React, { useEffect } from 'react';
 import { pkg } from '../../settings';
 import cx from 'classnames';
 import { InlineEditCell } from './Datagrid/addons/InlineEdit/InlineEditCell';
+import { warn } from '../../global/js/utils/pconsole';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
-var useInlineEdit = function useInlineEdit(hooks) {
+var useInlineEdit = function useInlineEdit(hooks, usingEditableCell) {
+  useEffect(function () {
+    pkg.checkReportFeatureEnabled('Datagrid.useInlineEdit');
+  }, []);
+  useEffect(function () {
+    if (!usingEditableCell) {
+      warn("The 'useInlineEdit' hook is being renamed in Carbon for IBM Products v2 to 'useEditableCell'. You can use this newly renamed hook now or upgrade when moving to v2.");
+    }
+  }, [usingEditableCell]);
   var addInlineEdit = function addInlineEdit(props, _ref) {
     var _cell$column, _cell$column$inlineEd, _instance$columns$fil;
     var cell = _ref.cell,

package/es/components/Datagrid/useNestedRows.js

@@ -1,16 +1,20 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2020
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+/**
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * 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 { useEffect } from 'react';
 import { pkg } from '../../settings';
 import cx from 'classnames';
 import useNestedRowExpander from './useNestedRowExpander';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var useNestedRows = function useNestedRows(hooks) {
+  useEffect(function () {
+    pkg.checkReportFeatureEnabled('Datagrid.useNestedRows');
+  }, []);
   useNestedRowExpander(hooks);
   var marginLeft = 24;
   var getRowProps = function getRowProps(props, _ref) {

package/es/components/ExampleComponent/ExampleComponent.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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 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) { _defineProperty(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; }
 /**
@@ -12,12 +13,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 
 // Import portions of React that are needed.
-import React from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 
 // Other standard imports.
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { pkg } from '../../settings';
+import useExample from './useExample';
 
 // Carbon and package components we use.
 import { Button, ButtonSet } from 'carbon-components-react';
@@ -43,6 +45,7 @@ export var ExampleComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     boxedBorder = _ref.boxedBorder,
     className = _ref.className,
     disabled = _ref.disabled,
+    usesExampleHook = _ref.usesExampleHook,
     onPrimaryClick = _ref.onPrimaryClick,
     onSecondaryClick = _ref.onSecondaryClick,
     primaryButtonLabel = _ref.primaryButtonLabel,
@@ -51,10 +54,18 @@ export var ExampleComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     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 = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(primaryButtonLabel),
+    _useState2 = _slicedToArray(_useState, 2),
+    thePrimaryButtonLabel = _useState2[0],
+    setThePrimaryButtonLabel = _useState2[1];
+  var _useExample = useExample(usesExampleHook),
+    _useExample2 = _slicedToArray(_useExample, 1),
+    exampleUse = _useExample2[0];
   var modeClass = boxedBorder ? "".concat(blockClass, "--boxed-set") : "".concat(blockClass, "--shadow-set");
   var handlePrimaryClick = function handlePrimaryClick(e) {
     if (onPrimaryClick) {
@@ -66,6 +77,14 @@ export var ExampleComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref)
       onSecondaryClick(e);
     }
   };
+  var theSecondaryIcon = useRef(secondaryIcon && pkg.checkReportFeatureEnabled('ExampleComponent.secondaryIcon') ? secondaryIcon : null);
+  useEffect(function () {
+    if (usesExampleHook !== undefined && pkg.checkReportFeatureEnabled('ExampleComponent.useExample')) {
+      setThePrimaryButtonLabel("".concat(primaryButtonLabel, " ").concat(exampleUse.toFixed(1), "s"));
+    } else {
+      setThePrimaryButtonLabel(primaryButtonLabel);
+    }
+  }, [primaryButtonLabel, usesExampleHook, exampleUse]);
   return /*#__PURE__*/React.createElement(ButtonSet, _extends({}, rest, {
     className: cx(blockClass,
     // Apply the block class to the main HTML element
@@ -78,6 +97,7 @@ export var ExampleComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     className: "".concat(blockClass, "__secondary-button"),
     kind: secondaryKind,
     onClick: handleSecondaryClick,
+    renderIcon: theSecondaryIcon.current,
     disabled: disabled,
     size: size
   }, secondaryButtonLabel), /*#__PURE__*/React.createElement(Button, {
@@ -86,7 +106,7 @@ export var ExampleComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     onClick: handlePrimaryClick,
     disabled: disabled,
     size: size
-  }, primaryButtonLabel));
+  }, thePrimaryButtonLabel));
 });
 
 // Return a placeholder if not released and not enabled by feature flag.
@@ -136,6 +156,10 @@ ExampleComponent.propTypes = {
    * The secondary button label.
    */
   secondaryButtonLabel: PropTypes.string.isRequired,
+  /**
+   * The icon to use for the secondary button.
+   */
+  secondaryIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * The kind of button for the secondary button ('secondary' or 'tertiary').
    */
@@ -147,5 +171,9 @@ ExampleComponent.propTypes = {
   /**
    * Optional style settings for the containing node.
    */
-  style: PropTypes.object
+  style: PropTypes.object,
+  /**
+   * Hook example timeout (in seconds) or undefined
+   */
+  usesExampleHook: PropTypes.number
 };

package/es/components/ExampleComponent/useExample.js

@@ -0,0 +1,49 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/**
+ * 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.
+ */
+import { useState, useEffect } from 'react';
+import { pkg } from '../../settings';
+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 = 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 = _slicedToArray(_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 && 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
+  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];
+};
+export default useExample;

package/es/components/InlineEditV1/InlineEditV1.js

@@ -306,7 +306,9 @@ InlineEditV1.deprecated = {
   level: 'warn',
   details: "The v1 version of this component is being deprecated. please switch to the v2 component as soon as possible."
 };
-pkg.logDeprecated(InlineEditV1, componentName);
+
+// needed to show deprecation message but based on host component name
+InlineEditV1 = pkg.checkComponentEnabled(InlineEditV1, 'InlineEdit');
 
 // The types and DocGen commentary for the component props,
 // in alphabetical order (for consistency).

package/es/components/NonLinearReading/NonLinearReading.js

@@ -12,7 +12,7 @@ var _excluded = ["children", "className", "definition", "theme"];
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { ChevronUp16 } from '@carbon/icons-react';
+import { ChevronDown16 } from '@carbon/icons-react';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { pkg } from '../../settings';
 
@@ -47,16 +47,16 @@ export var NonLinearReading = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     });
   };
   return /*#__PURE__*/React.createElement("span", _extends({}, rest, {
-    className: cx(blockClass, className),
+    className: cx(blockClass, "".concat(blockClass, "__").concat(theme), className),
     ref: ref,
     role: "main"
   }, getDevtoolsProps(componentName)), ' ', /*#__PURE__*/React.createElement("button", {
     type: "button",
     "aria-expanded": isOpen,
-    className: cx("".concat(blockClass, "__term-").concat(theme), [isOpen ? ["".concat(blockClass, "__term-").concat(theme, "--open")] : ["".concat(blockClass, "__term-").concat(theme, "--closed")]]),
+    className: cx("".concat(blockClass, "__keyword"), [isOpen ? ["".concat(blockClass, "__keyword-open")] : ["".concat(blockClass, "__keyword-closed")]]),
     onClick: handleToggle
-  }, children, isOpen && /*#__PURE__*/React.createElement(ChevronUp16, null)), ' ', isOpen && /*#__PURE__*/React.createElement("span", {
-    className: "".concat(blockClass, "--body-").concat(theme)
+  }, children, /*#__PURE__*/React.createElement(ChevronDown16, null)), ' ', isOpen && /*#__PURE__*/React.createElement("span", {
+    className: "".concat(blockClass, "__body")
   }, definition), ' ');
 });
 
@@ -69,7 +69,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.node.isRequired,
   /**
@@ -77,7 +77,7 @@ NonLinearReading.propTypes = {
    */
   className: PropTypes.string,
   /**
-   * The content that appears when the term is toggled open.
+   * The content that appears when the keyword is toggled open.
    */
   definition: PropTypes.node.isRequired,
   /**