@carbon/ibm-products 2.44.0-rc.0 → 2.44.0-rc.2

package/es/components/index.d.ts

@@ -50,7 +50,6 @@ export { Nav } from "./Nav";
 export { StringFormatter } from "./StringFormatter";
 export { UserAvatar } from "./UserAvatar";
 export { ScrollGradient } from "./ScrollGradient";
-export { StatusIndicator } from "./StatusIndicator";
 export { TagOverflow } from "./TagOverflow";
 export { ActionBar } from "./ActionBar";
 export { ConditionBuilder } from "./ConditionBuilder";
@@ -68,5 +67,6 @@ export { EditTearsheet, EditTearsheetForm } from "./EditTearsheet";
 export { Guidebanner, GuidebannerElement, GuidebannerElementButton, GuidebannerElementLink } from "./Guidebanner";
 export { InlineTip, InlineTipButton, InlineTipLink } from "./InlineTip";
 export { DescriptionList, DescriptionListBody, DescriptionListCell, DescriptionListRow } from "./DescriptionList";
+export { StatusIndicator, StatusIndicatorStep } from "./StatusIndicator";
 export { FilterPanel, FilterPanelAccordion, FilterPanelAccordionItem, FilterPanelCheckbox, FilterPanelCheckboxWithOverflow, FilterPanelGroup, FilterPanelLabel, FilterPanelSearch } from "./FilterPanel";
 export { FeatureFlags as unstable_FeatureFlags, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags } from "./FeatureFlags";

package/es/index.js

@@ -122,6 +122,7 @@ export { StringFormatter } from './components/StringFormatter/StringFormatter.js
 export { UserAvatar } from './components/UserAvatar/UserAvatar.js';
 export { ScrollGradient } from './components/ScrollGradient/ScrollGradient.js';
 export { StatusIndicator } from './components/StatusIndicator/StatusIndicator.js';
+export { StatusIndicatorStep } from './components/StatusIndicator/StatusIndicatorStep.js';
 export { TagOverflow } from './components/TagOverflow/TagOverflow.js';
 export { ActionBar } from './components/ActionBar/ActionBar.js';
 export { FilterPanel } from './components/FilterPanel/FilterPanel.js';

package/lib/components/DataSpreadsheet/DataSpreadsheet.d.ts

@@ -28,6 +28,10 @@ interface DataSpreadsheetProps {
      * Sets the number of empty rows to be created when there is no data provided
      */
     defaultEmptyRowCount?: number;
+    /**
+     * Check if has custom row header component attached
+     */
+    hasCustomRowHeader?: boolean;
     /**
      * The spreadsheet id
      */
@@ -46,6 +50,14 @@ interface DataSpreadsheetProps {
      * The event handler that is called when the selection area values change
      */
     onSelectionAreaChange?: () => void;
+    /**
+     * Position of the custom row numbering component
+     */
+    renderRowHeaderDirection?: 'left' | 'right';
+    /**
+     * Component next to numbering rows
+     */
+    renderRowHeader?: (index: number) => any[];
     /**
      * The aria label applied to the Select all button
      */

package/lib/components/DataSpreadsheet/DataSpreadsheet.js

@@ -41,7 +41,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "id", "onActiveCellChange", "onSelectionAreaChange", "selectAllAriaLabel", "spreadsheetAriaLabel", "theme", "totalVisibleColumns"];
+var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "id", "onActiveCellChange", "onSelectionAreaChange", "renderRowHeader", "renderRowHeaderDirection", "selectAllAriaLabel", "spreadsheetAriaLabel", "theme", "totalVisibleColumns"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--data-spreadsheet");
 var componentName = 'DataSpreadsheet';
@@ -76,6 +76,8 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     onActiveCellChange = _ref$onActiveCellChan === void 0 ? defaults.onActiveCellChange : _ref$onActiveCellChan,
     _ref$onSelectionAreaC = _ref.onSelectionAreaChange,
     onSelectionAreaChange = _ref$onSelectionAreaC === void 0 ? defaults.onSelectionAreaChange : _ref$onSelectionAreaC,
+    renderRowHeader = _ref.renderRowHeader,
+    renderRowHeaderDirection = _ref.renderRowHeaderDirection,
     selectAllAriaLabel = _ref.selectAllAriaLabel,
     spreadsheetAriaLabel = _ref.spreadsheetAriaLabel,
     theme = _ref.theme,
@@ -147,13 +149,15 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     setActiveCellContent = _useState26[1];
   var activeCellRef = React.useRef();
   var cellEditorRulerRef = React.useRef();
+  var hasCustomRowHeader = typeof renderRowHeader === 'function';
+  var maxNumRowsCount = data.length.toString().length;
   var defaultColumn = React.useMemo(function () {
     return {
       width: 150,
-      rowHeaderWidth: 64,
+      rowHeaderWidth: hasCustomRowHeader ? 40 + maxNumRowsCount * 8.56 : 64,
       rowHeight: cellSizeValue
     };
-  }, [cellSizeValue]);
+  }, [cellSizeValue, hasCustomRowHeader, maxNumRowsCount]);
   var _useMultipleKeyTracki = useMultipleKeyTracking.useMultipleKeyTracking({
       ref: multiKeyTrackingRef,
       containerHasFocus: containerHasFocus,
@@ -663,7 +667,10 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     headerGroups: headerGroups,
     defaultColumn: defaultColumn,
     getTableBodyProps: getTableBodyProps,
+    hasCustomRowHeader: hasCustomRowHeader,
     onDataUpdate: onDataUpdate,
+    renderRowHeaderDirection: renderRowHeaderDirection,
+    renderRowHeader: renderRowHeader,
     onActiveCellChange: onActiveCellChange,
     onSelectionAreaChange: onSelectionAreaChange,
     prepareRow: prepareRow,
@@ -762,6 +769,10 @@ exports.DataSpreadsheet.propTypes = {
    * Sets the number of empty rows to be created when there is no data provided
    */
   defaultEmptyRowCount: index["default"].number,
+  /**
+   * Check if spreadsheet is using custom row header component attached
+   */
+  hasCustomRowHeader: index["default"].bool,
   /**
    * The spreadsheet id
    */
@@ -778,6 +789,14 @@ exports.DataSpreadsheet.propTypes = {
    * The event handler that is called when the selection area values change
    */
   onSelectionAreaChange: index["default"].func,
+  /**
+   * Component next to numbering rows
+   */
+  renderRowHeader: index["default"].func,
+  /**
+   * Component next to numbering rows
+   */
+  renderRowHeaderDirection: index["default"].oneOf(['left', 'right']),
   /**
    * The aria label applied to the Select all button
    */

package/lib/components/DataSpreadsheet/DataSpreadsheetBody.d.ts

@@ -52,6 +52,18 @@ interface DataSpreadsheetBodyProps {
      * The event handler that is called when the active cell changes
      */
     onActiveCellChange?: () => void;
+    /**
+     * Check if user is using custom component
+     */
+    hasCustomRowHeader?: boolean;
+    /**
+     * Component next to numbering rows
+     */
+    renderRowHeader?: (index: number) => any[];
+    /**
+     * Component next to numbering rows
+     */
+    renderRowHeaderDirection?: string;
     /**
      * The event handler that is called to set the rows for the empty spreadsheet
      */

package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js

@@ -44,6 +44,9 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     headerGroups = _ref.headerGroups,
     id = _ref.id,
     onDataUpdate = _ref.onDataUpdate,
+    renderRowHeader = _ref.renderRowHeader,
+    renderRowHeaderDirection = _ref.renderRowHeaderDirection,
+    hasCustomRowHeader = _ref.hasCustomRowHeader,
     prepareRow = _ref.prepareRow,
     rows = _ref.rows,
     selectionAreaData = _ref.selectionAreaData,
@@ -147,7 +150,7 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         return;
       });
     }
-  }, [selectionAreas, setSelectionAreas, defaultColumn, onSelectionAreaChange, setSelectionAreaData, ref, activeCellCoordinates, setActiveCellInsideSelectionArea, visibleColumns]);
+  }, [selectionAreas, setSelectionAreas, defaultColumn, onSelectionAreaChange, setSelectionAreaData, ref, activeCellCoordinates, setActiveCellInsideSelectionArea, visibleColumns, hasCustomRowHeader]);
   var populateSelectionAreaCellData = function populateSelectionAreaCellData(_ref2) {
     var rowStart = _ref2.rowStart,
       rowEnd = _ref2.rowEnd,
@@ -221,7 +224,7 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         });
       }
     }
-  }, [defaultColumn, ref, activeCellCoordinates, previousState === null || previousState === void 0 ? void 0 : previousState.rowHeight, selectionAreas, setActiveCellInsideSelectionArea, setSelectionAreas, visibleColumns]);
+  }, [defaultColumn, ref, activeCellCoordinates, previousState === null || previousState === void 0 ? void 0 : previousState.rowHeight, selectionAreas, setActiveCellInsideSelectionArea, setSelectionAreas, visibleColumns, hasCustomRowHeader]);
 
   //this method will check for any duplicate selection area and remove.
   //same selections are those have the same height, width, top, left styles. These inline styles are being set in createCellSelection util.
@@ -347,11 +350,12 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         "data-column-index": "header",
         type: "button",
         onClick: handleRowHeaderClickEvent(index),
-        className: cx__default["default"]("".concat(blockClass, "__td"), "".concat(blockClass, "__td-th"), "".concat(blockClass, "--interactive-cell-element"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__td-th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === index || checkActiveHeaderCell.checkActiveHeaderCell(index, selectionAreas, 'row')), "".concat(blockClass, "__td-th--selected-header"), checkSelectedHeaderCell.checkSelectedHeaderCell(index, selectionAreas, 'row', columns))),
+        className: cx__default["default"]("".concat(blockClass, "__td"), "".concat(blockClass, "__td-th"), "".concat(blockClass, "--interactive-cell-element"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__td_custom"), hasCustomRowHeader ? true : false), "".concat(blockClass, "__td-th--active-header"), !hasCustomRowHeader && ((activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === index || checkActiveHeaderCell.checkActiveHeaderCell(index, selectionAreas, 'row'))), "".concat(blockClass, "__td-th--selected-header"), !hasCustomRowHeader && checkSelectedHeaderCell.checkSelectedHeaderCell(index, selectionAreas, 'row', columns))),
         style: {
-          width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth
+          width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth,
+          flexDirection: hasCustomRowHeader ? renderRowHeaderDirection === 'Left' ? 'row-reverse' : row : undefined
         }
-      }, index + 1)), row.cells.map(function (cell, index) {
+      }, index + 1, hasCustomRowHeader && typeof renderRowHeader === 'function' && renderRowHeader(index))), row.cells.map(function (cell, index) {
         var _cell$column;
         var cellProps = propsHelper.prepareProps(cell.getCellProps(), 'key');
         return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
@@ -376,7 +380,7 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         }, cell.render('Cell')));
       }));
     }
-  }, [prepareRow, rows, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas, handleRowHeaderClickEvent, handleBodyCellClickEvent, handleBodyCellHoverEvent, defaultColumn, columns]);
+  }, [prepareRow, renderRowHeader, renderRowHeaderDirection, rows, hasCustomRowHeader, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas, handleRowHeaderClickEvent, handleBodyCellClickEvent, handleBodyCellHoverEvent, defaultColumn, columns]);
   var spreadsheetBodyRef = React.useRef();
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     ref: spreadsheetBodyRef,
@@ -442,6 +446,10 @@ DataSpreadsheetBody.propTypes = {
    */
   /**@ts-ignore */
   getTableBodyProps: index["default"].func,
+  /**
+   * Check if spreadsheet is using custom row header component attached
+   */
+  hasCustomRowHeader: index["default"].bool,
   /**
    * Headers provided from useTable hook
    */
@@ -466,6 +474,14 @@ DataSpreadsheetBody.propTypes = {
    * Prepare row function from react-table
    */
   prepareRow: index["default"].func,
+  /**
+   * Component next to numbering rows
+   */
+  renderRowHeader: index["default"].func,
+  /**
+   * Component next to numbering rows
+   */
+  renderRowHeaderDirection: index["default"].string,
   /**
    * All of the spreadsheet row data
    */

package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js

@@ -184,6 +184,9 @@ var DataSpreadsheetHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       "data-row-index": "header",
       "data-column-index": "header",
       type: "button",
+      style: {
+        width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth
+      },
       tabIndex: -1,
       "aria-label": selectAllAriaLabel,
       onClick: handleSelectAllClick,

package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js

@@ -57,7 +57,7 @@ InlineEditButton.propTypes = {
   nonEditCell: index["default"].bool,
   placeholder: index["default"].string,
   renderIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
-  type: index["default"].oneOf(['text', 'number', 'selection', 'date']),
+  type: index["default"].oneOf(['text', 'number', 'selection', 'date', 'checkbox']),
   value: index["default"].oneOfType([index["default"].string, index["default"].node])
 };
 

package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js

@@ -75,6 +75,7 @@ var InlineEditCell = function InlineEditCell(_ref) {
   var _ref2 = config || {},
     inputProps = _ref2.inputProps;
   var textInputRef = React.useRef();
+  var checkboxRef = React.useRef();
   var numberInputRef = React.useRef();
   var dropdownRef = React.useRef();
   var datePickerRef = React.useRef();
@@ -217,10 +218,36 @@ var InlineEditCell = function InlineEditCell(_ref) {
   var handleKeyDown = function handleKeyDown(event) {
     var key = event.key;
     switch (key) {
+      case 'ArrowRight':
+      case 'ArrowLeft':
+      case 'ArrowUp':
+      case 'ArrowDown':
+        if (inEditMode && event.target.type === 'checkbox') {
+          var newCellId = getNewCellId(key);
+          saveCellData(cellValue);
+          setInitialValue(cellValue);
+          dispatch({
+            type: 'EXIT_EDIT_MODE',
+            payload: newCellId
+          });
+          setInEditMode(false);
+          sendFocusBackToGrid();
+        }
+        break;
       // Save cell contents to data
       case 'Tab':
       case 'Enter':
         {
+          if (type === 'checkbox') {
+            // Since checkbox doesn't need to click into it to enter `inEditMode` we don't need to check for it
+            var _newCellId = getNewCellId(key);
+            dispatch({
+              type: 'EXIT_EDIT_MODE',
+              payload: _newCellId
+            });
+            setInEditMode(false);
+            sendFocusBackToGrid();
+          }
           if (inEditMode) {
             // Dropdown saves are handled in the Dropdown's/DatePicker's onChange prop
             if (type === 'selection' || type === 'date') {
@@ -234,12 +261,12 @@ var InlineEditCell = function InlineEditCell(_ref) {
             if (isInvalid) {
               return;
             }
-            var newCellId = getNewCellId(key);
+            var _newCellId2 = getNewCellId(key);
             saveCellData(cellValue);
             setInitialValue(cellValue);
             dispatch({
               type: 'EXIT_EDIT_MODE',
-              payload: newCellId
+              payload: _newCellId2
             });
             setInEditMode(false);
             sendFocusBackToGrid();
@@ -434,9 +461,27 @@ var InlineEditCell = function InlineEditCell(_ref) {
       ref: numberInputRef
     }));
   };
+  var renderCheckBoxCell = function renderCheckBoxCell() {
+    return /*#__PURE__*/React__default["default"].createElement(react.Checkbox, _rollupPluginBabelHelpers["extends"]({
+      labelText: cellLabel || 'Checkbox'
+    }, inputProps, {
+      className: cx__default["default"]("".concat(blockClass, "__inline-edit--outer-cell-checkbox"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__inline-edit--outer-cell-checkbox-focus"), activeCellId === cellId)),
+      id: cellId,
+      hideLabel: true,
+      checked: cellValue,
+      onChange: function onChange(event, _ref10) {
+        var checked = _ref10.checked;
+        setCellValue(checked);
+        if (inputProps.onChange) {
+          inputProps.onChange(checked);
+        }
+      },
+      ref: checkboxRef
+    }));
+  };
   var renderTextInput = function renderTextInput() {
-    var _ref10 = config || {},
-      validator = _ref10.validator;
+    var _ref11 = config || {},
+      validator = _ref11.validator;
     var isInvalid = validator === null || validator === void 0 ? void 0 : validator(cellValue);
     return /*#__PURE__*/React__default["default"].createElement(react.TextInput, _rollupPluginBabelHelpers["extends"]({
       labelText: cellLabel,
@@ -487,7 +532,7 @@ var InlineEditCell = function InlineEditCell(_ref) {
       onClick: !nonEditCell ? handleInlineCellClick : addActiveState,
       onKeyDown: !nonEditCell ? handleKeyDown : null,
       className: cx__default["default"]("".concat(blockClass, "__inline-edit--outer-cell-button"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__inline-edit--outer-cell-button--").concat(rowSize), rowSize), "".concat(blockClass, "__inline-edit--outer-cell-button--lg"), !rowSize), "".concat(blockClass, "__inline-edit--outer-cell-button--invalid"), inEditMode && (config === null || config === void 0 || (_config$validator = config.validator) === null || _config$validator === void 0 ? void 0 : _config$validator.call(config, cellValue))), "".concat(blockClass, "__static--outer-cell"), !disabledCell))
-    }, !nonEditCell && !disabledCell && renderRegularCell(), (!inEditMode || disabledCell) && /*#__PURE__*/React__default["default"].createElement(InlineEditButton.InlineEditButton, {
+    }, !nonEditCell && !disabledCell && type !== 'checkbox' && renderRegularCell(), (!inEditMode || disabledCell) && type !== 'checkbox' && /*#__PURE__*/React__default["default"].createElement(InlineEditButton.InlineEditButton, {
       isActiveCell: cellId === activeCellId,
       renderIcon: setRenderIcon(),
       label: getLabel(),
@@ -498,7 +543,7 @@ var InlineEditCell = function InlineEditCell(_ref) {
       nonEditCell: nonEditCell,
       columnConfig: cell.column,
       type: type
-    }), !nonEditCell && inEditMode && cellId === activeCellId && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, type === 'text' && renderTextInput(), type === 'number' && renderNumberInput(), type === 'selection' && renderSelectCell(), type === 'date' && renderDateCell()))
+    }), type === 'checkbox' && renderCheckBoxCell(), !nonEditCell && inEditMode && cellId === activeCellId && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, type === 'text' && renderTextInput(), type === 'number' && renderNumberInput(), type === 'selection' && renderSelectCell(), type === 'date' && renderDateCell()))
   );
 };
 InlineEditCell.propTypes = {
@@ -516,7 +561,7 @@ InlineEditCell.propTypes = {
   nonEditCell: index["default"].bool,
   placeholder: index["default"].string,
   tabIndex: index["default"].number,
-  type: index["default"].oneOf(['text', 'number', 'selection', 'date']),
+  type: index["default"].oneOf(['text', 'number', 'selection', 'date', 'checkbox']),
   value: index["default"].oneOfType([index["default"].string, index["default"].node, index["default"].object])
 };
 

package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js

@@ -78,7 +78,7 @@ var handleGridKeyPress = function handleGridKeyPress(_ref) {
   };
 
   // Stop grid key listener when in edit mode
-  var isEditing = document.activeElement.id === activeCellId && document.activeElement.id === editId || dropdownIsActive() || datePickerIsActive();
+  var isEditing = focusedCell.getAttribute('data-inline-type') !== 'checkbox' && document.activeElement.id === activeCellId && document.activeElement.id === editId || dropdownIsActive() || datePickerIsActive();
   if (isEditing || !gridActive) {
     return;
   }
@@ -91,6 +91,7 @@ var handleGridKeyPress = function handleGridKeyPress(_ref) {
     event.preventDefault();
   }
   var isDisabledCell = focusedCell.getAttribute('data-disabled') === 'false' ? false : true;
+  var isEditableCell = !event.target.classList.contains("".concat(blockClass, "__inline-edit-button--non-edit"));
   var sharedUpdateParams = {
     oldId: activeCellId,
     instance: instance
@@ -198,7 +199,7 @@ var handleGridKeyPress = function handleGridKeyPress(_ref) {
       case 'Enter':
         {
           // Disabled cells are not allowed to go into edit mode
-          if (isDisabledCell) {
+          if (isDisabledCell || !isEditableCell) {
             return;
           }
           // Only go into edit mode if there is no editId, meaning that we're not already in edit mode
@@ -211,6 +212,13 @@ var handleGridKeyPress = function handleGridKeyPress(_ref) {
                 dropdownTrigger === null || dropdownTrigger === void 0 || dropdownTrigger.click();
               }, 1);
             }
+            if (focusedType === 'checkbox') {
+              setTimeout(function () {
+                var checkboxTrigger = focusedCell.querySelector('input');
+                checkboxTrigger === null || checkboxTrigger === void 0 || checkboxTrigger.click();
+                checkboxTrigger === null || checkboxTrigger === void 0 || checkboxTrigger.focus();
+              }, 1);
+            }
             if (focusedType === 'date') {
               setTimeout(function () {
                 var dateInputTrigger = focusedCell.querySelector('input');

package/lib/components/Datagrid/useInlineEdit.js

@@ -49,7 +49,7 @@ var useInlineEdit = function useInlineEdit(hooks) {
     return [props, {
       className: cx__default["default"]("".concat(blockClass, "__cell"), "".concat(blockClass, "__cell-inline-edit")),
       role: 'gridcell',
-      children: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !staticCell && inlineEditType === 'text' && renderInlineEditComponent(inlineEditType), !staticCell && inlineEditType === 'number' && renderInlineEditComponent(inlineEditType), !staticCell && inlineEditType === 'selection' && renderInlineEditComponent(inlineEditType), !staticCell && inlineEditType === 'date' && renderInlineEditComponent(inlineEditType), staticCell && /*#__PURE__*/React__default["default"].createElement(InlineEditCell.InlineEditCell, {
+      children: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !staticCell && inlineEditType === 'text' && renderInlineEditComponent(inlineEditType), !staticCell && inlineEditType === 'number' && renderInlineEditComponent(inlineEditType), !staticCell && inlineEditType === 'selection' && renderInlineEditComponent(inlineEditType), inlineEditType === 'checkbox' && renderInlineEditComponent(inlineEditType), !staticCell && inlineEditType === 'date' && renderInlineEditComponent(inlineEditType), staticCell && /*#__PURE__*/React__default["default"].createElement(InlineEditCell.InlineEditCell, {
         config: columnInlineEditConfig,
         tabIndex: -1,
         value: (_cell$value3 = cell.value) === null || _cell$value3 === void 0 ? void 0 : _cell$value3.value,

package/lib/components/EditTearsheet/EditTearsheet.d.ts

@@ -5,7 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ReactNode, PropsWithChildren } from 'react';
-export declare const FormContext: React.Context<null>;
+export type FormContextType = {
+    currentForm: number;
+    setFormTitle: () => void;
+};
+export declare const FormContext: React.Context<FormContextType | null>;
 export declare const FormNumberContext: React.Context<number>;
 interface EditTearsheetProps extends PropsWithChildren {
     /**

package/lib/components/EditTearsheet/EditTearsheet.js

@@ -27,7 +27,6 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var _excluded = ["cancelButtonText", "children", "className", "description", "influencerWidth", "label", "onClose", "open", "submitButtonText", "title", "verticalPosition", "onRequestSubmit", "onFormChange", "sideNavAriaLabel"];
 var componentName = 'EditTearsheet';
 var blockClass = "".concat(settings.pkg.prefix, "--tearsheet-edit");
-
 // This is a general context for the forms container
 // containing information about the state of the container
 // and providing some callback methods for forms to use

package/lib/components/EditTearsheet/EditTearsheetForm.d.ts

@@ -1,2 +1,45 @@
-export let EditTearsheetForm: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * 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, { ReactNode } from 'react';
+interface EditTearsheetFormBaseProps {
+    /**
+     * Content that shows in the tearsheet form
+     */
+    children?: ReactNode;
+    /**
+     * Sets an optional className to be added to the tearsheet form
+     */
+    className?: string;
+    /**
+     * Sets an optional description on the form component
+     */
+    description?: string;
+    /**
+     * This optional prop will render your form content inside of a fieldset html element
+     * and is defaulted to true.
+     * You can set this prop to `false` if you have multiple fieldset elements or want to control the children of your Full Page's form content.
+     */
+    hasFieldset?: boolean;
+    /**
+     * Sets an optional subtitle on the form component
+     */
+    subtitle?: string;
+    /**
+     * Sets the title text for a tearsheet form
+     */
+    title: ReactNode;
+}
+type EditTearsheetFormFieldsetTypes = {
+    hasFieldset?: false;
+    fieldsetLegendText: string;
+} | {
+    hasFieldset: true;
+    fieldsetLegendText: string;
+};
+type EditTearsheetFormProps = EditTearsheetFormBaseProps & EditTearsheetFormFieldsetTypes;
+export declare let EditTearsheetForm: React.ForwardRefExoticComponent<EditTearsheetFormProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/EditTearsheet/EditTearsheetForm.js

@@ -91,6 +91,7 @@ exports.EditTearsheetForm.propTypes = {
    * You can set the `hasFieldset` prop to false if you have multiple fieldset elements or want to control the children of your Full Page's form content.
    * Otherwise, use CSS to hide/remove this label text.
    */
+  /**@ts-ignore */
   fieldsetLegendText: index["default"].string.isRequired.if(function (_ref2) {
     var hasFieldset = _ref2.hasFieldset;
     return !!hasFieldset;
@@ -100,10 +101,12 @@ exports.EditTearsheetForm.propTypes = {
    * and is defaulted to true.
    * You can set this prop to `false` if you have multiple fieldset elements or want to control the children of your Full Page's form content.
    */
+  /**@ts-ignore*/
   hasFieldset: index["default"].bool,
   /**
    * Sets an optional subtitle on the form component
    */
+  /**@ts-ignore*/
   subtitle: index["default"].string,
   /**
    * Sets the title text for a tearsheet form

package/lib/components/HTTPErrors/HTTPError403/HTTPError403.js

@@ -53,6 +53,12 @@ exports.HTTPError403 = /*#__PURE__*/React__default["default"].forwardRef(functio
   }));
 });
 
+/**@ts-ignore*/
+exports.HTTPError403.deprecated = {
+  level: 'warn',
+  details: "Please replace ".concat(componentName, " with FullPageError")
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 exports.HTTPError403 = settings.pkg.checkComponentEnabled(exports.HTTPError403, componentName);
 

package/lib/components/HTTPErrors/HTTPError404/HTTPError404.js

@@ -53,6 +53,12 @@ exports.HTTPError404 = /*#__PURE__*/React__default["default"].forwardRef(functio
   }));
 });
 
+/**@ts-ignore*/
+exports.HTTPError404.deprecated = {
+  level: 'warn',
+  details: "Please replace ".concat(componentName, " with FullPageError")
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 exports.HTTPError404 = settings.pkg.checkComponentEnabled(exports.HTTPError404, componentName);
 

package/lib/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.js

@@ -53,6 +53,12 @@ exports.HTTPErrorOther = /*#__PURE__*/React__default["default"].forwardRef(funct
   }));
 });
 
+/**@ts-ignore*/
+exports.HTTPErrorOther.deprecated = {
+  level: 'warn',
+  details: "Please replace ".concat(componentName, " with FullPageError")
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 exports.HTTPErrorOther = settings.pkg.checkComponentEnabled(exports.HTTPErrorOther, componentName);
 

package/lib/components/RemoveModal/RemoveModal.d.ts

@@ -58,6 +58,10 @@ interface RemoveModalProps extends React.ComponentProps<typeof ComposedModal> {
      * Specify the text for the primary button
      */
     primaryButtonText?: string;
+    /**
+     * Specify the danger description on the primary button
+     */
+    primaryDangerDescription?: string;
     /**
      * The name of the resource being acted upon
      */

package/lib/components/RemoveModal/RemoveModal.js

@@ -25,7 +25,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["body", "className", "iconDescription", "inputInvalidText", "inputLabelText", "inputPlaceholderText", "label", "onClose", "onRequestSubmit", "open", "portalTarget", "preventCloseOnClickOutside", "primaryButtonDisabled", "primaryButtonText", "resourceName", "secondaryButtonText", "textConfirmation", "title"];
+var _excluded = ["body", "className", "iconDescription", "inputInvalidText", "inputLabelText", "inputPlaceholderText", "label", "onClose", "onRequestSubmit", "open", "portalTarget", "preventCloseOnClickOutside", "primaryButtonDisabled", "primaryButtonText", "primaryDangerDescription", "resourceName", "secondaryButtonText", "textConfirmation", "title"];
 var componentName = 'RemoveModal';
 
 /**
@@ -49,6 +49,7 @@ exports.RemoveModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     preventCloseOnClickOutside = _ref.preventCloseOnClickOutside,
     primaryButtonDisabled = _ref.primaryButtonDisabled,
     primaryButtonText = _ref.primaryButtonText,
+    primaryDangerDescription = _ref.primaryDangerDescription,
     resourceName = _ref.resourceName,
     secondaryButtonText = _ref.secondaryButtonText,
     textConfirmation = _ref.textConfirmation,
@@ -118,6 +119,7 @@ exports.RemoveModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, secondaryButtonText), /*#__PURE__*/React__default["default"].createElement(react.Button, {
     type: "submit",
     kind: "danger",
+    dangerDescription: primaryDangerDescription,
     onClick: onRequestSubmit,
     disabled: primaryButtonStatus
   }, primaryButtonText))));
@@ -182,6 +184,10 @@ exports.RemoveModal.propTypes = {
    * Specify the text for the primary button
    */
   primaryButtonText: index["default"].string,
+  /**
+   * Specify the danger description on the primary button
+   */
+  primaryDangerDescription: index["default"].string,
   /**
    * The name of the resource being acted upon
    */