@carbon/ibm-products 2.43.2-canary.12 → 2.43.2-canary.122

package/es/components/ConditionBuilder/utils/handleKeyboardEvents.js

@@ -7,18 +7,27 @@
 
 import { toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import { blockClass } from '../ConditionBuilderContext/DataConfigs.js';
-import { checkForHoldingKey } from './checkForHoldingKey.js';
-import { focusThisField, traverseReverse, traverseClockVise } from './util.js';
+import { focusThisItem, manageTabIndexAndFocus, traverseClockVise, traverseReverse, checkForHoldingKey, focusThisField } from './util.js';
 
-var handleKeyDown = function handleKeyDown(evt, conditionBuilderRef) {
+var handleKeyDown = function handleKeyDown(evt, conditionBuilderRef, variant) {
+  var _activeElement$closes;
   var activeElement = document.activeElement;
-  if (activeElement.closest("[role=\"dialog\"]")) {
-    handleKeyPressForPopover(evt, activeElement.closest("[role=\"dialog\"]"));
-  } else {
-    handleKeyPressForMainContent(evt, conditionBuilderRef);
+  if (!((_activeElement$closes = activeElement.closest(".".concat(blockClass, "__popover"))) !== null && _activeElement$closes !== void 0 && _activeElement$closes.querySelector('[role="dialog"]'))) {
+    handleKeyPressForMainContent(evt, conditionBuilderRef, variant);
+  }
+};
+var handleKeyDownForPopover = function handleKeyDownForPopover(evt, conditionBuilderRef, popoverRef) {
+  if (excludeKeyPress(evt)) {
+    return;
   }
+  handleKeyPressForPopover(evt, popoverRef === null || popoverRef === void 0 ? void 0 : popoverRef.current, conditionBuilderRef);
+};
+
+//skipping keyboard handling for date and time fields to get take carbon's
+var excludeKeyPress = function excludeKeyPress(evt) {
+  return !['Escape'].includes(evt.key) && (evt.target.closest(".".concat(blockClass, "__item-date")) || evt.target.closest(".".concat(blockClass, "__item-time")));
 };
-var handleKeyPressForPopover = function handleKeyPressForPopover(evt, parentContainer) {
+var handleKeyPressForPopover = function handleKeyPressForPopover(evt, parentContainer, conditionBuilderRef) {
   var _parentContainer$quer;
   var key = evt.key;
   var isHoldingShiftKey = checkForHoldingKey(evt, 'shiftKey');
@@ -26,24 +35,30 @@ var handleKeyPressForPopover = function handleKeyPressForPopover(evt, parentCont
   var allItems = [];
   switch (key) {
     case 'ArrowUp':
+      evt.preventDefault();
       //traverse through the popover options, search box, selectAll button
       parentContainer.querySelectorAll("[role=\"option\"]").forEach(function (eachElem, index, allElements) {
-        traverseReverse(eachElem, index, allElements);
+        traverseReverse(eachElem, index, allElements, null, null, conditionBuilderRef);
       });
+      //scroll to top when we reach a the top of the list to make search box visible
+      if (Array.from(evt.target.closest('ul').querySelectorAll('li')).indexOf(evt.target) === 1) {
+        parentContainer.querySelector(".".concat(blockClass, "__popover-content-wrapper")).scrollTop = 0;
+      }
       break;
     case 'ArrowDown':
+      evt.preventDefault();
       //traverse through the popover options, search box, selectAll button
       parentContainer.querySelectorAll("[role=\"option\"]").forEach(function (eachElem, index, allElements) {
-        traverseClockVise(eachElem, index, allElements);
+        traverseClockVise(eachElem, index, allElements, null, null, conditionBuilderRef);
       });
       break;
     case 'Tab':
       allItems = [].concat(_toConsumableArray(Array.from(parentContainer.querySelectorAll(".".concat(blockClass, "__selectAll-button,[role=\"searchbox\"]")))), [parentContainer.querySelector("[role=\"option\"]")]);
       allItems.forEach(function (eachElem, index, allElements) {
         if (isHoldingShiftKey) {
-          traverseReverse(eachElem, index, allElements, true, true);
+          traverseReverse(eachElem, index, allElements, true, true, conditionBuilderRef);
         } else {
-          traverseClockVise(eachElem, index, allElements, true, true);
+          traverseClockVise(eachElem, index, allElements, true, true, conditionBuilderRef);
         }
       });
       evt.preventDefault();
@@ -59,23 +74,99 @@ var handleKeyPressForPopover = function handleKeyPressForPopover(evt, parentCont
       }
       break;
     case 'Enter':
-      if (isMultiSelect !== 'true') {
+      if (isMultiSelect === 'true') {
         if (document.activeElement.type !== 'button') {
           var _document$activeEleme2;
-          //for button , enter key is click which already handled by framework, else trigger click
+          //for button , enter key is click which already handled by framework, for other elements trigger click
           (_document$activeEleme2 = document.activeElement) === null || _document$activeEleme2 === void 0 || _document$activeEleme2.click();
-          focusThisField(evt);
+        }
+        evt.preventDefault();
+      } else {
+        if (document.activeElement.type !== 'button') {
+          var _document$activeEleme3;
+          //for button , enter key is click which already handled by framework, else trigger click
+          focusThisField(evt, conditionBuilderRef);
+          (_document$activeEleme3 = document.activeElement) === null || _document$activeEleme3 === void 0 || _document$activeEleme3.click();
         }
       }
       break;
     case 'Escape':
-      //focus the corresponding field in which the popover is triggered
-      focusThisField(evt);
+      //focus the corresponding field in which the popover is triggered\
+      focusThisField(evt, conditionBuilderRef);
+      break;
+  }
+};
+var handleKeyPressForMainContent = function handleKeyPressForMainContent(evt, conditionBuilderRef, variant) {
+  var _document$activeEleme4;
+  switch (evt.key) {
+    case 'ArrowRight':
+      evt.preventDefault();
+      if (variant == 'tree') {
+        var _evt$target$closest;
+        var allCellsInRow = Array.from((_evt$target$closest = evt.target.closest('[role="row"]')) === null || _evt$target$closest === void 0 ? void 0 : _evt$target$closest.querySelectorAll('[role="gridcell"] button'));
+        if (allCellsInRow.length === 1) {
+          evt.target = evt.target.closest('[role="row"]');
+          handleRowNavigationTree(evt, conditionBuilderRef, variant);
+          //focus next row
+        } else if (evt.target.getAttribute('role') == 'row') {
+          //when current focus is on a row, then we need to enter inside and focus the first cell of that row
+
+          //focus first cell
+          manageTabIndexAndFocus(allCellsInRow[0], conditionBuilderRef);
+        } else {
+          //finding the next cell to be focussed
+          //next cell = current cell index + 1
+
+          var currentItemIndex = allCellsInRow.indexOf(evt.target);
+          if (currentItemIndex < allCellsInRow.length - 1) {
+            focusThisItem(allCellsInRow[currentItemIndex + 1], conditionBuilderRef);
+          }
+        }
+      } else {
+        handleCellNavigation(evt, conditionBuilderRef);
+      }
+      break;
+    case 'ArrowLeft':
+      evt.preventDefault();
+      if (variant == 'tree') {
+        if (evt.target.getAttribute('role') !== 'row') {
+          var _evt$target$closest2;
+          //when any cell is focussed, arrow left will select the previous cell or current row
+
+          var _allCellsInRow = Array.from((_evt$target$closest2 = evt.target.closest('[role="row"]')) === null || _evt$target$closest2 === void 0 ? void 0 : _evt$target$closest2.querySelectorAll('[role="gridcell"] button'));
+          var _currentItemIndex = _allCellsInRow.indexOf(evt.target);
+          if (_currentItemIndex > 0) {
+            focusThisItem(_allCellsInRow[_currentItemIndex - 1], conditionBuilderRef);
+          } else {
+            //focus the row
+            var wrapper = evt.target.closest("[role=\"row\"]");
+            manageTabIndexAndFocus(wrapper, conditionBuilderRef);
+          }
+        }
+      } else {
+        handleCellNavigation(evt, conditionBuilderRef);
+      }
+      break;
+    case 'ArrowUp':
+    case 'ArrowDown':
+      evt.preventDefault();
+      if (variant == 'tree') {
+        handleRowNavigationTree(evt, conditionBuilderRef, variant);
+      } else {
+        handleRowNavigation(evt, conditionBuilderRef, variant);
+      }
+      break;
+    case 'Enter':
+      if (((_document$activeEleme4 = document.activeElement) === null || _document$activeEleme4 === void 0 || (_document$activeEleme4 = _document$activeEleme4.querySelectorAll("button")) === null || _document$activeEleme4 === void 0 ? void 0 : _document$activeEleme4.length) === 1) {
+        var _document$activeEleme5;
+        (_document$activeEleme5 = document.activeElement) === null || _document$activeEleme5 === void 0 || (_document$activeEleme5 = _document$activeEleme5.querySelectorAll("button")[0]) === null || _document$activeEleme5 === void 0 || _document$activeEleme5.click();
+      }
       break;
   }
 };
 var getRows = function getRows(conditionBuilderRef) {
-  return Array.from(conditionBuilderRef.current.querySelectorAll('[role="row"]'));
+  var _conditionBuilderRef$;
+  return Array.from((_conditionBuilderRef$ = conditionBuilderRef.current) === null || _conditionBuilderRef$ === void 0 ? void 0 : _conditionBuilderRef$.querySelectorAll('[role="row"]'));
 };
 var getRowIndex = function getRowIndex(element, conditionBuilderRef) {
   var rows = getRows(conditionBuilderRef);
@@ -83,14 +174,37 @@ var getRowIndex = function getRowIndex(element, conditionBuilderRef) {
     return row.contains(element);
   });
 };
-var handleRowNavigation = function handleRowNavigation(evt, conditionBuilderRef) {
+var handleRowNavigation = function handleRowNavigation(evt, conditionBuilderRef, variant) {
   var rows = getRows(conditionBuilderRef);
   var currentRowIndex = getRowIndex(evt.target, conditionBuilderRef);
-  navigateToNextRowCell(evt, currentRowIndex, rows);
+  navigateToNextRowCell(evt, currentRowIndex, rows, variant, conditionBuilderRef);
+};
+var handleRowNavigationTree = function handleRowNavigationTree(evt, conditionBuilderRef, variant) {
+  var rows = getRows(conditionBuilderRef);
+  var currentRowIndex = getRowIndex(evt.target, conditionBuilderRef);
+  var nextRowIndex = currentRowIndex;
+  if (evt.target.getAttribute('role') == 'row') {
+    if (['ArrowDown', 'ArrowRight'].includes(evt.key)) {
+      nextRowIndex += 1;
+    } else if (evt.key === 'ArrowUp') {
+      nextRowIndex -= 1;
+    }
+
+    //maintaining selection for first and last rows
+    if (nextRowIndex < 0) {
+      nextRowIndex = 0;
+    } else if (nextRowIndex >= rows.length) {
+      nextRowIndex = rows.length - 1;
+    }
+    if (nextRowIndex !== currentRowIndex) {
+      manageTabIndexAndFocus(rows[nextRowIndex], conditionBuilderRef);
+    }
+  } else {
+    navigateToNextRowCell(evt, currentRowIndex, rows, variant, conditionBuilderRef);
+  }
 };
-var navigateToNextRowCell = function navigateToNextRowCell(evt, currentRowIndex, rows) {
-  var _nextRow$querySelecto;
-  //when the focussed element is a cell of the row which has only 1 cell (connector or statement) , focus the next row
+var navigateToNextRowCell = function navigateToNextRowCell(evt, currentRowIndex, rows, variant, conditionBuilderRef) {
+  //when the current focussed element is a cell of any row, arrow up/down will focus the next row same cell.
 
   var nextRowIndex = currentRowIndex;
   if (evt.key === 'ArrowUp') {
@@ -101,25 +215,21 @@ var navigateToNextRowCell = function navigateToNextRowCell(evt, currentRowIndex,
   }
   var nextRow = rows[nextRowIndex];
   var itemName = evt.target.dataset.name;
-  nextRow === null || nextRow === void 0 || (_nextRow$querySelecto = nextRow.querySelector("[data-name=\"".concat(itemName, "\"]"))) === null || _nextRow$querySelecto === void 0 || _nextRow$querySelecto.focus();
-};
-var handleKeyPressForMainContent = function handleKeyPressForMainContent(evt, conditionBuilderRef) {
-  switch (evt.key) {
-    case 'ArrowRight':
-    case 'ArrowLeft':
-      conditionBuilderRef.current.querySelectorAll("[role=\"gridcell\"] button").forEach(function (eachElem, index, allElements) {
-        if (evt.key === 'ArrowRight') {
-          traverseClockVise(eachElem, index, allElements);
-        } else {
-          traverseReverse(eachElem, index, allElements);
-        }
-      });
-      break;
-    case 'ArrowUp':
-    case 'ArrowDown':
-      handleRowNavigation(evt, conditionBuilderRef);
-      break;
+  if (nextRow !== null && nextRow !== void 0 && nextRow.querySelector("[data-name=\"".concat(itemName, "\"]"))) {
+    manageTabIndexAndFocus(nextRow === null || nextRow === void 0 ? void 0 : nextRow.querySelector("[data-name=\"".concat(itemName, "\"]")), conditionBuilderRef);
+  } else if (variant === 'tree') {
+    //when the next row is a if statement , then that row is focused. From any cell of last row of an group , arrow down select the next row (if)
+    manageTabIndexAndFocus(nextRow, conditionBuilderRef);
   }
 };
+var handleCellNavigation = function handleCellNavigation(evt, conditionBuilderRef) {
+  conditionBuilderRef.current.querySelectorAll("[role=\"gridcell\"] button").forEach(function (eachElem, index, allElements) {
+    if (evt.key === 'ArrowRight') {
+      traverseClockVise(eachElem, index, allElements, null, null, conditionBuilderRef);
+    } else {
+      traverseReverse(eachElem, index, allElements, null, null, conditionBuilderRef);
+    }
+  });
+};
 
-export { handleKeyDown };
+export { handleKeyDown, handleKeyDownForPopover };

package/es/components/ConditionBuilder/utils/useTranslations.d.ts

@@ -0,0 +1 @@
+export function useTranslations(translationKeys: any): any;

package/es/components/ConditionBuilder/utils/useTranslations.js

@@ -0,0 +1,26 @@
+/**
+ * Copyright IBM Corp. 2020, 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 { useContext } from 'react';
+import { ConditionBuilderContext } from '../ConditionBuilderContext/ConditionBuilderProvider.js';
+import { translationsObject } from '../ConditionBuilderContext/translationObject.js';
+
+var useTranslations = function useTranslations(translationKeys) {
+  var _useContext = useContext(ConditionBuilderContext),
+    translateWithId = _useContext.translateWithId;
+  return translationKeys.map(function (translationKey) {
+    if (translateWithId !== null && translateWithId !== void 0 && translateWithId(translationKey)) {
+      return translateWithId(translationKey);
+    } else if (translationsObject[translationKey]) {
+      return translationsObject[translationKey];
+    } else {
+      return translationKey;
+    }
+  });
+};
+
+export { useTranslations };

package/es/components/ConditionBuilder/utils/util.d.ts

@@ -1,5 +1,7 @@
-export function focusThisField(evt: any): void;
-export function focusThisItem(currentElement: any): void;
-export function traverseClockVise(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any): void;
-export function traverseReverse(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any): void;
+export function focusThisField(evt: any, conditionBuilderRef: any): void;
+export function focusThisItem(currentElement: any, conditionBuilderRef: any): void;
+export function traverseClockVise(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any, conditionBuilderRef: any): void;
+export function traverseReverse(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any, conditionBuilderRef: any): void;
 export function checkForHoldingKey(evt: any, key: any): any;
+export function checkIsValid(item: any): any;
+export function manageTabIndexAndFocus(currentElement: any, conditionBuilderRef: any): void;

package/es/components/ConditionBuilder/utils/util.js

@@ -5,41 +5,66 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-var focusThisField = function focusThisField(evt) {
-  setTimeout(function () {
-    var _evt$target$closest, _evt$target$closest2;
-    (_evt$target$closest = evt.target.closest('[role="gridcell"]')) === null || _evt$target$closest === void 0 || (_evt$target$closest = _evt$target$closest.querySelector('button')) === null || _evt$target$closest === void 0 || _evt$target$closest.click();
-    (_evt$target$closest2 = evt.target.closest('[role="gridcell"]')) === null || _evt$target$closest2 === void 0 || (_evt$target$closest2 = _evt$target$closest2.querySelector('button')) === null || _evt$target$closest2 === void 0 || _evt$target$closest2.focus();
-  }, 0);
+import { blockClass } from '../ConditionBuilderContext/DataConfigs.js';
+
+var focusThisField = function focusThisField(evt, conditionBuilderRef) {
+  if (evt) {
+    setTimeout(function () {
+      var _evt$target$closest, _evt$target$closest2, _evt$target$closest3;
+      manageTabIndexAndFocus((_evt$target$closest = evt.target.closest('[role="gridcell"]')) === null || _evt$target$closest === void 0 ? void 0 : _evt$target$closest.querySelector('button'), conditionBuilderRef);
+      (_evt$target$closest2 = evt.target.closest('[role="gridcell"]')) === null || _evt$target$closest2 === void 0 || (_evt$target$closest2 = _evt$target$closest2.querySelector('button')) === null || _evt$target$closest2 === void 0 || _evt$target$closest2.click();
+      (_evt$target$closest3 = evt.target.closest('[role="gridcell"]')) === null || _evt$target$closest3 === void 0 || (_evt$target$closest3 = _evt$target$closest3.querySelector('button')) === null || _evt$target$closest3 === void 0 || _evt$target$closest3.focus();
+    }, 0);
+  }
 };
-var focusThisItem = function focusThisItem(currentElement) {
+var focusThisItem = function focusThisItem(currentElement, conditionBuilderRef) {
   setTimeout(function () {
     //document.activeElement.setAttribute('tabindex', '-1');
     // currentElement.setAttribute('tabindex', '0');
-    currentElement === null || currentElement === void 0 || currentElement.focus();
+    manageTabIndexAndFocus(currentElement, conditionBuilderRef);
   }, 0);
 };
-var traverseClockVise = function traverseClockVise(eachElem, index, allElements, rotate, trapFocus) {
+var traverseClockVise = function traverseClockVise(eachElem, index, allElements, rotate, trapFocus, conditionBuilderRef) {
   if (eachElem == document.activeElement) {
     if (index !== allElements.length - 1) {
-      focusThisItem(allElements[index + 1]);
+      focusThisItem(allElements[index + 1], conditionBuilderRef);
     } else {
-      focusThisItem(allElements[rotate ? 0 : allElements.length - 1]);
+      focusThisItem(allElements[rotate ? 0 : allElements.length - 1], conditionBuilderRef);
     }
   } else if (Array.from(allElements).indexOf(document.activeElement) == -1 && trapFocus) {
-    focusThisItem(allElements[0]);
+    focusThisItem(allElements[0], conditionBuilderRef);
   }
 };
-var traverseReverse = function traverseReverse(eachElem, index, allElements, rotate, trapFocus) {
+var traverseReverse = function traverseReverse(eachElem, index, allElements, rotate, trapFocus, conditionBuilderRef) {
   if (eachElem == document.activeElement) {
     if (index !== 0) {
-      focusThisItem(allElements[index - 1]);
+      focusThisItem(allElements[index - 1], conditionBuilderRef);
     } else {
-      focusThisItem(allElements[rotate ? allElements.length - 1 : 0]);
+      focusThisItem(allElements[rotate ? allElements.length - 1 : 0], conditionBuilderRef);
     }
   } else if (Array.from(allElements).indexOf(document.activeElement) == -1 && trapFocus) {
-    focusThisItem(allElements[allElements.length - 1]);
+    focusThisItem(allElements[allElements.length - 1], conditionBuilderRef);
   }
 };
+var checkForHoldingKey = function checkForHoldingKey(evt, key) {
+  // possible key inputs: altKey,ctrlKey,metaKey,shiftKey
+  if (key === 'cmd') {
+    return evt.metaKey || evt.ctrlKey;
+  }
+  return evt[key];
+};
+var checkIsValid = function checkIsValid(item) {
+  return item && item !== 'INVALID';
+};
+var manageTabIndexAndFocus = function manageTabIndexAndFocus(currentElement, conditionBuilderRef) {
+  var _currentElement$close, _conditionBuilderRef$;
+  var contentContainer = (_currentElement$close = currentElement === null || currentElement === void 0 ? void 0 : currentElement.closest(".".concat(blockClass, "__content-container"))) !== null && _currentElement$close !== void 0 ? _currentElement$close : currentElement === null || currentElement === void 0 ? void 0 : currentElement.closest(".".concat(blockClass, "__actions-container"));
+  contentContainer && Array.from(contentContainer.querySelectorAll('[tabindex="0"]')).map(function (element) {
+    return element === null || element === void 0 ? void 0 : element.setAttribute('tabindex', '-1');
+  });
+  currentElement === null || currentElement === void 0 || currentElement.setAttribute('tabindex', '0');
+  (_conditionBuilderRef$ = conditionBuilderRef.current) === null || _conditionBuilderRef$ === void 0 || (_conditionBuilderRef$ = _conditionBuilderRef$.querySelector(".".concat(blockClass, "__statement-button"))) === null || _conditionBuilderRef$ === void 0 || _conditionBuilderRef$.setAttribute('tabindex', '1');
+  currentElement === null || currentElement === void 0 || currentElement.focus();
+};
 
-export { focusThisField, focusThisItem, traverseClockVise, traverseReverse };
+export { checkForHoldingKey, checkIsValid, focusThisField, focusThisItem, manageTabIndexAndFocus, traverseClockVise, traverseReverse };

package/es/components/CreateFullPage/CreateFullPage.js

@@ -89,6 +89,7 @@ var CreateFullPage = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     _useState10 = _slicedToArray(_useState9, 2),
     modalIsOpen = _useState10[0],
     setModalIsOpen = _useState10[1];
+  // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
   var previousState = usePreviousValue({
     currentStep: currentStep,
     open: open
@@ -146,8 +147,7 @@ var CreateFullPage = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
   useResetCreateComponent({
     firstIncludedStep: firstIncludedStep,
     previousState: previousState,
-    /**@ts-ignore */
-    open: open,
+    open: true,
     setCurrentStep: setCurrentStep,
     stepData: stepData,
     /**@ts-ignore */

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

@@ -20,6 +20,10 @@ interface DataSpreadsheetProps {
      * The data that will build the column headers
      */
     columns?: readonly Column<object>[];
+    /**
+     * Disable column swapping, default false
+     */
+    disableColumnSwapping?: boolean;
     /**
      * The spreadsheet data that will be rendered in the body of the spreadsheet component
      */
@@ -28,6 +32,10 @@ interface DataSpreadsheetProps {
      * Sets the number of empty rows to be created when there is no data provided
      */
     defaultEmptyRowCount?: number;
+    /**
+     * Check if has custom row header component attached
+     */
+    hasCustomRowHeader?: boolean;
     /**
      * The spreadsheet id
      */
@@ -36,6 +44,12 @@ interface DataSpreadsheetProps {
      * The event handler that is called when the active cell changes
      */
     onActiveCellChange?: () => void;
+    /**
+     * Callback for columns after being dragged
+     */
+    onColDrag?: ({ ...args }: {
+        [x: string]: any;
+    }) => void;
     /**
      * The setter fn for the data prop
      */
@@ -46,6 +60,18 @@ interface DataSpreadsheetProps {
      * The event handler that is called when the selection area values change
      */
     onSelectionAreaChange?: () => void;
+    /**
+     * Read-only table
+     */
+    readOnlyTable?: boolean;
+    /**
+     * Position of the custom row numbering component
+     */
+    renderRowHeaderDirection?: 'left' | 'right';
+    /**
+     * Component next to numbering rows
+     */
+    renderRowHeader?: (index: number) => any[];
     /**
      * The aria label applied to the Select all button
      */