@carbon/ibm-products 2.0.0-rc.25 → 2.0.0-rc.26

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js

@@ -0,0 +1,112 @@
+/**
+ * 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 React from 'react';
+import { PropTypes } from 'prop-types';
+import { Checkbox } from '@carbon/react';
+import { isColumnVisible } from './common';
+import DraggableElement from '../../DraggableElement';
+import { pkg } from '../../../../../settings';
+var blockClass = "".concat(pkg.prefix, "--datagrid");
+export var DraggableItemsList = function DraggableItemsList(_ref) {
+  var columns = _ref.columns,
+      filterString = _ref.filterString,
+      focusIndex = _ref.focusIndex,
+      getNextIndex = _ref.getNextIndex,
+      isTableSortable = _ref.isTableSortable,
+      moveElement = _ref.moveElement,
+      onSelectColumn = _ref.onSelectColumn,
+      setAriaRegionText = _ref.setAriaRegionText,
+      setColumnsObject = _ref.setColumnsObject,
+      setFocusIndex = _ref.setFocusIndex;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, columns // hide the columns without Header, e.g the sticky actions, spacer
+  .filter(function (colDef) {
+    var _colDef$Header$props$, _colDef$Header$props;
+
+    var sortableTitle = isTableSortable && ((_colDef$Header$props$ = colDef.Header().props.children.props) === null || _colDef$Header$props$ === void 0 ? void 0 : _colDef$Header$props$.title);
+    return !!colDef.Header.props && !!((_colDef$Header$props = colDef.Header.props) !== null && _colDef$Header$props !== void 0 && _colDef$Header$props.title) || isTableSortable && !!sortableTitle;
+  }).filter(function (colDef) {
+    return !colDef.isAction;
+  }).filter(function (colDef) {
+    var _colDef$Header$props$2, _colDef$Header$props2, _colDef$Header$props3;
+
+    var sortableTitle = isTableSortable && ((_colDef$Header$props$2 = colDef.Header().props.children.props) === null || _colDef$Header$props$2 === void 0 ? void 0 : _colDef$Header$props$2.title);
+    return filterString.length === 0 || (isTableSortable ? sortableTitle === null || sortableTitle === void 0 ? void 0 : sortableTitle.toLowerCase().includes(filterString) : (_colDef$Header$props2 = colDef.Header.props) === null || _colDef$Header$props2 === void 0 ? void 0 : (_colDef$Header$props3 = _colDef$Header$props2.title) === null || _colDef$Header$props3 === void 0 ? void 0 : _colDef$Header$props3.toLowerCase().includes(filterString)) && colDef.id !== 'spacer';
+  }).map(function (colDef, i) {
+    var _colDef$Header$props$3, _colDef$Header$props4, _colDef$Header$props5, _colDef$Header$props6, _colDef$Header$props7;
+
+    var isSortableColumn = !!colDef.canSort && !!isTableSortable;
+    var sortableTitle = isTableSortable && ((_colDef$Header$props$3 = colDef.Header().props.children.props) === null || _colDef$Header$props$3 === void 0 ? void 0 : _colDef$Header$props$3.title);
+    var searchString = new RegExp('(' + filterString + ')');
+    var res = filterString.length ? isSortableColumn ? sortableTitle.toLowerCase().split(searchString) : colDef.Header.props.title.toLowerCase().split(searchString) : null;
+    var firstWord = res !== null ? res[0] === '' ? res[1].charAt(0).toUpperCase() + res[1].substring(1) : res[0].charAt(0).toUpperCase() + res[0].substring(1) : null;
+    var highlightedText = res !== null ? res[0] === '' ? "<strong>".concat(firstWord, "</strong>") + res[2] : firstWord + "<strong>".concat(res[1], "</strong>") + res[2] : isSortableColumn ? sortableTitle : (_colDef$Header$props4 = colDef.Header.props) === null || _colDef$Header$props4 === void 0 ? void 0 : _colDef$Header$props4.title;
+    var isFrozenColumn = !!colDef.sticky;
+    var listContents = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Checkbox, {
+      wrapperClassName: "".concat(blockClass, "__customize-columns-checkbox-wrapper"),
+      checked: isColumnVisible(colDef),
+      disabled: isFrozenColumn,
+      onChange: function onChange(_, _ref2) {
+        var checked = _ref2.checked;
+        return onSelectColumn(colDef, checked);
+      },
+      id: "".concat(blockClass, "__customization-column-").concat(colDef.id),
+      labelText: isSortableColumn ? sortableTitle : (_colDef$Header$props5 = colDef.Header.props) === null || _colDef$Header$props5 === void 0 ? void 0 : _colDef$Header$props5.title,
+      title: isSortableColumn ? sortableTitle : (_colDef$Header$props6 = colDef.Header.props) === null || _colDef$Header$props6 === void 0 ? void 0 : _colDef$Header$props6.title,
+      className: "".concat(blockClass, "__customize-columns-checkbox"),
+      hideLabel: true
+    }), /*#__PURE__*/React.createElement("div", {
+      dangerouslySetInnerHTML: {
+        __html: highlightedText
+      },
+      className: "".concat(blockClass, "__customize-columns-checkbox-visible-label")
+    }));
+    return /*#__PURE__*/React.createElement(DraggableElement, {
+      key: colDef.id,
+      index: i,
+      listData: columns,
+      setListData: setColumnsObject,
+      id: "dnd-datagrid-columns-".concat(colDef.id),
+      type: "column-customization",
+      disabled: filterString.length > 0 || isFrozenColumn,
+      ariaLabel: isSortableColumn ? sortableTitle : (_colDef$Header$props7 = colDef.Header.props) === null || _colDef$Header$props7 === void 0 ? void 0 : _colDef$Header$props7.title,
+      onGrab: setAriaRegionText,
+      isFocused: focusIndex === i,
+      moveElement: moveElement,
+      onArrowKeyDown: function onArrowKeyDown(e, isGrabbed, currentIndex) {
+        if (isGrabbed) {
+          var _columns$nextIndex;
+
+          var nextIndex = getNextIndex(columns, currentIndex, e.key);
+          e.preventDefault();
+          e.stopPropagation();
+
+          if (nextIndex >= 0 && !((_columns$nextIndex = columns[nextIndex]) !== null && _columns$nextIndex !== void 0 && _columns$nextIndex.sticky)) {
+            setFocusIndex(nextIndex);
+            moveElement(currentIndex, nextIndex);
+            e.target.scrollIntoView({
+              block: 'center'
+            });
+          }
+        }
+      },
+      isSticky: isFrozenColumn,
+      selected: isColumnVisible(colDef)
+    }, listContents);
+  }));
+};
+DraggableItemsList.propTypes = {
+  columns: PropTypes.array.isRequired,
+  filterString: PropTypes.string.isRequired,
+  focusIndex: PropTypes.number.isRequired,
+  getNextIndex: PropTypes.func.isRequired,
+  isTableSortable: PropTypes.bool,
+  moveElement: PropTypes.func.isRequired,
+  onSelectColumn: PropTypes.func.isRequired,
+  setAriaRegionText: PropTypes.func.isRequired,
+  setColumnsObject: PropTypes.func.isRequired,
+  setFocusIndex: PropTypes.func.isRequired
+};

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js

@@ -23,6 +23,7 @@ var TearsheetWrapper = function TearsheetWrapper(_ref) {
 
   return /*#__PURE__*/React.createElement(CustomizeColumnsTearsheet, _extends({}, rest, labels, {
     isOpen: isTearsheetOpen,
+    isTableSortable: instance === null || instance === void 0 ? void 0 : instance.isTableSortable,
     setIsTearsheetOpen: setIsTearsheetOpen,
     columnDefinitions: instance.allColumns,
     originalColumnDefinitions: instance.columns,

package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js

@@ -1,28 +1,27 @@
 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 = ["legendText"];
-// @flow
+var _excluded = ["align", "legendText"];
 
-/*
- * 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 * as React from 'react';
 import PropTypes from 'prop-types';
 import { Settings } from '@carbon/react/icons';
-import { IconButton, Popover, PopoverContent } from '@carbon/react';
+import { IconButton, Toggletip, ToggletipContent, ToggletipButton } from '@carbon/react';
 import cx from 'classnames';
 import RowSizeRadioGroup from './RowSizeRadioGroup';
 import { pkg } from '../../../../../settings';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 
 var RowSizeDropdown = function RowSizeDropdown(_ref) {
-  var _ref$legendText = _ref.legendText,
+  var _ref$align = _ref.align,
+      align = _ref$align === void 0 ? 'bottom' : _ref$align,
+      _ref$legendText = _ref.legendText,
       legendText = _ref$legendText === void 0 ? 'Row height' : _ref$legendText,
       props = _objectWithoutProperties(_ref, _excluded);
 
@@ -31,31 +30,38 @@ var RowSizeDropdown = function RowSizeDropdown(_ref) {
       isOpen = _React$useState2[0],
       setIsOpen = _React$useState2[1];
 
-  return /*#__PURE__*/React.createElement(Popover, {
-    align: "bottom-right",
-    caret: false,
-    dropShadow: false,
-    open: isOpen,
-    className: "".concat(blockClass, "__row-height-settings-popover")
-  }, /*#__PURE__*/React.createElement(IconButton, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !isOpen && /*#__PURE__*/React.createElement(IconButton, {
     kind: "ghost",
-    align: "left",
+    align: align,
     onClick: function onClick() {
-      return setIsOpen(!isOpen);
+      return setIsOpen(function (prevOpen) {
+        return !prevOpen;
+      });
     },
     label: legendText,
-    className: cx("".concat(blockClass, "__row-size-button"), _defineProperty({}, "".concat(blockClass, "__row-size-button--open"), isOpen))
+    className: cx("".concat(blockClass, "__row-size-button"))
   }, /*#__PURE__*/React.createElement(Settings, {
     size: 16
-  })), /*#__PURE__*/React.createElement(PopoverContent, null, /*#__PURE__*/React.createElement(RowSizeRadioGroup, _extends({}, props, {
+  })), isOpen && /*#__PURE__*/React.createElement(Toggletip, {
+    defaultOpen: true,
+    className: "".concat(blockClass, "__row-size-toggle-tip")
+  }, /*#__PURE__*/React.createElement(ToggletipButton, {
+    className: cx("".concat(blockClass, "__row-size-toggle-tip-button"), "".concat(blockClass, "__row-size-button--open")),
+    label: legendText
+  }, /*#__PURE__*/React.createElement(Settings, {
+    size: 16
+  })), /*#__PURE__*/React.createElement(ToggletipContent, {
+    className: "".concat(blockClass, "__row-size-toggle-tip-content")
+  }, /*#__PURE__*/React.createElement(RowSizeRadioGroup, _extends({}, props, {
     legendText: legendText,
     hideRadioGroup: function hideRadioGroup() {
       setIsOpen(false);
     }
-  }))));
+  })))));
 };
 
 RowSizeDropdown.propTypes = {
+  align: IconButton.propTypes.align,
   datagridName: PropTypes.string,
   legendText: PropTypes.string,
   light: PropTypes.bool,

package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js

@@ -62,6 +62,7 @@ var RowSizeRadioGroup = function RowSizeRadioGroup(_ref) {
     }
 
     return /*#__PURE__*/React.createElement(RadioButton, {
+      className: "".concat(blockClass, "__row-size-radio-button"),
       key: option.value,
       labelText: labelText,
       value: option.value,

package/es/components/Datagrid/index.js

@@ -1,9 +1,8 @@
-/*
- * 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.
  */
 export { Datagrid } from './Datagrid';
 export { default as useDatagrid } from './useDatagrid';
@@ -23,4 +22,5 @@ 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 useFiltering } from './useFiltering';
+export { default as useFiltering } from './useFiltering';
+export { getAutoSizedColumnWidth } from './utils/getAutoSizedColumnWidth';

package/es/components/Datagrid/useInfiniteScroll.js

@@ -5,14 +5,18 @@
  * US Government Users Restricted Rights - Use, duplication or disclosure
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 import debounce from 'lodash/debounce';
 import useParentDimensions from './useParentDimensions';
 import useResizeTable from './useResizeTable';
+import { pkg } from '../../settings';
 
 var useInfiniteScroll = function useInfiniteScroll(hooks) {
   useParentDimensions(hooks);
   useResizeTable(hooks);
+  useEffect(function () {
+    pkg.checkReportFeatureEnabled('Datagrid.useInfiniteScroll');
+  }, []);
 
   var useInstance = function useInstance(instance) {
     var isFetching = instance.isFetching,

package/es/components/Datagrid/useOnRowClick.js

@@ -1,7 +1,7 @@
 /*
  * Licensed Materials - Property of IBM
  * 5724-Q36
- * (c) Copyright IBM Corp. 2020
+ * (c) Copyright IBM Corp. 2020, 2023
  * US Government Users Restricted Rights - Use, duplication or disclosure
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
@@ -16,9 +16,9 @@ var useOnRowClick = function useOnRowClick(hooks) {
       var id = row.id,
           toggleRowSelected = row.toggleRowSelected;
 
-      var onClick = function onClick() {
+      var onClick = function onClick(event) {
         if (!isFetching && onRowClick) {
-          onRowClick(row);
+          onRowClick(row, event);
           instance.selectedFlatRows && instance.selectedFlatRows.map(function (toggleRow) {
             return toggleRow.toggleRowSelected(false);
           });

package/es/components/Datagrid/useSortableColumns.js

@@ -26,6 +26,8 @@ var ordering = {
 
 var useSortableColumns = function useSortableColumns(hooks) {
   var sortableVisibleColumns = function sortableVisibleColumns(visibleColumns, _ref) {
+    var _instance$customizeCo;
+
     var instance = _ref.instance;
     var onSort = instance.onSort;
 
@@ -46,7 +48,7 @@ var useSortableColumns = function useSortableColumns(hooks) {
 
     var sortableColumns = visibleColumns.map(function (column) {
       var icon = function icon(col, props) {
-        if (col.isSorted) {
+        if (col !== null && col !== void 0 && col.isSorted) {
           switch (col.isSortedDesc) {
             case false:
               return /*#__PURE__*/React.createElement(ArrowUp, _extends({
@@ -83,13 +85,13 @@ var useSortableColumns = function useSortableColumns(hooks) {
 
         return column.disableSortBy === true ? column.Header : /*#__PURE__*/React.createElement(Button, {
           onClick: function onClick() {
-            return onSortClick(headerProp.column);
+            return onSortClick(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column);
           },
           kind: "ghost",
           renderIcon: function renderIcon(props) {
-            return icon(headerProp.column, props);
+            return icon(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column, props);
           },
-          className: cx("".concat(carbon.prefix, "--table-sort ").concat(blockClass, "--table-sort"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "--table-sort--desc"), headerProp.column.isSortedDesc), _defineProperty(_cx, "".concat(blockClass, "--table-sort--asc"), headerProp.column.isSortedDesc === false), _cx))
+          className: cx("".concat(carbon.prefix, "--table-sort ").concat(blockClass, "--table-sort"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "--table-sort--desc"), headerProp === null || headerProp === void 0 ? void 0 : headerProp.column.isSortedDesc), _defineProperty(_cx, "".concat(blockClass, "--table-sort--asc"), (headerProp === null || headerProp === void 0 ? void 0 : headerProp.column.isSortedDesc) === false), _cx))
         }, column.Header);
       };
 
@@ -98,7 +100,7 @@ var useSortableColumns = function useSortableColumns(hooks) {
         minWidth: column.disableSortBy === true ? 0 : 90
       });
     });
-    return _toConsumableArray(sortableColumns);
+    return (_instance$customizeCo = instance.customizeColumnsProps) !== null && _instance$customizeCo !== void 0 && _instance$customizeCo.isTearsheetOpen ? visibleColumns : _toConsumableArray(sortableColumns);
   };
 
   var sortInstanceProps = function sortInstanceProps(instance) {

package/es/components/Datagrid/utils/getAutoSizedColumnWidth.js

@@ -0,0 +1,29 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+
+/**
+ * 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.
+ */
+
+/**
+ * Calculates the auto sized width of a column
+ * @param {Array<object>} rows - The datagrid rows
+ * @param {string} accessor - The accessor for the column
+ * @param {string} headerText - The header text for the column
+ */
+export var getAutoSizedColumnWidth = function getAutoSizedColumnWidth(rows, accessor, headerText) {
+  var maxWidth = 400;
+  var minWidth = 58;
+  var letterSpacing = 10;
+  var cellLength = Math.max.apply(Math, _toConsumableArray(rows.map(function (row) {
+    return ("".concat(row[accessor]) || '').length;
+  })).concat([headerText.length]));
+
+  if (cellLength <= 3) {
+    return minWidth;
+  }
+
+  return Math.min(maxWidth, cellLength * letterSpacing + 16);
+};

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; }
 
@@ -14,13 +15,14 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * LICENSE file in the root directory of this source tree.
  */
 // Import portions of React that are needed.
-import React from 'react'; // Other standard imports.
+import React, { useRef, useEffect, useState } from 'react'; // Other standard imports.
 
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { pkg } from '../../settings'; // Carbon and package components we use.
 
-import { Button, ButtonSet } from '@carbon/react'; // The block part of our conventional BEM class names (blockClass__E--M).
+import { Button, ButtonSet } from '@carbon/react';
+import useExample from './useExample'; // The block part of our conventional BEM class names (blockClass__E--M).
 
 var blockClass = "".concat(pkg.prefix, "--example-component");
 var componentName = 'ExampleComponent'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
@@ -29,6 +31,7 @@ var componentName = 'ExampleComponent'; // NOTE: the component SCSS is not impor
 var defaults = {
   primaryKind: 'primary',
   secondaryKind: 'secondary',
+  secondaryIcon: null,
   size: 'lg'
 };
 /**
@@ -40,6 +43,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,
@@ -48,11 +52,22 @@ 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,
+      _ref$secondaryIcon = _ref.secondaryIcon,
+      secondaryIcon = _ref$secondaryIcon === void 0 ? defaults.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) {
@@ -67,6 +82,14 @@ export var ExampleComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     }
   };
 
+  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
     className, // Apply any supplied class names to the main HTML element.
@@ -78,6 +101,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 +110,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.
 
 ExampleComponent = pkg.checkComponentEnabled(ExampleComponent, componentName); // The display name of the component, used by React. Note that displayName
@@ -142,6 +166,11 @@ ExampleComponent.propTypes = {
    */
   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').
    */
@@ -155,5 +184,10 @@ 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,51 @@
+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

@@ -21,7 +21,7 @@ import { pkg } from '../../settings'; // Carbon and package components we use.
 
 /* TODO: @use(s) of carbon components and other package components. */
 
-import { Button, IconButton, usePrefix } from '@carbon/react';
+import { IconButton, usePrefix } from '@carbon/react';
 import { Close, Edit, EditOff, Checkmark, WarningFilled } from '@carbon/react/icons'; // The block part of our conventional BEM class names (blockClass__E--M).
 
 var blockClass = "".concat(pkg.prefix, "--inline-edit");
@@ -285,35 +285,30 @@ export var InlineEditV1 = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
       className: cx("".concat(blockClass, "__toolbar"), (_cx3 = {}, _defineProperty(_cx3, "".concat(blockClass, "__toolbar--animation"), toolbarAnimation), _defineProperty(_cx3, "".concat(blockClass, "__toolbar--saveable"), refInput.current && value !== internalValue), _cx3))
     }, showValidation && /*#__PURE__*/React.createElement("div", {
       className: "".concat(blockClass, "__validation-icon")
-    }, validationIcon), editing ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, _extends({
+    }, validationIcon), editing ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconButton, _extends({
       className: "".concat(blockClass, "__cancel"),
       kind: "ghost",
-      hasIconOnly: true,
-      iconDescription: cancelDescription,
+      label: cancelDescription,
       onClick: handleCancel,
-      renderIcon: function renderIcon(props) {
-        return /*#__PURE__*/React.createElement(Close, _extends({
-          size: 16
-        }, props));
-      }
-    }, tipPositions.cancel)), /*#__PURE__*/React.createElement(Button, _extends({
+      size: size
+    }, tipPositions.cancel), /*#__PURE__*/React.createElement(Close, {
+      size: 16
+    })), /*#__PURE__*/React.createElement(IconButton, _extends({
       className: "".concat(blockClass, "__save"),
       kind: "ghost",
-      hasIconOnly: true,
-      iconDescription: saveDescription,
+      label: saveDescription,
       onClick: handleSave,
-      renderIcon: function renderIcon(props) {
-        return /*#__PURE__*/React.createElement(Checkmark, _extends({
-          size: 16
-        }, props));
-      },
-      disabled: value === internalValue
-    }, tipPositions.save))) : /*#__PURE__*/React.createElement(IconButton, _extends({
+      disabled: value === internalValue,
+      size: size
+    }, tipPositions.save), /*#__PURE__*/React.createElement(Checkmark, {
+      size: 16
+    }))) : /*#__PURE__*/React.createElement(IconButton, _extends({
       className: cx("".concat(blockClass, "__edit"), _defineProperty({}, "".concat(blockClass, "__edit--always-visible"), editAlwaysVisible)),
       kind: "ghost",
       label: editDescription,
       onClick: handleEdit,
-      disabled: disabled
+      disabled: disabled,
+      size: size
     }, tipPositions.edit), disabled ? /*#__PURE__*/React.createElement(EditOff, {
       size: 16
     }) : /*#__PURE__*/React.createElement(Edit, {