@carbon/ibm-products 2.29.0-alpha.10 → 2.30.0-alpha.9

package/es/components/AboutModal/AboutModal.d.ts

@@ -1,3 +1,74 @@
+/**
+ * Copyright IBM Corp. 2020, 2021
+ *
+ * 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 AboutModalProps {
+    /**
+     * If you are legally required to display logos of technologies used
+     * to build your product you can provide this in the additionalInfo.
+     * Additional information will be displayed in the footer.
+     */
+    additionalInfo?: ReactNode;
+    /**
+     * Provide an optional class to be applied to the modal root node.
+     */
+    className?: string;
+    /**
+     * The accessibility title for the close icon.
+     */
+    closeIconDescription: string;
+    /**
+     * Subhead text providing any relevant product disclaimers including
+     * legal information (optional)
+     */
+    content?: ReactNode;
+    /**
+     * Trademark and copyright information. Displays first year of
+     * product release to current year.
+     */
+    copyrightText: string;
+    /**
+     * An array of Carbon `Link` component if there are additional information
+     * to call out within the card. The about modal should be used to display
+     * the product information and not where users go to find help (optional)
+     */
+    links?: ReactNode[];
+    /**
+     * A visual symbol used to represent the product.
+     */
+    logo: ReactNode;
+    /**
+     * Specifies aria label for AboutModal
+     */
+    modalAriaLabel?: string;
+    /**
+     * Specifies an optional handler which is called when the AboutModal
+     * is closed. Returning `false` prevents the AboutModal from closing.
+     */
+    onClose?: () => void | boolean;
+    /**
+     * Specifies whether the AboutModal is open or not.
+     */
+    open?: boolean;
+    /**
+     * The DOM node the tearsheet should be rendered within. Defaults to document.body.
+     */
+    portalTarget?: ReactNode;
+    /**
+     * Header text that provides the product name. The IBM Services logo
+     * consists of two discrete, but required, elements: the iconic
+     * IBM 8-bar logo represented alongside the IBM Services logotype.
+     * Please follow these guidelines to ensure proper execution.
+     */
+    title: ReactNode;
+    /**
+     * Text that provides information on the version number of your product.
+     */
+    version: string;
+}
 /**
  * The `AboutModal` component provides a way to communicate product information
  * to users. It is triggered by a user’s action, appears on top of the main
@@ -5,5 +76,5 @@
  * should be immediately apparent to the user, with a clear and obvious path
  * to completion.
  */
-export let AboutModal: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let AboutModal: React.ForwardRefExoticComponent<AboutModalProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/es/components/AboutModal/AboutModal.js

@@ -5,23 +5,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useState, useRef, useEffect } from 'react';
-import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { ComposedModal, ModalHeader, ModalBody, Theme, ModalFooter } from '@carbon/react';
+import React__default, { useRef, useEffect } from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
 import cx from 'classnames';
-import { pkg } from '../../settings.js';
-import uuidv4 from '../../global/js/utils/uuidv4.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
-import { ComposedModal, ModalHeader, ModalBody, Theme, ModalFooter } from '@carbon/react';
+import { pkg } from '../../settings.js';
 import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
+import uuidv4 from '../../global/js/utils/uuidv4.js';
 
 var _excluded = ["additionalInfo", "className", "closeIconDescription", "copyrightText", "content", "links", "logo", "modalAriaLabel", "onClose", "open", "portalTarget", "title", "version"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--about-modal");
 var componentName = 'AboutModal';
-
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
 /**
@@ -46,30 +44,17 @@ var AboutModal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     title = _ref.title,
     version = _ref.version,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState(true),
-    _useState2 = _slicedToArray(_useState, 2),
-    hasScrollingContent = _useState2[0],
-    setHasScrollingContent = _useState2[1];
-  var bodyRef = useRef();
-  var contentRef = useRef();
+  var bodyRef = useRef(null);
+  var contentRef = useRef(null);
   var contentId = uuidv4();
   var renderPortalUse = usePortalTarget(portalTargetIn);
-  var handleResize = function handleResize() {
-    setHasScrollingContent(
-    // if our scroll height exceeds the client height enable scrolling
-    bodyRef.current.clientHeight < (hasScrollingContent ?
-    // Carbon modal adds 32px bottom margin when scrolling content is enabled
-    bodyRef.current.scrollHeight - 32 : bodyRef.current.scrollHeight));
-  };
 
   // We can't add a ref directly to the ModalBody, so track it in a ref
   // as the parent of the current bodyRef element
   useEffect(function () {
-    bodyRef.current = contentRef.current.parentElement;
+    var _contentRef$current;
+    bodyRef.current = (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.parentElement;
   }, [bodyRef]);
-
-  // Detect resize of the ModalBody to recalculate whether scrolling is enabled
-  useResizeObserver(bodyRef, handleResize);
   return renderPortalUse( /*#__PURE__*/React__default.createElement(ComposedModal, _extends({}, rest, {
     className: cx(blockClass,
     // Apply the block class to the main HTML element
@@ -89,10 +74,7 @@ var AboutModal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     label: title,
     labelClassName: "".concat(blockClass, "__title")
   }), /*#__PURE__*/React__default.createElement(ModalBody, {
-    "aria-label": hasScrollingContent ? '' : null,
-    "aria-labelledby": hasScrollingContent ? contentId : null,
-    className: "".concat(blockClass, "__body"),
-    hasScrollingContent: hasScrollingContent
+    className: "".concat(blockClass, "__body")
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__body-content"),
     ref: contentRef,

package/es/components/DataSpreadsheet/DataSpreadsheet.js

@@ -292,29 +292,121 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     updateActiveCellCoordinates({
       coords: coordinatesClone,
       updatedValue: {
-        column: type === 'home' ? 0 : columns.length - 1
+        column: type === 'Home' ? 0 : columns.length - 1
       }
     });
     removeCellSelections({
       spreadsheetRef: spreadsheetRef
     });
   }, [activeCellCoordinates, updateActiveCellCoordinates, spreadsheetRef, columns.length]);
+  var checkforReturnConditon = useCallback(function (key) {
+    return isEditing || key === 'Meta' || key === 'Control';
+  }, [isEditing]);
+  var handleArrowkeyPress = useCallback(function (arrowKey) {
+    event.preventDefault();
+    handleInitialArrowPress();
+    var coordinatesClone = _objectSpread2({}, activeCellCoordinates);
+    var updatedValue;
+    switch (arrowKey) {
+      // Left
+      case 'ArrowLeft':
+        {
+          if (coordinatesClone.column === 'header') {
+            return;
+          }
+          if (typeof coordinatesClone.column === 'number') {
+            if (coordinatesClone.column === 0) {
+              updatedValue = {
+                column: 'header'
+              };
+            } else {
+              updatedValue = {
+                column: coordinatesClone.column - 1
+              };
+            }
+          }
+          break;
+        }
+      // Up
+      case 'ArrowUp':
+        {
+          if (coordinatesClone.row === 'header') {
+            return;
+          }
+          if (typeof coordinatesClone.row === 'number') {
+            // set row back to header if we are at index 0
+            if (coordinatesClone.row === 0) {
+              updatedValue = {
+                row: 'header'
+              };
+            } else {
+              // if we are at any other index than 0, subtract 1 from current row index
+              updatedValue = {
+                row: coordinatesClone.row - 1
+              };
+            }
+          }
+          break;
+        }
+      // Right
+      case 'ArrowRight':
+        {
+          if (coordinatesClone.column === 'header') {
+            updatedValue = {
+              column: 0
+            };
+          }
+          if (typeof coordinatesClone.column === 'number') {
+            // Prevent active cell coordinates from updating if the active
+            // cell is in the last column, ie we can't go any further to the right
+            if (columns.length - 1 === coordinatesClone.column) {
+              return;
+            } else {
+              updatedValue = {
+                column: coordinatesClone.column + 1
+              };
+            }
+          }
+          break;
+        }
+      // Down
+      case 'ArrowDown':
+        {
+          if (coordinatesClone.row === 'header') {
+            updatedValue = {
+              row: 0
+            };
+          }
+          if (typeof coordinatesClone.row === 'number') {
+            // Prevent active cell coordinates from updating if the active
+            // cell is in the last row, ie we can't go any further down since
+            // we are in the last row
+            if (rows.length - 1 === coordinatesClone.row) {
+              return;
+            } else {
+              updatedValue = {
+                row: coordinatesClone.row + 1
+              };
+            }
+          }
+          break;
+        }
+    }
+    if (updatedValue) {
+      updateActiveCellCoordinates({
+        coords: coordinatesClone,
+        updatedValue: updatedValue
+      });
+    }
+  }, [handleInitialArrowPress, updateActiveCellCoordinates, activeCellCoordinates, columns, rows]);
   var handleKeyPress = useCallback(function (event) {
     var key = event.key;
-    if (isEditing) {
-      return;
-    }
     // Command keys need to be returned as there is default browser behavior with these keys
-    if (key === 'Meta' || key === 'Control') {
-      return;
-    }
-    // Prevent arrow keys, home key, and end key from scrolling the page when the data spreadsheet container has focus
-    if (['End', 'Home', 'ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown'].indexOf(key) > -1 && !isEditing) {
-      event.preventDefault();
-    }
-    if (['Tab'].indexOf(key) > -1 && isEditing) {
+    // 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)) {
@@ -325,7 +417,7 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
         });
       }
     }
-    if (!isEditing && (keysPressedList === null || keysPressedList === void 0 ? void 0 : keysPressedList.length) > 1) {
+    if ((keysPressedList === null || keysPressedList === void 0 ? void 0 : keysPressedList.length) > 1) {
       handleMultipleKeys({
         activeCellCoordinates: activeCellCoordinates,
         event: event,
@@ -343,27 +435,24 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
         usingMac: usingMac
       });
     }
-    var deleteParams = {
-      selectionAreas: selectionAreas,
-      currentMatcher: currentMatcher,
-      rows: rows,
-      setActiveCellContent: setActiveCellContent,
-      updateData: updateData,
-      activeCellCoordinates: activeCellCoordinates
-    };
+
     // 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) {
-        // Backspace
         case 'Backspace':
-          {
-            handleCellDeletion(deleteParams);
-            break;
-          }
-        // Delete
         case 'Delete':
           {
+            var deleteParams = {
+              selectionAreas: selectionAreas,
+              currentMatcher: currentMatcher,
+              rows: rows,
+              setActiveCellContent: setActiveCellContent,
+              updateData: updateData,
+              activeCellCoordinates: activeCellCoordinates
+            };
             handleCellDeletion(deleteParams);
             break;
           }
@@ -381,22 +470,14 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
           }
         // HOME
         case 'Home':
-          {
-            if (includesResourceKey(keysPressedList, usingMac)) {
-              return;
-            }
-            handleHomeEndKey({
-              type: 'home'
-            });
-            break;
-          }
         case 'End':
           {
+            event.preventDefault();
             if (includesResourceKey(keysPressedList, usingMac)) {
               return;
             }
             handleHomeEndKey({
-              type: 'end'
+              type: key
             });
             break;
           }
@@ -420,122 +501,16 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
             setActiveCellCoordinates(null);
             break;
           }
-        // Left
         case 'ArrowLeft':
-          {
-            handleInitialArrowPress();
-            var coordinatesClone = _objectSpread2({}, activeCellCoordinates);
-            if (coordinatesClone.column === 'header') {
-              return;
-            }
-            if (typeof coordinatesClone.column === 'number') {
-              if (coordinatesClone.column === 0) {
-                updateActiveCellCoordinates({
-                  coords: coordinatesClone,
-                  updatedValue: {
-                    column: 'header'
-                  }
-                });
-                return;
-              }
-              updateActiveCellCoordinates({
-                coords: coordinatesClone,
-                updatedValue: {
-                  column: coordinatesClone.column - 1
-                }
-              });
-            }
-            break;
-          }
-        // Up
         case 'ArrowUp':
-          {
-            handleInitialArrowPress();
-            var _coordinatesClone = _objectSpread2({}, activeCellCoordinates);
-            if (_coordinatesClone.row === 'header') {
-              return;
-            }
-            if (typeof _coordinatesClone.row === 'number') {
-              // set row back to header if we are at index 0
-              if (_coordinatesClone.row === 0) {
-                updateActiveCellCoordinates({
-                  coords: _coordinatesClone,
-                  updatedValue: {
-                    row: 'header'
-                  }
-                });
-                return;
-              }
-              // if we are at any other index than 0, subtract 1 from current row index
-              updateActiveCellCoordinates({
-                coords: _coordinatesClone,
-                updatedValue: {
-                  row: _coordinatesClone.row - 1
-                }
-              });
-            }
-            break;
-          }
-        // Right
         case 'ArrowRight':
-          {
-            handleInitialArrowPress();
-            var _coordinatesClone2 = _objectSpread2({}, activeCellCoordinates);
-            if (_coordinatesClone2.column === 'header') {
-              updateActiveCellCoordinates({
-                coords: _coordinatesClone2,
-                updatedValue: {
-                  column: 0
-                }
-              });
-            }
-            if (typeof _coordinatesClone2.column === 'number') {
-              // Prevent active cell coordinates from updating if the active
-              // cell is in the last column, ie we can't go any further to the right
-              if (columns.length - 1 === _coordinatesClone2.column) {
-                return;
-              }
-              updateActiveCellCoordinates({
-                coords: _coordinatesClone2,
-                updatedValue: {
-                  column: _coordinatesClone2.column + 1
-                }
-              });
-            }
-            break;
-          }
-        // Down
         case 'ArrowDown':
           {
-            handleInitialArrowPress();
-            var _coordinatesClone3 = _objectSpread2({}, activeCellCoordinates);
-            if (_coordinatesClone3.row === 'header') {
-              updateActiveCellCoordinates({
-                coords: _coordinatesClone3,
-                updatedValue: {
-                  row: 0
-                }
-              });
-            }
-            if (typeof _coordinatesClone3.row === 'number') {
-              // Prevent active cell coordinates from updating if the active
-              // cell is in the last row, ie we can't go any further down since
-              // we are in the last row
-              if (rows.length - 1 === _coordinatesClone3.row) {
-                return;
-              }
-              updateActiveCellCoordinates({
-                coords: _coordinatesClone3,
-                updatedValue: {
-                  row: _coordinatesClone3.row + 1
-                }
-              });
-            }
-            break;
+            handleArrowkeyPress(key);
           }
       }
     }
-  }, [activeCellInsideSelectionArea, updateActiveCellCoordinates, handleInitialArrowPress, activeCellCoordinates, removeActiveCell, columns, rows, spreadsheetRef, currentMatcher, isEditing, removeCellEditor, selectionAreas, handleHomeEndKey, keysPressedList, usingMac, updateData]);
+  }, [activeCellInsideSelectionArea, updateActiveCellCoordinates, activeCellCoordinates, removeActiveCell, columns, rows, spreadsheetRef, currentMatcher, removeCellEditor, selectionAreas, handleHomeEndKey, keysPressedList, usingMac, updateData, checkforReturnConditon, handleArrowkeyPress]);
   var startEditMode = function startEditMode() {
     setIsEditing(true);
     setClickAndHoldActive(false);

package/es/components/Datagrid/Datagrid/DatagridRow.js

@@ -153,7 +153,7 @@ var DatagridRow = function DatagridRow(datagridState) {
       return h.id === cell.column.id;
     });
     return /*#__PURE__*/React__default.createElement(TableCell, _extends({
-      className: cx("".concat(blockClass, "__cell"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__expandable-row-cell"), row.canExpand && index === 0), "".concat(blockClass, "__slug--cell"), associatedHeader && associatedHeader.length && /*#__PURE__*/isValidElement((_associatedHeader$ = associatedHeader[0]) === null || _associatedHeader$ === void 0 ? void 0 : _associatedHeader$.slug)))
+      className: cx("".concat(blockClass, "__cell"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__expandable-row-cell"), row.canExpand && index === 0), "".concat(blockClass, "__expandable-row-cell--is-expanded"), row.isExpanded && index === 0), "".concat(blockClass, "__slug--cell"), associatedHeader && associatedHeader.length && /*#__PURE__*/isValidElement((_associatedHeader$ = associatedHeader[0]) === null || _associatedHeader$ === void 0 ? void 0 : _associatedHeader$.slug)))
     }, restProps, {
       key: cell.column.id,
       title: title

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

@@ -403,9 +403,12 @@ var useFilters = function useFilters(_ref) {
         });
         return updatedFilters[0];
       };
-      setFiltersObjectArray(savedFilters);
-      var filterStateCopy = cleanFilters(filtersState);
-      setFiltersState(filterStateCopy);
+      if (savedFilters && savedFilters.length) {
+        var _cleanFilters;
+        setFiltersObjectArray(savedFilters);
+        var filterStateCopy = (_cleanFilters = cleanFilters(filtersState)) !== null && _cleanFilters !== void 0 ? _cleanFilters : [];
+        setFiltersState(filterStateCopy);
+      }
     }
     if (!isFetching) {
       setFetchingReset(false);

package/es/components/Datagrid/useActionsColumn.js

@@ -12,7 +12,7 @@ import { IconSkeleton, IconButton, OverflowMenu, OverflowMenuItem } from '@carbo
 import { pkg } from '../../settings.js';
 import { prepareProps } from '../../global/js/utils/props-helper.js';
 
-var _excluded = ["align", "id", "itemText", "onClick", "icon", "shouldHideMenuItem"],
+var _excluded = ["align", "id", "itemText", "onClick", "icon", "shouldHideMenuItem", "shouldDisableMenuItem", "disabled"],
   _excluded2 = ["id", "onClick", "shouldHideMenuItem", "shouldDisableMenuItem", "disabled"];
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var useActionsColumn = function useActionsColumn(hooks) {
@@ -54,8 +54,11 @@ var useActionsColumn = function useActionsColumn(hooks) {
                 _onClick = preparedActionProps.onClick,
                 icon = preparedActionProps.icon,
                 shouldHideMenuItem = preparedActionProps.shouldHideMenuItem,
+                shouldDisableMenuItem = preparedActionProps.shouldDisableMenuItem,
+                disabled = preparedActionProps.disabled,
                 rest = _objectWithoutProperties(preparedActionProps, _excluded);
               var hidden = typeof shouldHideMenuItem === 'function' && shouldHideMenuItem(row);
+              var isDisabledByRow = typeof shouldDisableMenuItem === 'function' ? shouldDisableMenuItem(row) : disabled;
               if (hidden) {
                 return null;
               }
@@ -77,7 +80,8 @@ var useActionsColumn = function useActionsColumn(hooks) {
                   }
                   e.stopPropagation();
                   _onClick(id, row, e);
-                }
+                },
+                disabled: isDisabledByRow
               }), /*#__PURE__*/React__default.createElement(Icon, null)));
             })), !isFetching && (rowActions.length > 2 || isColumnSticky) && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(OverflowMenu, {
               align: "left",

package/es/components/Decorator/Decorator.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The Decorator groups a key/value pair to look and behave like a single UI element.
+ */
+export let Decorator: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';