@carbon/ibm-products 2.14.0 → 2.15.0

package/es/components/CreateTearsheet/preview-components/MultiStepWithStepInErrorState.js

@@ -0,0 +1,145 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/* eslint-disable react/prop-types */
+/**
+ * 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, { useState } from 'react';
+import { Button, Column, Grid, TextInput, NumberInput } from '@carbon/react';
+import cx from 'classnames';
+import { pkg } from '../../../settings';
+import { CreateTearsheet } from '../CreateTearsheet';
+import { CreateTearsheetStep } from '../CreateTearsheetStep';
+var blockClass = "".concat(pkg.prefix, "--tearsheet-create-multi-step");
+export var MultiStepWithStepInErrorState = function MultiStepWithStepInErrorState(_ref) {
+  var backButtonText = _ref.backButtonText,
+    cancelButtonText = _ref.cancelButtonText,
+    className = _ref.className,
+    description = _ref.description,
+    influencerWidth = _ref.influencerWidth,
+    label = _ref.label,
+    nextButtonText = _ref.nextButtonText,
+    submitButtonText = _ref.submitButtonText,
+    title = _ref.title;
+  var _useState = useState(750),
+    _useState2 = _slicedToArray(_useState, 1),
+    simulatedDelay = _useState2[0];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    open = _useState4[0],
+    setOpen = _useState4[1];
+  var _useState5 = useState(''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    stepOneTextInputValue = _useState6[0],
+    setStepOneTextInputValue = _useState6[1];
+  var _useState7 = useState(''),
+    _useState8 = _slicedToArray(_useState7, 2),
+    topicDescriptionValue = _useState8[0],
+    setTopicDescriptionValue = _useState8[1];
+  var _useState9 = useState(1),
+    _useState10 = _slicedToArray(_useState9, 2),
+    stepTwoTextInputValue = _useState10[0],
+    setStepTwoTextInputValue = _useState10[1];
+  useState('one-day');
+  var _useState11 = useState(true),
+    _useState12 = _slicedToArray(_useState11, 2),
+    stepOneIsInvalid = _useState12[0],
+    setStepOneIsInvalid = _useState12[1];
+  var _useState13 = useState(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    stepTwoIsInvalid = _useState14[0],
+    setStepTwoIsInvalid = _useState14[1];
+  var clearCreateData = function clearCreateData() {
+    setStepOneTextInputValue('');
+    setTopicDescriptionValue('');
+    setStepTwoTextInputValue(1);
+    setStepOneIsInvalid(true);
+    setStepTwoIsInvalid(true);
+    setOpen(false);
+  };
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("style", null, ".".concat(blockClass, " { opacity: 0 }"), ";"), /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return setOpen(!open);
+    }
+  }, open ? 'Close CreateTearsheet' : 'Open CreateTearsheet'), /*#__PURE__*/React.createElement(CreateTearsheet, {
+    influencerWidth: influencerWidth,
+    label: label,
+    className: cx(blockClass, className),
+    submitButtonText: submitButtonText,
+    cancelButtonText: cancelButtonText,
+    backButtonText: backButtonText,
+    nextButtonText: nextButtonText,
+    description: description,
+    title: title,
+    open: open,
+    onClose: clearCreateData,
+    onRequestSubmit: function onRequestSubmit() {
+      return new Promise(function (resolve) {
+        setTimeout(function () {
+          clearCreateData();
+          resolve();
+        }, simulatedDelay);
+      });
+    }
+  }, /*#__PURE__*/React.createElement(CreateTearsheetStep, {
+    title: "Topic name",
+    fieldsetLegendText: "Topic information",
+    disableSubmit: stepOneIsInvalid,
+    subtitle: "This is the unique name used to recognize your topic",
+    invalid: stepOneIsInvalid
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Column, {
+    xlg: 8,
+    lg: 8,
+    md: 8,
+    sm: 4
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    labelText: "Topic name",
+    id: "tearsheet-multi-step-story-text-input-multi-step-1",
+    value: stepOneTextInputValue,
+    placeholder: "Enter topic name",
+    onChange: function onChange(event) {
+      setStepOneIsInvalid(!event.target.value.length);
+      setStepOneTextInputValue(event.target.value);
+    },
+    invalid: stepOneIsInvalid,
+    invalidText: "This is a required field",
+    onBlur: function onBlur() {}
+  }), /*#__PURE__*/React.createElement(TextInput, {
+    labelText: "Topic description (optional)",
+    id: "tearsheet-multi-step-story-text-input-multi-step-1-input-2",
+    value: topicDescriptionValue,
+    placeholder: "Enter topic description",
+    onChange: function onChange(event) {
+      return setTopicDescriptionValue(event.target.value);
+    }
+  })))), /*#__PURE__*/React.createElement(CreateTearsheetStep, {
+    title: "Partitions",
+    disableSubmit: stepTwoIsInvalid,
+    subtitle: "One or more partitions make up a topic. A partition is an ordered list of messages.",
+    description: "Partitions are distributed across the brokers in order to increase the scalability of your topic. You can also use them to distribute messages across the members of a consumer group.",
+    fieldsetLegendText: "Partition information",
+    invalid: stepTwoIsInvalid
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Column, {
+    xlg: 3,
+    lg: 3,
+    md: 8,
+    sm: 4
+  }, /*#__PURE__*/React.createElement(NumberInput, {
+    iconDescription: "Choose a number",
+    id: "carbon-number",
+    min: 1,
+    max: 100,
+    value: stepTwoTextInputValue,
+    label: "Partitions",
+    helperText: "1 partition is sufficient for getting started but, production systems often have more.",
+    invalidText: "Max partitions is 100, min is 1",
+    hideSteppers: true,
+    onChange: function onChange(event) {
+      event.target.value > 0 && event.target.value <= 100 ? setStepTwoIsInvalid(false) : setStepTwoIsInvalid(true);
+      setStepTwoTextInputValue(event.target.value);
+    }
+  }))))));
+};

package/es/components/Datagrid/Datagrid/DatagridContent.js

@@ -27,6 +27,7 @@ import { useMultipleKeyTracking } from '../../DataSpreadsheet/hooks';
 import { useSubscribeToEventEmitter } from './addons/Filtering/hooks';
 import { clearSingleFilter } from './addons/Filtering/FilterProvider';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
+var gcClass = "".concat(blockClass, "__grid-container");
 export var DatagridContent = function DatagridContent(_ref) {
   var _cx4;
   var datagridState = _ref.datagridState,
@@ -142,7 +143,7 @@ export var DatagridContent = function DatagridContent(_ref) {
     });
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableContainer, {
-    className: cx("".concat(blockClass, "__grid-container"), withVirtualScroll || fullHeightDatagrid ? "".concat(blockClass, "__full-height") : '', DatagridPagination ? "".concat(blockClass, "__with-pagination") : '', useDenseHeader ? "".concat(blockClass, "__dense-header") : '', (_cx4 = {}, _defineProperty(_cx4, "".concat(blockClass, "__grid-container-grid-active"), gridActive), _defineProperty(_cx4, "".concat(blockClass, "__grid-container-inline-edit"), withInlineEdit), _defineProperty(_cx4, "".concat(blockClass, "__grid-container-grid-active--without-toolbar"), withInlineEdit && !DatagridActions), _cx4)),
+    className: cx("".concat(gcClass), (_cx4 = {}, _defineProperty(_cx4, "".concat(gcClass, "-active"), gridActive), _defineProperty(_cx4, "".concat(gcClass, "-active--without-toolbar"), withInlineEdit && !DatagridActions), _defineProperty(_cx4, "".concat(gcClass, "-inline-edit"), withInlineEdit), _defineProperty(_cx4, "".concat(blockClass, "__full-height"), withVirtualScroll || fullHeightDatagrid), _defineProperty(_cx4, "".concat(blockClass, "__with-pagination"), DatagridPagination), _defineProperty(_cx4, "".concat(blockClass, "__dense-header"), useDenseHeader), _cx4)),
     title: gridTitle,
     description: gridDescription
   }, /*#__PURE__*/React.createElement(DatagridToolbar, datagridState), /*#__PURE__*/React.createElement("div", {
@@ -152,7 +153,8 @@ export var DatagridContent = function DatagridContent(_ref) {
     updateMethod: "batch"
   }, getFilterFlyoutProps(), {
     title: filterProps.panelTitle,
-    filterSections: filterProps.sections
+    filterSections: filterProps.sections,
+    autoHideFilters: filterProps.autoHideFilters
   })), /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__table-container-inner")
   }, renderFilterSummary(), withInlineEdit ? /*#__PURE__*/React.createElement("div", {

package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -8,14 +8,13 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * LICENSE file in the root directory of this source tree.
  */
 
-// @flow
 import React, { useState, useEffect } from 'react';
 import cx from 'classnames';
 import { TableHeader, TableRow } from '@carbon/react';
 import { px } from '@carbon/layout';
 import { selectionColumnId } from '../common-column-ids';
 import { pkg } from '../../../settings';
-import { handleColumnResizeEndEvent, handleColumnResizeStartEvent, handleColumnResizingEvent } from './addons/stateReducer';
+import { handleColumnResizeEndEvent, handleColumnResizingEvent } from './addons/stateReducer';
 import { getNodeTextContent } from '../../../global/js/utils/getNodeTextContent';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var getAccessibilityProps = function getAccessibilityProps(header) {
@@ -58,38 +57,6 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
   var _useState = useState(2),
     _useState2 = _slicedToArray(_useState, 1),
     incrementAmount = _useState2[0];
-  var getClientXPosition = function getClientXPosition(event) {
-    var isTouchEvent = false;
-    if (event.type === 'touchstart') {
-      // Do not respond to multiple touches (e.g. 2 or 3 fingers)
-      if (event.touches && event.touches.length > 1) {
-        return;
-      }
-      isTouchEvent = true;
-    }
-    var clientX = isTouchEvent ? Math.round(event.touches[0].clientX) : event.clientX;
-    var closestHeader = event.target.closest('th');
-    var closestHeaderCoords = closestHeader.getBoundingClientRect();
-    var headerOffset = closestHeaderCoords.left;
-    var offsetValue = clientX - headerOffset;
-    return offsetValue;
-  };
-  useEffect(function () {
-    var isResizing = datagridState.state.isResizing;
-    if (isResizing) {
-      var onColResizeEnd = datagridState.onColResizeEnd;
-      document.addEventListener('mouseup', function () {
-        handleColumnResizeEndEvent(datagridState.dispatch, onColResizeEnd, isResizing);
-        document.activeElement.blur();
-      });
-    }
-    return function () {
-      document.removeEventListener('mouseup', function () {
-        return handleColumnResizeEndEvent(datagridState.dispatch);
-      });
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [datagridState.state.isResizing]);
   return /*#__PURE__*/React.createElement(TableRow, _extends({}, headerGroup.getHeaderGroupProps(), {
     className: cx("".concat(blockClass, "__head"), headerGroup.getHeaderGroupProps().className),
     ref: headRef
@@ -110,8 +77,7 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
       state = datagridState.state,
       dispatch = datagridState.dispatch,
       onColResizeEnd = datagridState.onColResizeEnd;
-    var columnResizing = state.columnResizing,
-      isResizing = state.isResizing;
+    var columnResizing = state.columnResizing;
     var columnWidths = columnResizing.columnWidths;
     var originalCol = visibleColumns[index];
     return /*#__PURE__*/React.createElement(TableHeader, _extends({}, header.getHeaderProps(), {
@@ -119,22 +85,11 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
       key: header.id,
       "aria-hidden": header.id === 'spacer' && 'true'
     }, getAccessibilityProps(header)), header.render('Header'), header.getResizerProps && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", _extends({}, header.getResizerProps(), {
-      onMouseMove: function onMouseMove(event) {
-        if (isResizing) {
-          var newWidth = getClientXPosition(event);
-          // Sets a min width for resizing so at least one character from the column header is visible
-          if (newWidth >= 50) {
-            handleColumnResizingEvent(dispatch, header, newWidth);
-          }
-        }
-      },
-      onMouseDown: function onMouseDown() {
-        return handleColumnResizeStartEvent(dispatch, header.id);
-      },
       onKeyDown: function onKeyDown(event) {
         var key = event.key;
         if (key === 'ArrowLeft' || key === 'ArrowRight') {
-          var currentColumnWidth = columnWidths[header.id] || (datagridState.isTableSortable && originalCol.width < 90 ? 90 : originalCol.width);
+          var originalColMinWidth = originalCol.minWidth || 90;
+          var currentColumnWidth = columnWidths[header.id] || (datagridState.isTableSortable && originalCol.width < originalColMinWidth ? originalColMinWidth : originalCol.width);
           if (key === 'ArrowLeft') {
             if (currentColumnWidth - incrementAmount > Math.max(minWidth, 50)) {
               var newWidth = currentColumnWidth - incrementAmount;
@@ -148,7 +103,7 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
         }
       },
       onKeyUp: function onKeyUp() {
-        return handleColumnResizeEndEvent(dispatch, onColResizeEnd, header.id);
+        return handleColumnResizeEndEvent(dispatch, onColResizeEnd, header.id, true);
       },
       className: cx("".concat(blockClass, "__col-resizer-range")),
       type: "range",

package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js

@@ -57,7 +57,9 @@ var FilterPanel = function FilterPanel(_ref) {
     _ref$searchPlaceholde = _ref.searchPlaceholder,
     searchPlaceholder = _ref$searchPlaceholde === void 0 ? 'Find filters' : _ref$searchPlaceholde,
     _ref$reactTableFilter = _ref.reactTableFiltersState,
-    reactTableFiltersState = _ref$reactTableFilter === void 0 ? [] : _ref$reactTableFilter;
+    reactTableFiltersState = _ref$reactTableFilter === void 0 ? [] : _ref$reactTableFilter,
+    _ref$autoHideFilters = _ref.autoHideFilters,
+    autoHideFilters = _ref$autoHideFilters === void 0 ? false : _ref$autoHideFilters;
   /** State */
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -75,7 +77,8 @@ var FilterPanel = function FilterPanel(_ref) {
       variation: PANEL,
       reactTableFiltersState: reactTableFiltersState,
       onCancel: onCancel,
-      panelOpen: panelOpen
+      panelOpen: panelOpen,
+      autoHideFilters: autoHideFilters
     }),
     filtersState = _useFilters.filtersState,
     prevFiltersObjectArrayRef = _useFilters.prevFiltersObjectArrayRef,
@@ -238,6 +241,7 @@ var FilterPanel = function FilterPanel(_ref) {
   })), renderActionSet()));
 };
 FilterPanel.propTypes = {
+  autoHideFilters: PropTypes.bool,
   closeIconDescription: PropTypes.string,
   filterPanelMinHeight: PropTypes.number,
   filterSections: PropTypes.array,

package/es/components/Datagrid/Datagrid/addons/Filtering/OverflowCheckboxes.js

@@ -21,7 +21,7 @@ var OverflowCheckboxes = function OverflowCheckboxes(_ref) {
     showAllItems = _useState2[0],
     setShowAllItems = _useState2[1];
   var firstFiveItems = filtersState[column].value.slice(0, 5);
-  var restOfTheItems = filtersState[column].value.slice(5, filtersState[column].value.length - 1);
+  var restOfTheItems = filtersState[column].value.slice(5, filtersState[column].value.length);
   var renderCheckbox = function renderCheckbox(option) {
     return /*#__PURE__*/React.createElement(Checkbox, _extends({
       key: option.labelText

package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js

@@ -52,7 +52,8 @@ var useFilters = function useFilters(_ref2) {
     reactTableFiltersState = _ref2.reactTableFiltersState,
     _ref2$onCancel = _ref2.onCancel,
     onCancel = _ref2$onCancel === void 0 ? function () {} : _ref2$onCancel,
-    panelOpen = _ref2.panelOpen;
+    panelOpen = _ref2.panelOpen,
+    autoHideFilters = _ref2.autoHideFilters;
   /** State */
   var _useState = useState(getInitialStateFromFilters(filters, variation, reactTableFiltersState)),
     _useState2 = _slicedToArray(_useState, 2),
@@ -204,7 +205,7 @@ var useFilters = function useFilters(_ref2) {
       return console.error("type: ".concat(type, "; does not exist as a type of filter."));
     }
     var renderCheckboxes = function renderCheckboxes() {
-      if (variation === PANEL && filtersState[column].value.length > 10) {
+      if (variation === PANEL && filtersState[column].value.length > 10 && !autoHideFilters) {
         return /*#__PURE__*/React.createElement(OverflowCheckboxes, {
           components: components,
           type: type,

package/es/components/Datagrid/Datagrid/addons/stateReducer.js

@@ -1,3 +1,4 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -9,24 +10,19 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * LICENSE file in the root directory of this source tree.
  */
 
+import { pkg } from '../../../../settings';
 var COLUMN_RESIZE_START = 'columnStartResizing';
 var COLUMN_RESIZING = 'columnResizing';
 var COLUMN_RESIZE_END = 'columnDoneResizing';
 var INIT = 'init';
-export var handleColumnResizeStartEvent = function handleColumnResizeStartEvent(dispatch, headerId) {
-  dispatch({
-    type: COLUMN_RESIZE_START,
-    payload: {
-      headerId: headerId
-    }
-  });
-};
-export var handleColumnResizeEndEvent = function handleColumnResizeEndEvent(dispatch, onColResizeEnd, headerId) {
+var blockClass = "".concat(pkg.prefix, "--datagrid");
+export var handleColumnResizeEndEvent = function handleColumnResizeEndEvent(dispatch, onColResizeEnd, headerId, isKeyEvent) {
   dispatch({
     type: COLUMN_RESIZE_END,
     payload: {
       onColResizeEnd: onColResizeEnd,
-      headerId: headerId
+      headerId: headerId,
+      isKeyEvent: isKeyEvent
     }
   });
 };
@@ -60,42 +56,45 @@ export var stateReducer = function stateReducer(newState, action) {
       }
     case COLUMN_RESIZE_START:
       {
-        var headerId = action.payload.headerId;
+        var _ref = action.payload || {},
+          headerId = _ref.headerId;
         return _objectSpread(_objectSpread({}, newState), {}, {
           isResizing: headerId
         });
       }
     case COLUMN_RESIZING:
       {
-        var _ref = action.payload || {},
-          _headerId = _ref.headerId,
-          newWidth = _ref.newWidth,
-          defaultWidth = _ref.defaultWidth;
+        var _ref2 = action.payload || {},
+          _headerId = _ref2.headerId,
+          newWidth = _ref2.newWidth,
+          defaultWidth = _ref2.defaultWidth;
         var newColumnWidth = {};
         if (typeof _headerId === 'undefined') {
           return _objectSpread({}, newState);
         }
         newColumnWidth[_headerId] = newWidth;
-        var cleanedWidths = Object.fromEntries(Object.entries(newState.columnResizing.columnWidths).filter(function (_ref2) {
-          var _ref3 = _slicedToArray(_ref2, 2),
-            _ = _ref3[0],
-            value = _ref3[1];
+        var cleanedWidths = Object.fromEntries(Object.entries(newState.columnResizing.columnWidths).filter(function (_ref3) {
+          var _ref4 = _slicedToArray(_ref3, 2),
+            _ = _ref4[0],
+            value = _ref4[1];
           return !isNaN(value);
         }));
+        var headerIdArray = newState.columnResizing.headerIdWidths || [];
         return _objectSpread(_objectSpread({}, newState), {}, {
           isResizing: _headerId,
           columnResizing: _objectSpread(_objectSpread({}, newState.columnResizing), {}, {
             columnWidth: defaultWidth,
             columnWidths: _objectSpread(_objectSpread({}, cleanedWidths), newColumnWidth),
-            headerIdWidths: [_headerId, newWidth]
+            headerIdWidths: [].concat(_toConsumableArray(headerIdArray), [[_headerId, newWidth]])
           })
         });
       }
     case COLUMN_RESIZE_END:
       {
-        var _action$payload = action.payload,
-          onColResizeEnd = _action$payload.onColResizeEnd,
-          _headerId2 = _action$payload.headerId;
+        var _ref5 = action.payload || {},
+          onColResizeEnd = _ref5.onColResizeEnd,
+          _headerId2 = _ref5.headerId,
+          isKeyEvent = _ref5.isKeyEvent;
         var currentColumn = {};
         currentColumn[_headerId2] = newState.columnResizing.columnWidths[_headerId2];
         var allChangedColumns = newState.columnResizing.columnWidths;
@@ -103,8 +102,22 @@ export var stateReducer = function stateReducer(newState, action) {
         if (isResizing) {
           onColResizeEnd === null || onColResizeEnd === void 0 || onColResizeEnd(currentColumn, allChangedColumns);
         }
+        if (!isKeyEvent) {
+          if (typeof isKeyEvent === 'undefined') {
+            // Blur resizer input if it has focus and is not from a key event resize
+            if (document.activeElement.classList.contains("".concat(blockClass, "__col-resizer-range"))) {
+              var _document;
+              (_document = document) === null || _document === void 0 || (_document = _document.activeElement) === null || _document === void 0 || _document.blur();
+            }
+            return;
+          }
+        }
         return _objectSpread(_objectSpread({}, newState), {}, {
-          isResizing: false
+          isResizing: false,
+          columnResizing: _objectSpread(_objectSpread({}, newState.columnResizing), {}, {
+            isResizingColumn: false,
+            startX: null
+          })
         });
       }
   }

package/es/components/Datagrid/useActionsColumn.js

@@ -82,7 +82,7 @@ var useActionsColumn = function useActionsColumn(hooks) {
                 }
               })));
             })), !isFetching && rowActions.length > 2 && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(OverflowMenu, {
-              align: "top-right",
+              align: "left",
               size: "sm",
               flipped: true,
               onClick: function onClick(e) {

package/es/components/Datagrid/useSortableColumns.js

@@ -111,7 +111,7 @@ var useSortableColumns = function useSortableColumns(hooks) {
       };
       return _objectSpread(_objectSpread({}, column), {}, {
         Header: Header,
-        minWidth: column.disableSortBy === true ? 0 : 90
+        minWidth: column.disableSortBy === true ? 0 : column.minWidth ? column.minWidth : 90
       });
     });
     return (_instance$customizeCo = instance.customizeColumnsProps) !== null && _instance$customizeCo !== void 0 && _instance$customizeCo.isTearsheetOpen ? visibleColumns : _toConsumableArray(sortableColumns);

package/es/components/EditTearsheet/EditTearsheet.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["cancelButtonText", "children", "className", "description", "influencerWidth", "label", "onClose", "open", "submitButtonText", "title", "verticalPosition", "onHandleModalClick", "onFormChange", "sideNavAriaLabel"];
+var _excluded = ["cancelButtonText", "children", "className", "description", "influencerWidth", "label", "onClose", "open", "submitButtonText", "title", "verticalPosition", "onRequestSubmit", "onFormChange", "sideNavAriaLabel"];
 /**
  * Copyright IBM Corp. 2022, 2023
  *
@@ -52,7 +52,7 @@ export var EditTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     title = _ref.title,
     _ref$verticalPosition = _ref.verticalPosition,
     verticalPosition = _ref$verticalPosition === void 0 ? defaults.verticalPosition : _ref$verticalPosition,
-    onHandleModalClick = _ref.onHandleModalClick,
+    onRequestSubmit = _ref.onRequestSubmit,
     onFormChange = _ref.onFormChange,
     _ref$sideNavAriaLabel = _ref.sideNavAriaLabel,
     sideNavAriaLabel = _ref$sideNavAriaLabel === void 0 ? defaults.sideNavAriaLabel : _ref$sideNavAriaLabel,
@@ -92,13 +92,15 @@ export var EditTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }
   return /*#__PURE__*/React.createElement(TearsheetShell, _extends({}, rest, getDevtoolsProps(componentName), {
     actions: [{
+      key: 'edit-action-button-submit',
       label: submitButtonText,
-      onClick: onHandleModalClick,
+      onClick: onRequestSubmit,
       kind: 'primary'
     }, {
+      key: 'edit-action-button-cancel',
       label: cancelButtonText,
-      onClick: onHandleModalClick,
-      kind: 'secondary'
+      onClick: onClose,
+      kind: 'ghost'
     }],
     className: cx(blockClass, className),
     description: description,
@@ -178,9 +180,9 @@ EditTearsheet.propTypes = {
    */
   onFormChange: PropTypes.func,
   /**
-   * Specifies whether the tearsheet is currently open.
+   * Specify a handler for submitting the tearsheet.
    */
-  onHandleModalClick: PropTypes.func,
+  onRequestSubmit: PropTypes.func.isRequired,
   /**
    * Specifies whether the tearsheet is currently open.
    */

package/es/components/EditTearsheet/preview-components/MultiFormEditTearsheet.js

@@ -70,14 +70,21 @@ export var MultiFormEditTearsheet = function MultiFormEditTearsheet(_ref) {
     setIsInvalid(false);
     setOpen(false);
   };
-  var handleModalClick = function handleModalClick() {
-    setOpen(!open);
+  var onClose = function onClose() {
+    clearCreateData();
+    action('onClose')();
+  };
+  var onSubmit = function onSubmit() {
+    setOpen(false);
+    action('onSubmit')();
   };
   var handleFormChange = function handleFormChange() {
     action('handleFormChange')();
   };
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("style", null, ".".concat(blockClass, " { opacity: 0 }"), ";"), /*#__PURE__*/React.createElement(Button, {
-    onClick: handleModalClick
+    onClick: function onClick() {
+      return setOpen(!open);
+    }
   }, open ? 'Close EditTearsheet' : 'Open EditTearsheet'), /*#__PURE__*/React.createElement(EditTearsheet, {
     influencerWidth: influencerWidth,
     label: label,
@@ -87,8 +94,8 @@ export var MultiFormEditTearsheet = function MultiFormEditTearsheet(_ref) {
     description: description,
     title: title,
     open: open,
-    onHandleModalClick: handleModalClick,
-    onClose: clearCreateData,
+    onRequestSubmit: onSubmit,
+    onClose: onClose,
     onFormChange: handleFormChange
   }, /*#__PURE__*/React.createElement(EditTearsheetForm, {
     title: "Topic name",

package/es/global/js/hooks/index.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -15,4 +15,5 @@ export { usePreviousValue } from './usePreviousValue';
 export { useResetCreateComponent } from './useResetCreateComponent';
 export { useRetrieveStepData } from './useRetrieveStepData';
 export { useValidCreateStepCount } from './useValidCreateStepCount';
-export { useControllableState } from './useControllableState';
+export { useControllableState } from './useControllableState';
+export { usePrefix } from './usePrefix';

package/es/global/js/hooks/usePrefix.js

@@ -0,0 +1,11 @@
+/**
+ * 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 pkg from '../package-settings';
+export var usePrefix = function usePrefix() {
+  return pkg.prefix;
+};

package/es/global/js/hooks/useRetrieveStepData.js

@@ -10,11 +10,12 @@ import { useEffect } from 'react';
 
 /**
  * This useEffect makes sure that every CreateTearsheetStep/CreateFullPageStep reports back it's
- * title, secondaryLabel, introStep, and shouldIncludeStep data so that it can be sent to the CreateInfluencer.
+ * title, secondaryLabel, introStep, invalid and shouldIncludeStep data so that it can be sent to the CreateInfluencer.
  * @param {object} useResetCreateComponent
  * @param {object} useResetCreateComponent.stepsContext
  * @param {number} useResetCreateComponent.stepNumber
  * @param {boolean} useResetCreateComponent.introStep
+ * @param {boolean} useResetCreateComponent.invalid
  * @param {boolean} useResetCreateComponent.shouldIncludeStep
  * @param {string} useResetCreateComponent.secondaryLabel
  * @param {string} useResetCreateComponent.title
@@ -23,6 +24,7 @@ export var useRetrieveStepData = function useRetrieveStepData(_ref) {
   var stepsContext = _ref.stepsContext,
     stepNumber = _ref.stepNumber,
     introStep = _ref.introStep,
+    invalid = _ref.invalid,
     shouldIncludeStep = _ref.shouldIncludeStep,
     secondaryLabel = _ref.secondaryLabel,
     title = _ref.title;
@@ -33,10 +35,11 @@ export var useRetrieveStepData = function useRetrieveStepData(_ref) {
           title: title,
           secondaryLabel: secondaryLabel,
           introStep: introStep,
+          invalid: invalid,
           shouldIncludeStep: shouldIncludeStep
         };
         var previousItem = prev[stepNumber - 1];
-        if ((previousItem === null || previousItem === void 0 ? void 0 : previousItem.title) !== stepItem.title || (previousItem === null || previousItem === void 0 ? void 0 : previousItem.secondaryLabel) !== stepItem.secondaryLabel || (previousItem === null || previousItem === void 0 ? void 0 : previousItem.introStep) !== stepItem.introStep || (previousItem === null || previousItem === void 0 ? void 0 : previousItem.shouldIncludeStep) !== stepItem.shouldIncludeStep) {
+        if ((previousItem === null || previousItem === void 0 ? void 0 : previousItem.title) !== stepItem.title || (previousItem === null || previousItem === void 0 ? void 0 : previousItem.secondaryLabel) !== stepItem.secondaryLabel || (previousItem === null || previousItem === void 0 ? void 0 : previousItem.introStep) !== stepItem.introStep || (previousItem === null || previousItem === void 0 ? void 0 : previousItem.shouldIncludeStep) !== stepItem.shouldIncludeStep || (previousItem === null || previousItem === void 0 ? void 0 : previousItem.invalid) !== stepItem.invalid) {
           var clone = _toConsumableArray(prev);
           clone[stepNumber - 1] = stepItem;
           return clone;
@@ -44,5 +47,5 @@ export var useRetrieveStepData = function useRetrieveStepData(_ref) {
         return prev;
       });
     }
-  }, [shouldIncludeStep, title, secondaryLabel, introStep, stepsContext, stepNumber]);
+  }, [shouldIncludeStep, title, secondaryLabel, introStep, invalid, stepsContext, stepNumber]);
 };

package/es/index.js

@@ -1,9 +1,10 @@
 /**
- * Copyright IBM Corp. 2020, 2020
+ * 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 { pkg } from './settings';
+export { usePrefix } from './global/js/hooks';
 export * from './components';

package/lib/components/AddSelect/AddSelectRow.js

@@ -153,6 +153,7 @@ var AddSelectRow = exports.AddSelectRow = function AddSelectRow(_ref) {
     selected: selected,
     onClick: handleMultiSelection
   }), hasModifiers && /*#__PURE__*/_react.default.createElement(_react2.Layer, null, /*#__PURE__*/_react.default.createElement(_react2.Dropdown, {
+    titleText: modifiers.label,
     id: "add-select-modifier-".concat(item.id),
     type: "inline",
     items: modifiers.options,