@carbon/ibm-products 2.33.0 → 2.34.0

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/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");
@@ -404,117 +400,8 @@ 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 (checkForReturnCondition(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);
-          }
-      }
-    }
+  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);
@@ -678,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,
@@ -686,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);
     }

package/es/components/DataSpreadsheet/DataSpreadsheetBody.js

@@ -13,14 +13,12 @@ import cx from 'classnames';
 import { px } from '@carbon/layout';
 import { pkg } from '../../settings.js';
 import { deepCloneObject } from '../../global/js/utils/deepCloneObject.js';
-import uuidv4 from '../../global/js/utils/uuidv4.js';
 import { removeCellSelections } from './utils/removeCellSelections.js';
 import { createCellSelectionArea } from './utils/createCellSelectionArea.js';
 import { checkActiveHeaderCell } from './utils/checkActiveHeaderCell.js';
 import { checkSelectedHeaderCell } from './utils/checkSelectedHeaderCell.js';
-import { handleHeaderCellSelection } from './utils/handleHeaderCellSelection.js';
 import { getSpreadsheetWidth } from './utils/getSpreadsheetWidth.js';
-import { checkForHoldingKey } from './utils/checkForHoldingKey.js';
+import { handleBodyCellClick, handleBodyCellHover, handleRowHeaderClick } from './utils/commonEventHandlers.js';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 import { useSpreadsheetMouseUp } from './hooks/useSpreadsheetMouseUp.js';
 
@@ -241,71 +239,10 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
   // onClick fn for each cell in the data spreadsheet body,
   // adds the active cell highlight
-  var handleBodyCellClick = useCallback(function (cell, columnIndex) {
-    return function (event) {
-      event.preventDefault();
-      var closestBodyCell = event.target.closest(".".concat(blockClass, "__body--td"));
-      var isValidSelectionAreaStart = closestBodyCell.classList.contains("".concat(blockClass, "__body--td"));
-      setValidStartingPoint(isValidSelectionAreaStart);
-      var isHoldingCommandKey = checkForHoldingKey(event, 'cmd');
-      var isHoldingShiftKey = checkForHoldingKey(event, 'shiftKey');
-      setContainerHasFocus(true);
-      var activeCoordinates = {
-        row: cell.row.index,
-        column: columnIndex
-      };
-      var tempMatcher = uuidv4();
-      setClickAndHoldActive(true);
 
-      // prevent multiple selections unless cmd key is held
-      // meaning that selectionAreas should only have one item by default
-      if (isHoldingCommandKey) {
-        var activeCellElement = ref.current.querySelector(".".concat(blockClass, "__active-cell--highlight"));
-        activeCellElement.setAttribute('data-selection-id', tempMatcher);
-        setActiveCellInsideSelectionArea(true);
-        setActiveCellCoordinates(activeCoordinates);
-        setCurrentMatcher(tempMatcher);
-        setSelectionAreas(function (prev) {
-          return [].concat(_toConsumableArray(prev), [{
-            point1: activeCoordinates,
-            matcher: tempMatcher
-          }]);
-        });
-      } else if (isHoldingShiftKey) {
-        setContainerHasFocus(true);
-        var selectionAreaClone = deepCloneObject(selectionAreas);
-        var indexOfItemToUpdate = selectionAreaClone.findIndex(function (item) {
-          return item.matcher === currentMatcher;
-        });
-        if (indexOfItemToUpdate === -1) {
-          // There is always a selectionArea with a point1 object that updates
-          // whenever the activeCellCoordinates update, we should always be able
-          // to find an index, but if we do not for some reason we should return
-          // at this point.
-          return;
-        } else {
-          // Update the selectionArea that was found, do not update currentMatcher
-          selectionAreaClone[indexOfItemToUpdate].point1 = activeCellCoordinates;
-          selectionAreaClone[indexOfItemToUpdate].point2 = activeCoordinates;
-          selectionAreaClone[indexOfItemToUpdate].areaCreated = false;
-          selectionAreaClone[indexOfItemToUpdate].matcher = currentMatcher;
-          setSelectionAreas(selectionAreaClone);
-        }
-      } else {
-        activeCellRef.current.style.display = 'none';
-        setActiveCellInsideSelectionArea(false);
-        setActiveCellCoordinates(activeCoordinates);
-        // remove all previous cell selections
-        removeCellSelections({
-          spreadsheetRef: ref
-        });
-        setSelectionAreas([{
-          point1: activeCoordinates,
-          matcher: tempMatcher
-        }]);
-        setCurrentMatcher(tempMatcher);
-        setSelectionAreaData([]);
-      }
+  var handleBodyCellClickEvent = useCallback(function (cell, columnIndex) {
+    return function (event) {
+      handleBodyCellClick(cell, columnIndex, event, currentMatcher, activeCellCoordinates, selectionAreas, setActiveCellCoordinates, setSelectionAreas, setContainerHasFocus, setClickAndHoldActive, setCurrentMatcher, ref, setSelectionAreaData, setActiveCellInsideSelectionArea, activeCellRef, setValidStartingPoint);
     };
   }, [currentMatcher, activeCellCoordinates, selectionAreas, setActiveCellCoordinates, setSelectionAreas, setContainerHasFocus, setClickAndHoldActive, setCurrentMatcher, ref, setSelectionAreaData, setActiveCellInsideSelectionArea, activeCellRef]);
   var handleBodyScroll = function handleBodyScroll() {
@@ -321,50 +258,14 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
       contentScrollElementRef.removeEventListener('scroll', handleBodyScroll);
     };
   });
-  var handleBodyCellHover = useCallback(function (cell, columnIndex) {
+  var handleBodyCellHoverEvent = useCallback(function (cell, columnIndex) {
     return function () {
-      if (clickAndHoldActive) {
-        var cellCoordinates = {
-          row: cell.row.index,
-          column: columnIndex
-        };
-        setSelectionAreas(function (prev) {
-          var _selectionAreaClone$i, _selectionAreaClone$i2;
-          var selectionAreaClone = deepCloneObject(prev);
-          var indexOfItemToUpdate = selectionAreaClone.findIndex(function (item) {
-            return item.matcher === currentMatcher;
-          });
-          // No items in the array match up with the currentMatcher value
-          if (indexOfItemToUpdate === -1) {
-            return prev;
-          }
-          // Do not update state if you're still hovering on the same cell
-          if (((_selectionAreaClone$i = selectionAreaClone[indexOfItemToUpdate].point2) === null || _selectionAreaClone$i === void 0 ? void 0 : _selectionAreaClone$i.row) === cellCoordinates.row && ((_selectionAreaClone$i2 = selectionAreaClone[indexOfItemToUpdate].point2) === null || _selectionAreaClone$i2 === void 0 ? void 0 : _selectionAreaClone$i2.column) === cellCoordinates.column) {
-            return prev;
-          }
-          selectionAreaClone[indexOfItemToUpdate].point2 = cellCoordinates;
-          selectionAreaClone[indexOfItemToUpdate].areaCreated = false;
-          return selectionAreaClone;
-        });
-      }
+      handleBodyCellHover(cell, columnIndex, clickAndHoldActive, currentMatcher, setSelectionAreas);
     };
   }, [clickAndHoldActive, currentMatcher, setSelectionAreas]);
-  var handleRowHeaderClick = useCallback(function (index) {
+  var handleRowHeaderClickEvent = useCallback(function (index) {
     return function (event) {
-      var isHoldingCommandKey = checkForHoldingKey(event, 'cmd');
-      handleHeaderCellSelection({
-        type: 'row',
-        activeCellCoordinates: activeCellCoordinates,
-        rows: rows,
-        columns: columns,
-        setActiveCellCoordinates: setActiveCellCoordinates,
-        setCurrentMatcher: setCurrentMatcher,
-        setSelectionAreas: setSelectionAreas,
-        spreadsheetRef: ref,
-        index: index,
-        setSelectionAreaData: setSelectionAreaData,
-        isHoldingCommandKey: isHoldingCommandKey
-      });
+      handleRowHeaderClick(index, event, columns, ref, setSelectionAreas, setCurrentMatcher, setActiveCellCoordinates, activeCellCoordinates, rows, setSelectionAreaData);
     };
   }, [columns, ref, setSelectionAreas, setCurrentMatcher, setActiveCellCoordinates, activeCellCoordinates, rows, setSelectionAreaData]);
 
@@ -414,7 +315,7 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
         "data-row-index": index,
         "data-column-index": "header",
         type: "button",
-        onClick: handleRowHeaderClick(index),
+        onClick: handleRowHeaderClickEvent(index),
         className: cx("".concat(blockClass, "__td"), "".concat(blockClass, "__td-th"), "".concat(blockClass, "--interactive-cell-element"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__td-th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === index || checkActiveHeaderCell(index, selectionAreas, 'row')), "".concat(blockClass, "__td-th--selected-header"), checkSelectedHeaderCell(index, selectionAreas, 'row', columns))),
         style: {
           width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth
@@ -436,14 +337,14 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
           "data-row-index": cell.row.index,
           "data-column-index": index,
           className: cx("".concat(blockClass, "__td"), "".concat(blockClass, "__body--td"), "".concat(blockClass, "--interactive-cell-element")),
-          onMouseDown: handleBodyCellClick(cell, index),
-          onMouseOver: handleBodyCellHover(cell, index),
+          onMouseDown: handleBodyCellClickEvent(cell, index),
+          onMouseOver: handleBodyCellHoverEvent(cell, index),
           onFocus: function onFocus() {},
           type: "button"
         }, cell.render('Cell')));
       }));
     }
-  }, [prepareRow, rows, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas, handleRowHeaderClick, handleBodyCellClick, handleBodyCellHover, defaultColumn, columns]);
+  }, [prepareRow, rows, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas, handleRowHeaderClickEvent, handleBodyCellClickEvent, handleBodyCellHoverEvent, defaultColumn, columns]);
   var spreadsheetBodyRef = useRef();
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: spreadsheetBodyRef,

package/es/components/DataSpreadsheet/utils/commonEventHandlers.d.ts

@@ -0,0 +1,4 @@
+export function handleBodyCellClick(cell: any, columnIndex: any, event: any, ...rest: any[]): void;
+export function handleBodyCellHover(cell: any, columnIndex: any, ...rest: any[]): void;
+export function handleRowHeaderClick(index: any, event: any, ...rest: any[]): void;
+export function handleKeyPress(event: any, ...rest: any[]): any;