@carbon/ibm-products 2.32.0 → 2.34.0

package/lib/components/ActionBar/ActionBar.js

@@ -34,13 +34,19 @@ var _excluded = ["actions", "className", "maxVisible", "menuOptionsClass", "onWi
 var blockClass = "".concat(settings.pkg.prefix, "--action-bar");
 var componentName = 'ActionBar';
 
+// Default values for props
+var defaults = {
+  actions: Object.freeze([])
+};
+
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
 /**
  * The ActionBar is used internally by the PageHeader to wrap ActionBarItems.
  */
-var ActionBar = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
-  var actions = _ref.actions,
+exports.ActionBar = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+  var _ref$actions = _ref.actions,
+    actions = _ref$actions === void 0 ? defaults.actions : _ref$actions,
     className = _ref.className,
     maxVisible = _ref.maxVisible,
     menuOptionsClass = _ref.menuOptionsClass,
@@ -197,8 +203,9 @@ var ActionBar = /*#__PURE__*/React__default["default"].forwardRef(function (_ref
     className: cx__default["default"](["".concat(blockClass, "__displayed-items"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__displayed-items--right"), rightAlign)])
   }, displayedItems));
 });
-ActionBar.displayName = componentName;
-ActionBar.propTypes = {
+exports.ActionBar = settings.pkg.checkComponentEnabled(exports.ActionBar, componentName);
+exports.ActionBar.displayName = componentName;
+exports.ActionBar.propTypes = {
   /**
    * Specifies the action bar items. Each item is specified as an object
    * with required fields: key for array rendering, renderIcon, iconDescription and
@@ -252,5 +259,3 @@ ActionBar.propTypes = {
    */
   rightAlign: index["default"].bool
 };
-
-exports.ActionBar = ActionBar;

package/lib/components/CreateSidePanel/CreateSidePanel.d.ts

@@ -1,5 +1,84 @@
+/**
+ * Copyright IBM Corp. 2021, 2024
+ *
+ * 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 CreateSidePanelProps {
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * The description of the CreateSidePanel serves to provide more information about the form within the panel.
+     */
+    description?: ReactNode;
+    /**
+     * Specifies a boolean for disabling or enabling the primary button. This is important for form validation
+     * Returning `true` prevents the primary button from being clicked until required fields are completed.
+     */
+    disableSubmit?: boolean;
+    /**
+     * Specifies an optional field that provides a additional context for a form
+     */
+    formDescription?: ReactNode;
+    /**
+     * Specifies a required field that provides a title for a form
+     */
+    formTitle: ReactNode;
+    /**
+     * Unique identifier
+     */
+    id?: string;
+    /**
+     * Specifies an optional handler which is called when the CreateSidePanel
+     * is closed.
+     */
+    onRequestClose?(): void;
+    /**
+     * Specifies an optional handler which is called when the CreateSidePanel
+     * primary button is pressed.
+     */
+    onRequestSubmit?(): void;
+    /**
+     * Specifies whether the CreateSidePanel is open or not.
+     */
+    open: boolean;
+    /**
+     * Specifies the primary button's text in the modal.
+     */
+    primaryButtonText: string;
+    /**
+     * Specifies the secondary button's text in the modal.
+     */
+    secondaryButtonText: string;
+    /**
+     * This is the selector to the element that contains all of the page content that will shrink when the panel is a slide in.
+     * This prop is required since create flows use the `slideIn` variant of the side panel.
+     */
+    selectorPageContent: string;
+    /**
+     * Specifies which DOM element in the form should be focused.
+     */
+    selectorPrimaryFocus: string;
+    /**
+     *  **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component
+     */
+    slug?: ReactNode;
+    /**
+     * The subtitle of the CreateSidePanel is optional and serves to provide more information about the modal.
+     */
+    subtitle?: ReactNode;
+    /**
+     * The title of the CreateSidePanel is usually the product or service name.
+     */
+    title: string;
+}
 /**
  * Use with medium complexity creations if the user needs page context. On-page content can be seen and interacted with.
  */
-export let CreateSidePanel: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let CreateSidePanel: React.ForwardRefExoticComponent<CreateSidePanelProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/CreateSidePanel/CreateSidePanel.js

@@ -56,7 +56,7 @@ exports.CreateSidePanel = /*#__PURE__*/React__default["default"].forwardRef(func
     label: primaryButtonText,
     onClick: function onClick(event) {
       event.preventDefault();
-      onRequestSubmit();
+      onRequestSubmit === null || onRequestSubmit === void 0 || onRequestSubmit();
     },
     kind: 'primary',
     disabled: disableSubmit,
@@ -99,6 +99,7 @@ exports.CreateSidePanel.propTypes = {
   /**
    * Sets the body content of the create side panel
    */
+  /**@ts-ignore*/
   children: index["default"].oneOfType([index["default"].arrayOf(index["default"].node), index["default"].node]).isRequired,
   /**
    * Provide an optional class to be applied to the containing node.
@@ -138,6 +139,7 @@ exports.CreateSidePanel.propTypes = {
   /**
    * Specifies whether the CreateSidePanel is open or not.
    */
+  /**@ts-ignore*/
   open: index["default"].bool,
   /**
    * Specifies the primary button's text in the modal.
@@ -155,6 +157,7 @@ exports.CreateSidePanel.propTypes = {
   /**
    * Specifies which DOM element in the form should be focused.
    */
+  /**@ts-ignore*/
   selectorPrimaryFocus: index["default"].node.isRequired,
   /**
    *  **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component
@@ -167,5 +170,5 @@ exports.CreateSidePanel.propTypes = {
   /**
    * The title of the CreateSidePanel is usually the product or service name.
    */
-  title: index["default"].node.isRequired
+  title: index["default"].string.isRequired
 };

package/lib/components/CreateTearsheet/CreateTearsheetDivider.d.ts

@@ -1,2 +1,13 @@
-export let CreateTearsheetDivider: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+/**
+ * Copyright IBM Corp. 2021, 2024
+ *
+ * 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';
+interface CreateTearsheetDividerProps {
+    /** Specifies an optional className to be added to the tearsheet divider */
+    className?: string;
+}
+export declare let CreateTearsheetDivider: React.FC<CreateTearsheetDividerProps>;
+export {};

package/lib/components/CreateTearsheet/CreateTearsheetDivider.js

@@ -36,7 +36,7 @@ exports.CreateTearsheetDivider = /*#__PURE__*/React.forwardRef(function (_ref, r
 exports.CreateTearsheetDivider = settings.pkg.checkComponentEnabled(exports.CreateTearsheetDivider, componentName);
 exports.CreateTearsheetDivider.propTypes = {
   /**
-   * Sets an optional className to be added to the tearsheet step
+   * Sets an optional className to be added to the tearsheet divider
    */
   className: index["default"].string
 };

package/lib/components/DataSpreadsheet/DataSpreadsheet.js

@@ -23,14 +23,11 @@ var uuidv4 = require('../../global/js/utils/uuidv4.js');
 var deepCloneObject = require('../../global/js/utils/deepCloneObject.js');
 var createActiveCellFn = require('./utils/createActiveCellFn.js');
 var getCellSize = require('./utils/getCellSize.js');
-var handleMultipleKeys = require('./utils/handleMultipleKeys.js');
 var handleHeaderCellSelection = require('./utils/handleHeaderCellSelection.js');
 var removeCellSelections = require('./utils/removeCellSelections.js');
 var selectAllCells = require('./utils/selectAllCells.js');
 var handleEditSubmit = require('./utils/handleEditSubmit.js');
-var handleActiveCellInSelectionEnter = require('./utils/handleActiveCellInSelectionEnter.js');
-var handleActiveCellInSelectionTab = require('./utils/handleActiveCellInSelectionTab.js');
-var handleCellDeletion = require('./utils/handleCellDeletion.js');
+var commonEventHandlers = require('./utils/commonEventHandlers.js');
 var useActiveElement = require('../../global/js/hooks/useActiveElement.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 var useMultipleKeyTracking = require('./hooks/useMultipleKeyTracking.js');
@@ -45,7 +42,6 @@ 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"];
-// cspell:words rowcount colcount
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--data-spreadsheet");
@@ -128,20 +124,24 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     _useState18 = _rollupPluginBabelHelpers.slicedToArray(_useState17, 2),
     headerCellHoldActive = _useState18[0],
     setHeaderCellHoldActive = _useState18[1];
-  var _useState19 = React.useState(false),
+  var _useState19 = React.useState(null),
     _useState20 = _rollupPluginBabelHelpers.slicedToArray(_useState19, 2),
-    activeCellInsideSelectionArea = _useState20[0],
-    setActiveCellInsideSelectionArea = _useState20[1];
+    isActiveHeaderCellChanged = _useState20[0],
+    setIsActiveHeaderCellChanged = _useState20[1];
+  var _useState21 = React.useState(false),
+    _useState22 = _rollupPluginBabelHelpers.slicedToArray(_useState21, 2),
+    activeCellInsideSelectionArea = _useState22[0],
+    setActiveCellInsideSelectionArea = _useState22[1];
   var previousState = usePreviousValue.usePreviousValue({
     activeCellCoordinates: activeCellCoordinates,
     isEditing: isEditing
   });
   var cellSizeValue = getCellSize.getCellSize(cellSize);
   var cellEditorRef = React.useRef();
-  var _useState21 = React.useState(),
-    _useState22 = _rollupPluginBabelHelpers.slicedToArray(_useState21, 2),
-    activeCellContent = _useState22[0],
-    setActiveCellContent = _useState22[1];
+  var _useState23 = React.useState(),
+    _useState24 = _rollupPluginBabelHelpers.slicedToArray(_useState23, 2),
+    activeCellContent = _useState24[0],
+    setActiveCellContent = _useState24[1];
   var activeCellRef = React.useRef();
   var cellEditorRulerRef = React.useRef();
   var defaultColumn = React.useMemo(function () {
@@ -215,6 +215,9 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
       }
       if (activeCellCoordinates && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' || (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header') {
         setActiveCellContent(null);
+        setIsActiveHeaderCellChanged(function (prev) {
+          return !prev;
+        });
       }
     }
   }, [activeCellCoordinates, previousState === null || previousState === void 0 ? void 0 : previousState.activeCellCoordinates, updateData, rows, isEditing, removeCellEditor, activeCellContent]);
@@ -225,23 +228,19 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
       addToHeader = _ref2$addToHeader === void 0 ? false : _ref2$addToHeader;
     var activeCellFullData = typeof (coords === null || coords === void 0 ? void 0 : coords.column) === 'number' && typeof (coords === null || coords === void 0 ? void 0 : coords.row) === 'number' ? rows[coords === null || coords === void 0 ? void 0 : coords.row].cells[coords === null || coords === void 0 ? void 0 : coords.column] : null;
     var activeCellValue = activeCellFullData ? Object.values(activeCellFullData.row.values)[coords === null || coords === void 0 ? void 0 : coords.column] : null;
-    var prevCoords = previousState === null || previousState === void 0 ? void 0 : previousState.activeCellCoordinates;
-    // Only create an active cell if the activeCellCoordinates have changed
-    if ((prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row) !== (coords === null || coords === void 0 ? void 0 : coords.row) || (prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.column) !== (coords === null || coords === void 0 ? void 0 : coords.column)) {
-      createActiveCellFn.createActiveCellFn({
-        placementElement: placementElement,
-        coords: coords,
-        addToHeader: addToHeader,
-        contextRef: spreadsheetRef,
-        blockClass: blockClass,
-        onActiveCellChange: onActiveCellChange,
-        activeCellValue: activeCellValue,
-        activeCellRef: activeCellRef,
-        cellEditorRef: cellEditorRef,
-        defaultColumn: defaultColumn
-      });
-    }
-  }, [spreadsheetRef, rows, onActiveCellChange, previousState === null || previousState === void 0 ? void 0 : previousState.activeCellCoordinates, defaultColumn]);
+    createActiveCellFn.createActiveCellFn({
+      placementElement: placementElement,
+      coords: coords,
+      addToHeader: addToHeader,
+      contextRef: spreadsheetRef,
+      blockClass: blockClass,
+      onActiveCellChange: onActiveCellChange,
+      activeCellValue: activeCellValue,
+      activeCellRef: activeCellRef,
+      cellEditorRef: cellEditorRef,
+      defaultColumn: defaultColumn
+    });
+  }, [spreadsheetRef, rows, onActiveCellChange, defaultColumn]);
   useResetSpreadsheetFocus.useResetSpreadsheetFocus({
     focusedElement: focusedElement,
     removeActiveCell: removeActiveCell,
@@ -260,7 +259,9 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     spreadsheetRef: spreadsheetRef,
     activeCellCoordinates: activeCellCoordinates,
     containerHasFocus: containerHasFocus,
-    createActiveCell: createActiveCell
+    createActiveCell: createActiveCell,
+    activeCellContent: activeCellContent,
+    isActiveHeaderCellChanged: isActiveHeaderCellChanged
   });
   var handleInitialArrowPress = React.useCallback(function () {
     // If activeCellCoordinates is null then we need to set an initial value
@@ -308,10 +309,10 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
       spreadsheetRef: spreadsheetRef
     });
   }, [activeCellCoordinates, updateActiveCellCoordinates, spreadsheetRef, columns.length]);
-  var checkforReturnConditon = React.useCallback(function (key) {
+  var checkForReturnCondition = React.useCallback(function (key) {
     return isEditing || key === 'Meta' || key === 'Control';
   }, [isEditing]);
-  var handleArrowkeyPress = React.useCallback(function (arrowKey) {
+  var handleArrowKeyPress = React.useCallback(function (arrowKey) {
     event.preventDefault();
     handleInitialArrowPress();
     var coordinatesClone = _rollupPluginBabelHelpers.objectSpread2({}, activeCellCoordinates);
@@ -408,118 +409,9 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
       });
     }
   }, [handleInitialArrowPress, updateActiveCellCoordinates, activeCellCoordinates, columns, rows]);
-  var handleKeyPress = React.useCallback(function (event) {
-    var key = event.key;
-    // Command keys need to be returned as there is default browser behavior with these keys
-    // Needs to be returned in editing mode
-    if (checkforReturnConditon(key)) {
-      return;
-    }
-
-    // Clear out all cell selection areas if user uses any arrow key, except if the shift key is being held
-    if (['ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown'].indexOf(key) > -1) {
-      if (selectionAreas !== null && selectionAreas !== void 0 && selectionAreas.length && keysPressedList.length < 2 && !handleMultipleKeys.includesShift(keysPressedList)) {
-        setSelectionAreas([]);
-        setSelectionAreaData([]);
-        removeCellSelections.removeCellSelections({
-          spreadsheetRef: spreadsheetRef
-        });
-      }
-    }
-    if ((keysPressedList === null || keysPressedList === void 0 ? void 0 : keysPressedList.length) > 1) {
-      handleMultipleKeys.handleMultipleKeys({
-        activeCellCoordinates: activeCellCoordinates,
-        event: event,
-        keysPressedList: keysPressedList,
-        selectionAreas: selectionAreas,
-        currentMatcher: currentMatcher,
-        rows: rows,
-        setSelectionAreas: setSelectionAreas,
-        columns: columns,
-        updateActiveCellCoordinates: updateActiveCellCoordinates,
-        spreadsheetRef: spreadsheetRef,
-        removeCellSelections: removeCellSelections.removeCellSelections,
-        blockClass: blockClass,
-        setCurrentMatcher: setCurrentMatcher,
-        usingMac: usingMac
-      });
-    }
-
-    // Allow arrow key navigation if there are less than two activeKeys OR
-    // if one of the activeCellCoordinates is in a header position
-    // Prevent arrow keys, home key, and end key from scrolling the page when the data spreadsheet container has focus
-
-    if (keysPressedList.length < 2 && !handleMultipleKeys.includesShift(keysPressedList) || activeCellCoordinates.row === 'header' || activeCellCoordinates.column === 'header') {
-      switch (key) {
-        case 'Backspace':
-        case 'Delete':
-          {
-            var deleteParams = {
-              selectionAreas: selectionAreas,
-              currentMatcher: currentMatcher,
-              rows: rows,
-              setActiveCellContent: setActiveCellContent,
-              updateData: updateData,
-              activeCellCoordinates: activeCellCoordinates
-            };
-            handleCellDeletion.handleCellDeletion(deleteParams);
-            break;
-          }
-        // Enter
-        case 'Enter':
-          {
-            handleActiveCellInSelectionEnter.handleActiveCellInSelectionEnter({
-              activeCellInsideSelectionArea: activeCellInsideSelectionArea,
-              activeCellCoordinates: activeCellCoordinates,
-              activeCellRef: activeCellRef,
-              selectionAreas: selectionAreas,
-              updateActiveCellCoordinates: updateActiveCellCoordinates
-            });
-            break;
-          }
-        // HOME
-        case 'Home':
-        case 'End':
-          {
-            event.preventDefault();
-            if (handleMultipleKeys.includesResourceKey(keysPressedList, usingMac)) {
-              return;
-            }
-            handleHomeEndKey({
-              type: key
-            });
-            break;
-          }
-        // Tab
-        case 'Tab':
-          {
-            if (activeCellInsideSelectionArea) {
-              event.preventDefault();
-              return handleActiveCellInSelectionTab.handleActiveCellInSelectionTab({
-                activeCellInsideSelectionArea: activeCellInsideSelectionArea,
-                activeCellCoordinates: activeCellCoordinates,
-                activeCellRef: activeCellRef,
-                selectionAreas: selectionAreas,
-                updateActiveCellCoordinates: updateActiveCellCoordinates
-              });
-            }
-            setSelectionAreas([]);
-            removeActiveCell();
-            removeCellEditor();
-            setContainerHasFocus(false);
-            setActiveCellCoordinates(null);
-            break;
-          }
-        case 'ArrowLeft':
-        case 'ArrowUp':
-        case 'ArrowRight':
-        case 'ArrowDown':
-          {
-            handleArrowkeyPress(key);
-          }
-      }
-    }
-  }, [activeCellInsideSelectionArea, updateActiveCellCoordinates, activeCellCoordinates, removeActiveCell, columns, rows, spreadsheetRef, currentMatcher, removeCellEditor, selectionAreas, handleHomeEndKey, keysPressedList, usingMac, updateData, checkforReturnConditon, handleArrowkeyPress]);
+  var handleKeyPressEvent = React.useCallback(function (event) {
+    commonEventHandlers.handleKeyPress(event, activeCellInsideSelectionArea, updateActiveCellCoordinates, activeCellCoordinates, removeActiveCell, columns, rows, spreadsheetRef, currentMatcher, removeCellEditor, selectionAreas, handleHomeEndKey, keysPressedList, usingMac, updateData, checkForReturnCondition, handleArrowKeyPress, setSelectionAreas, setSelectionAreaData, setCurrentMatcher, activeCellRef, setActiveCellCoordinates, setContainerHasFocus, setActiveCellContent);
+  }, [activeCellInsideSelectionArea, updateActiveCellCoordinates, activeCellCoordinates, removeActiveCell, columns, rows, spreadsheetRef, currentMatcher, removeCellEditor, selectionAreas, handleHomeEndKey, keysPressedList, usingMac, updateData, checkForReturnCondition, handleArrowKeyPress]);
   var startEditMode = function startEditMode() {
     setIsEditing(true);
     setClickAndHoldActive(false);
@@ -682,6 +574,7 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
   var handleActiveCellMouseEnter = React.useCallback(function () {
     handleActiveCellMouseEnterCallback(selectionAreas, clickAndHoldActive);
   }, [clickAndHoldActive, selectionAreas, handleActiveCellMouseEnterCallback]);
+  // cspell:words rowcount colcount
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, getTableProps(), devtools.getDevtoolsProps(componentName), {
     className: cx__default["default"](blockClass, className, "".concat(blockClass, "--interactive-cell-element"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__container-has-focus"), containerHasFocus), "".concat(blockClass, "__").concat(theme), theme === 'dark')),
     ref: spreadsheetRef,
@@ -690,7 +583,7 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     "aria-rowcount": (rows === null || rows === void 0 ? void 0 : rows.length) || 0,
     "aria-colcount": (columns === null || columns === void 0 ? void 0 : columns.length) || 0,
     "aria-label": spreadsheetAriaLabel,
-    onKeyDown: handleKeyPress,
+    onKeyDown: handleKeyPressEvent,
     onFocus: function onFocus() {
       return setContainerHasFocus(true);
     }
@@ -718,6 +611,7 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     visibleColumns: visibleColumns,
     selectAllAriaLabel: selectAllAriaLabel
   }), /*#__PURE__*/React__default["default"].createElement(DataSpreadsheetBody.DataSpreadsheetBody, {
+    activeCellRef: activeCellRef,
     activeCellCoordinates: activeCellCoordinates,
     ref: spreadsheetRef,
     clickAndHoldActive: clickAndHoldActive,