@carbon/ibm-products 2.32.0 → 2.34.0

package/es/components/ActionBar/ActionBar.js

@@ -25,13 +25,19 @@ var _excluded = ["actions", "className", "maxVisible", "menuOptionsClass", "onWi
 var blockClass = "".concat(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.forwardRef(function (_ref, ref) {
-  var actions = _ref.actions,
+  var _ref$actions = _ref.actions,
+    actions = _ref$actions === void 0 ? defaults.actions : _ref$actions,
     className = _ref.className,
     maxVisible = _ref.maxVisible,
     menuOptionsClass = _ref.menuOptionsClass,
@@ -188,6 +194,7 @@ var ActionBar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     className: cx(["".concat(blockClass, "__displayed-items"), _defineProperty({}, "".concat(blockClass, "__displayed-items--right"), rightAlign)])
   }, displayedItems));
 });
+ActionBar = pkg.checkComponentEnabled(ActionBar, componentName);
 ActionBar.displayName = componentName;
 ActionBar.propTypes = {
   /**

package/es/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/es/components/CreateSidePanel/CreateSidePanel.js

@@ -47,7 +47,7 @@ var CreateSidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     label: primaryButtonText,
     onClick: function onClick(event) {
       event.preventDefault();
-      onRequestSubmit();
+      onRequestSubmit === null || onRequestSubmit === void 0 || onRequestSubmit();
     },
     kind: 'primary',
     disabled: disableSubmit,
@@ -90,6 +90,7 @@ CreateSidePanel.propTypes = {
   /**
    * Sets the body content of the create side panel
    */
+  /**@ts-ignore*/
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
   /**
    * Provide an optional class to be applied to the containing node.
@@ -129,6 +130,7 @@ CreateSidePanel.propTypes = {
   /**
    * Specifies whether the CreateSidePanel is open or not.
    */
+  /**@ts-ignore*/
   open: PropTypes.bool,
   /**
    * Specifies the primary button's text in the modal.
@@ -146,6 +148,7 @@ CreateSidePanel.propTypes = {
   /**
    * Specifies which DOM element in the form should be focused.
    */
+  /**@ts-ignore*/
   selectorPrimaryFocus: PropTypes.node.isRequired,
   /**
    *  **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component
@@ -158,7 +161,7 @@ CreateSidePanel.propTypes = {
   /**
    * The title of the CreateSidePanel is usually the product or service name.
    */
-  title: PropTypes.node.isRequired
+  title: PropTypes.string.isRequired
 };
 
 export { CreateSidePanel };

package/es/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/es/components/CreateTearsheet/CreateTearsheetDivider.js

@@ -27,7 +27,7 @@ var CreateTearsheetDivider = /*#__PURE__*/forwardRef(function (_ref, ref) {
 CreateTearsheetDivider = pkg.checkComponentEnabled(CreateTearsheetDivider, componentName);
 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: PropTypes.string
 };

package/es/components/DataSpreadsheet/DataSpreadsheet.js

@@ -19,14 +19,11 @@ import uuidv4 from '../../global/js/utils/uuidv4.js';
 import { deepCloneObject } from '../../global/js/utils/deepCloneObject.js';
 import { createActiveCellFn } from './utils/createActiveCellFn.js';
 import { getCellSize } from './utils/getCellSize.js';
-import { includesShift, handleMultipleKeys, includesResourceKey } from './utils/handleMultipleKeys.js';
 import { handleHeaderCellSelection } from './utils/handleHeaderCellSelection.js';
 import { removeCellSelections } from './utils/removeCellSelections.js';
 import { selectAllCells } from './utils/selectAllCells.js';
 import { handleEditSubmit } from './utils/handleEditSubmit.js';
-import { handleActiveCellInSelectionEnter } from './utils/handleActiveCellInSelectionEnter.js';
-import { handleActiveCellInSelectionTab } from './utils/handleActiveCellInSelectionTab.js';
-import { handleCellDeletion } from './utils/handleCellDeletion.js';
+import { handleKeyPress } from './utils/commonEventHandlers.js';
 import { useActiveElement } from '../../global/js/hooks/useActiveElement.js';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 import { useMultipleKeyTracking } from './hooks/useMultipleKeyTracking.js';
@@ -36,7 +33,6 @@ import { useMoveActiveCell } from './hooks/useMoveActiveCell.js';
 import { useSpreadsheetEdit } from './hooks/useSpreadsheetEdit.js';
 
 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(pkg.prefix, "--data-spreadsheet");
@@ -119,20 +115,24 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     _useState18 = _slicedToArray(_useState17, 2),
     headerCellHoldActive = _useState18[0],
     setHeaderCellHoldActive = _useState18[1];
-  var _useState19 = useState(false),
+  var _useState19 = useState(null),
     _useState20 = _slicedToArray(_useState19, 2),
-    activeCellInsideSelectionArea = _useState20[0],
-    setActiveCellInsideSelectionArea = _useState20[1];
+    isActiveHeaderCellChanged = _useState20[0],
+    setIsActiveHeaderCellChanged = _useState20[1];
+  var _useState21 = useState(false),
+    _useState22 = _slicedToArray(_useState21, 2),
+    activeCellInsideSelectionArea = _useState22[0],
+    setActiveCellInsideSelectionArea = _useState22[1];
   var previousState = usePreviousValue({
     activeCellCoordinates: activeCellCoordinates,
     isEditing: isEditing
   });
   var cellSizeValue = getCellSize(cellSize);
   var cellEditorRef = useRef();
-  var _useState21 = useState(),
-    _useState22 = _slicedToArray(_useState21, 2),
-    activeCellContent = _useState22[0],
-    setActiveCellContent = _useState22[1];
+  var _useState23 = useState(),
+    _useState24 = _slicedToArray(_useState23, 2),
+    activeCellContent = _useState24[0],
+    setActiveCellContent = _useState24[1];
   var activeCellRef = useRef();
   var cellEditorRulerRef = useRef();
   var defaultColumn = useMemo(function () {
@@ -206,6 +206,9 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
       }
       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]);
@@ -216,23 +219,19 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
       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({
-        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({
+      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({
     focusedElement: focusedElement,
     removeActiveCell: removeActiveCell,
@@ -251,7 +250,9 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     spreadsheetRef: spreadsheetRef,
     activeCellCoordinates: activeCellCoordinates,
     containerHasFocus: containerHasFocus,
-    createActiveCell: createActiveCell
+    createActiveCell: createActiveCell,
+    activeCellContent: activeCellContent,
+    isActiveHeaderCellChanged: isActiveHeaderCellChanged
   });
   var handleInitialArrowPress = useCallback(function () {
     // If activeCellCoordinates is null then we need to set an initial value
@@ -299,10 +300,10 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
       spreadsheetRef: spreadsheetRef
     });
   }, [activeCellCoordinates, updateActiveCellCoordinates, spreadsheetRef, columns.length]);
-  var checkforReturnConditon = useCallback(function (key) {
+  var checkForReturnCondition = useCallback(function (key) {
     return isEditing || key === 'Meta' || key === 'Control';
   }, [isEditing]);
-  var handleArrowkeyPress = useCallback(function (arrowKey) {
+  var handleArrowKeyPress = useCallback(function (arrowKey) {
     event.preventDefault();
     handleInitialArrowPress();
     var coordinatesClone = _objectSpread2({}, activeCellCoordinates);
@@ -399,118 +400,9 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
       });
     }
   }, [handleInitialArrowPress, updateActiveCellCoordinates, activeCellCoordinates, columns, rows]);
-  var handleKeyPress = 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 && !includesShift(keysPressedList)) {
-        setSelectionAreas([]);
-        setSelectionAreaData([]);
-        removeCellSelections({
-          spreadsheetRef: spreadsheetRef
-        });
-      }
-    }
-    if ((keysPressedList === null || keysPressedList === void 0 ? void 0 : keysPressedList.length) > 1) {
-      handleMultipleKeys({
-        activeCellCoordinates: activeCellCoordinates,
-        event: event,
-        keysPressedList: keysPressedList,
-        selectionAreas: selectionAreas,
-        currentMatcher: currentMatcher,
-        rows: rows,
-        setSelectionAreas: setSelectionAreas,
-        columns: columns,
-        updateActiveCellCoordinates: updateActiveCellCoordinates,
-        spreadsheetRef: spreadsheetRef,
-        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 && !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(deleteParams);
-            break;
-          }
-        // Enter
-        case 'Enter':
-          {
-            handleActiveCellInSelectionEnter({
-              activeCellInsideSelectionArea: activeCellInsideSelectionArea,
-              activeCellCoordinates: activeCellCoordinates,
-              activeCellRef: activeCellRef,
-              selectionAreas: selectionAreas,
-              updateActiveCellCoordinates: updateActiveCellCoordinates
-            });
-            break;
-          }
-        // HOME
-        case 'Home':
-        case 'End':
-          {
-            event.preventDefault();
-            if (includesResourceKey(keysPressedList, usingMac)) {
-              return;
-            }
-            handleHomeEndKey({
-              type: key
-            });
-            break;
-          }
-        // Tab
-        case 'Tab':
-          {
-            if (activeCellInsideSelectionArea) {
-              event.preventDefault();
-              return 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 = useCallback(function (event) {
+    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);
@@ -673,6 +565,7 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
   var handleActiveCellMouseEnter = useCallback(function () {
     handleActiveCellMouseEnterCallback(selectionAreas, clickAndHoldActive);
   }, [clickAndHoldActive, selectionAreas, handleActiveCellMouseEnterCallback]);
+  // cspell:words rowcount colcount
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, getTableProps(), getDevtoolsProps(componentName), {
     className: cx(blockClass, className, "".concat(blockClass, "--interactive-cell-element"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__container-has-focus"), containerHasFocus), "".concat(blockClass, "__").concat(theme), theme === 'dark')),
     ref: spreadsheetRef,
@@ -681,7 +574,7 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     "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);
     }
@@ -709,6 +602,7 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     visibleColumns: visibleColumns,
     selectAllAriaLabel: selectAllAriaLabel
   }), /*#__PURE__*/React__default.createElement(DataSpreadsheetBody, {
+    activeCellRef: activeCellRef,
     activeCellCoordinates: activeCellCoordinates,
     ref: spreadsheetRef,
     clickAndHoldActive: clickAndHoldActive,