@carbon/ibm-products 2.39.0 → 2.40.1-canary.6

package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ConditionBuilderItemOption.js

@@ -41,6 +41,7 @@ var ConditionBuilderItemOption = function ConditionBuilderItemOption(_ref) {
     filteredItems = _useState4[0],
     setFilteredItems = _useState4[1];
   var selection = Array.isArray(conditionState.value) ? conditionState.value : conditionState.value !== undefined ? [conditionState.value] : [];
+  var contentRef = React.useRef();
   React.useEffect(function () {
     if (!allOptions && getOptions) {
       var fetchData = /*#__PURE__*/function () {
@@ -71,8 +72,18 @@ var ConditionBuilderItemOption = function ConditionBuilderItemOption(_ref) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  var handleSelectAll = function handleSelectAll(e) {
-    if (e.currentTarget.dataset.selectedAll == 'false') {
+  React.useEffect(function () {
+    //this will focus the first input field in the popover
+
+    if (contentRef.current) {
+      var _contentRef$current;
+      var firstFocusableElement = (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.querySelector('input, button,li');
+      firstFocusableElement === null || firstFocusableElement === void 0 || firstFocusableElement.focus();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [allOptions]);
+  var handleSelectAll = function handleSelectAll(evt) {
+    if (evt.currentTarget.dataset.selectedAll == 'false') {
       onChange(undefined);
     } else {
       onChange(allOptions.map(function (op) {
@@ -80,31 +91,32 @@ var ConditionBuilderItemOption = function ConditionBuilderItemOption(_ref) {
       }));
     }
   };
-  var onSearchChangeHandler = function onSearchChangeHandler(e) {
-    var value = e.target.value;
+  var onSearchChangeHandler = function onSearchChangeHandler(evt) {
+    var value = evt.target.value;
     var _filteredItems = allOptions.filter(function (opt) {
       return opt.label.toLowerCase().includes(value.toLowerCase());
     });
     setFilteredItems(_filteredItems);
   };
-  var onClickHandler = function onClickHandler(e, option, isSelected) {
+  var onClickHandler = function onClickHandler(evt, option, isSelected) {
     if (multiSelectable) {
       if (isSelected) {
         var items = selection.filter(function (v) {
           return v !== option.id;
         });
-        onChange(items.length > 0 ? items : undefined, e);
+        onChange(items.length > 0 ? items : undefined, evt);
       } else {
-        onChange([].concat(_rollupPluginBabelHelpers.toConsumableArray(selection), [option.id]), e);
+        onChange([].concat(_rollupPluginBabelHelpers.toConsumableArray(selection), [option.id]), evt);
       }
     } else {
-      onChange(option.id, e);
+      onChange(option.id, evt);
     }
   };
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, allOptions && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(DataConfigs.blockClass, "__condition-builder-item-option")
+    className: "".concat(DataConfigs.blockClass, "__item-option"),
+    ref: contentRef
   }, (config.includeSearch || allOptions.length > popOverSearchThreshold) && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(DataConfigs.blockClass, "__condition-builder-item-option__search")
+    className: "".concat(DataConfigs.blockClass, "__item-option__search")
   }, /*#__PURE__*/React__default["default"].createElement(react.Search, {
     size: "sm",
     labelText: DataConfigs.translateWithId('clear_search'),
@@ -130,25 +142,25 @@ var ConditionBuilderItemOption = function ConditionBuilderItemOption(_ref) {
       key: option.id,
       role: "option",
       "aria-selected": isSelected,
-      className: "".concat(DataConfigs.blockClass, "__condition-builder-item-option__option"),
+      className: "".concat(DataConfigs.blockClass, "__item-option__option"),
       onKeyUp: function onKeyUp() {
         return false;
       },
-      onClick: function onClick(e) {
-        return onClickHandler(e, option, isSelected);
+      onClick: function onClick(evt) {
+        return onClickHandler(evt, option, isSelected);
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "".concat(DataConfigs.blockClass, "__condition-builder-item-option__option-content")
+      className: "".concat(DataConfigs.blockClass, "__item-option__option-content")
     }, multiSelectable ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
       className: "".concat(DataConfigs.blockClass, "__option-check-box")
     }, isSelected ? _CheckboxCheckedFille || (_CheckboxCheckedFille = /*#__PURE__*/React__default["default"].createElement(icons.CheckboxCheckedFilled, null)) : _Checkbox || (_Checkbox = /*#__PURE__*/React__default["default"].createElement(icons.Checkbox, null))), /*#__PURE__*/React__default["default"].createElement("span", {
-      className: "".concat(DataConfigs.blockClass, "__condition-builder-item-option__option-label")
+      className: "".concat(DataConfigs.blockClass, "__item-option__option-label")
     }, option.label), Icon && /*#__PURE__*/React__default["default"].createElement("span", {
       className: "".concat(DataConfigs.blockClass, "__option-icon")
     }, /*#__PURE__*/React__default["default"].createElement(Icon, null))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
-      className: "".concat(DataConfigs.blockClass, "__condition-builder-item-option__option-label")
+      className: "".concat(DataConfigs.blockClass, "__item-option__option-label")
     }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, null), option.label), isSelected && /*#__PURE__*/React__default["default"].createElement(icons.Checkmark, {
-      className: "".concat(DataConfigs.blockClass, "__condition-builder-checkmark")
+      className: "".concat(DataConfigs.blockClass, "__checkmark")
     }))));
   }))), !allOptions && (_SelectSkeleton || (_SelectSkeleton = /*#__PURE__*/React__default["default"].createElement(react.SelectSkeleton, null))));
 };

package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemText/ConditionBuilderItemText.js

@@ -23,14 +23,14 @@ var ConditionBuilderItemText = function ConditionBuilderItemText(_ref) {
   var conditionState = _ref.conditionState,
     _onChange = _ref.onChange;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(DataConfigs.blockClass, "__condition-builder-item-text")
+    className: "".concat(DataConfigs.blockClass, "__item-text")
   }, /*#__PURE__*/React__default["default"].createElement(react.TextInput, {
     labelText: conditionState.property,
     hideLabel: true,
     value: (_conditionState$value = conditionState.value) !== null && _conditionState$value !== void 0 ? _conditionState$value : '',
     id: (_conditionState$prope = conditionState.property) === null || _conditionState$prope === void 0 ? void 0 : _conditionState$prope.replace(/\s/g, ''),
-    onChange: function onChange(e) {
-      _onChange(e.target.value);
+    onChange: function onChange(evt) {
+      _onChange(evt.target.value);
     }
   }));
 };

package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemTime/ConditionBuilderItemTime.js

@@ -41,17 +41,17 @@ var ConditionBuilderItemTime = function ConditionBuilderItemTime(_ref) {
     onChange(timeValue ? timeToUpdate : undefined);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [timeValue, dayZoneValue, timeZoneValue]);
-  var setTimeZone = function setTimeZone(e) {
-    setTimeZoneValue(e.target.value);
+  var setTimeZone = function setTimeZone(evt) {
+    setTimeZoneValue(evt.target.value);
   };
-  var setDayZone = function setDayZone(e) {
-    setDayZoneValue(e.target.value);
+  var setDayZone = function setDayZone(evt) {
+    setDayZoneValue(evt.target.value);
   };
-  var setTime = function setTime(e) {
-    setTimeValue(e.target.value);
+  var setTime = function setTime(evt) {
+    setTimeValue(evt.target.value);
   };
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(DataConfigs.blockClass, "__condition-builder-item-time")
+    className: "".concat(DataConfigs.blockClass, "__item-time")
   }, /*#__PURE__*/React__default["default"].createElement(react.TimePicker, {
     id: "time-picker",
     labelText: "Select a time",

package/lib/components/ConditionBuilder/ConditionConnector/ConditionConnector.js

@@ -36,17 +36,17 @@ function ConditionConnector(_ref) {
       parentGroup.classList.remove('hoveredConnector');
     }
   }, []);
-  var activeConnectorHandler = function activeConnectorHandler(e) {
-    var parentGroup = e.currentTarget.closest('.eachGroup');
+  var activeConnectorHandler = function activeConnectorHandler(evt) {
+    var parentGroup = evt.currentTarget.closest('.eachGroup');
     handleConnectorHover(parentGroup, true);
   };
-  var inActiveConnectorHandler = function inActiveConnectorHandler(e) {
-    var parentGroup = e.currentTarget.closest('.eachGroup');
+  var inActiveConnectorHandler = function inActiveConnectorHandler(evt) {
+    var parentGroup = evt.currentTarget.closest('.eachGroup');
     handleConnectorHover(parentGroup, false);
   };
-  var onChangeHandler = function onChangeHandler(op, e) {
+  var onChangeHandler = function onChangeHandler(op, evt) {
     onChange(op);
-    util.focusThisField(e);
+    util.focusThisField(evt);
   };
   return (
     /*#__PURE__*/

package/lib/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.js

@@ -34,16 +34,16 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
     onChange = _ref.onChange,
     conditionBuilderRef = _ref.conditionBuilderRef,
     className = _ref.className;
-  var onRemoveHandler = function onRemoveHandler(conditionId, e) {
+  var onRemoveHandler = function onRemoveHandler(conditionId, evt) {
     if (group.conditions.length > 1) {
       onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
         conditions: group.conditions.filter(function (condition) {
           return conditionId !== condition.id;
         })
       }));
-      handleFocusOnClose(e);
+      handleFocusOnClose(evt);
     } else {
-      onRemove();
+      onRemove(evt);
     }
   };
   var onChangeHandler = function onChangeHandler(updatedCondition, conditionIndex) {
@@ -67,9 +67,9 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
   var isLastCondition = function isLastCondition(conditionIndex, conditionArr) {
     return conditionIndex + 1 >= conditionArr.length || conditionArr.length - 1 != conditionIndex && conditionArr[conditionIndex + 1].conditions;
   };
-  var handleFocusOnClose = function handleFocusOnClose(e) {
-    var _e$currentTarget;
-    var previousClose = (_e$currentTarget = e.currentTarget) === null || _e$currentTarget === void 0 || (_e$currentTarget = _e$currentTarget.closest('[role="row"]')) === null || _e$currentTarget === void 0 || (_e$currentTarget = _e$currentTarget.previousSibling) === null || _e$currentTarget === void 0 ? void 0 : _e$currentTarget.querySelector('[data-name="closeCondition"]');
+  var handleFocusOnClose = function handleFocusOnClose(evt) {
+    var _evt$currentTarget;
+    var previousClose = (_evt$currentTarget = evt.currentTarget) === null || _evt$currentTarget === void 0 || (_evt$currentTarget = _evt$currentTarget.closest('[role="row"]')) === null || _evt$currentTarget === void 0 || (_evt$currentTarget = _evt$currentTarget.parentElement) === null || _evt$currentTarget === void 0 || (_evt$currentTarget = _evt$currentTarget.previousSibling) === null || _evt$currentTarget === void 0 ? void 0 : _evt$currentTarget.querySelector('[data-name="closeCondition"]');
     if (previousClose) {
       previousClose.focus();
     }
@@ -84,7 +84,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       key: eachCondition.id
     }, eachCondition.conditions && /*#__PURE__*/React__default["default"].createElement(ConditionGroupBuilder, {
-      className: "".concat(DataConfigs.blockClass, "__condition-builder__group"),
+      className: "".concat(DataConfigs.blockClass, "__group"),
       aria: {
         level: aria.level + 1,
         posinset: conditionIndex + 1,
@@ -94,8 +94,8 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
       onChange: function onChange(updatedCondition) {
         onChangeHandler(updatedCondition, conditionIndex);
       },
-      onRemove: function onRemove(e) {
-        onRemoveHandler(eachCondition.id, e);
+      onRemove: function onRemove(evt) {
+        onRemoveHandler(eachCondition.id, evt);
       },
       conditionBuilderRef: conditionBuilderRef
     }), !eachCondition.conditions && /*#__PURE__*/React__default["default"].createElement(ConditionBlock["default"], {
@@ -114,8 +114,8 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
         onChangeHandler(updatedConditions, conditionIndex);
       },
       addConditionHandler: addConditionHandler,
-      onRemove: function onRemove(e) {
-        onRemoveHandler(eachCondition.id, e);
+      onRemove: function onRemove(evt) {
+        onRemoveHandler(eachCondition.id, evt);
       },
       onConnectorOperatorChange: function onConnectorOperatorChange(op) {
         onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {

package/lib/components/ConditionBuilder/utils/checkForHoldingKey.d.ts

@@ -0,0 +1 @@
+export function checkForHoldingKey(evt: any, key: any): any;

package/lib/components/ConditionBuilder/utils/checkForHoldingKey.js

@@ -0,0 +1,20 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var checkForHoldingKey = function checkForHoldingKey(evt, key) {
+  // possible key inputs: altKey,ctrlKey,metaKey,shiftKey
+  if (key === 'cmd') {
+    return evt.metaKey || evt.ctrlKey;
+  }
+  return evt[key];
+};
+
+exports.checkForHoldingKey = checkForHoldingKey;

package/lib/components/ConditionBuilder/utils/handleKeyboardEvents.d.ts

@@ -0,0 +1 @@
+export function handleKeyDown(evt: any, conditionBuilderRef: any): void;

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

@@ -0,0 +1,129 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
+var checkForHoldingKey = require('./checkForHoldingKey.js');
+var util = require('./util.js');
+
+var handleKeyDown = function handleKeyDown(evt, conditionBuilderRef) {
+  var activeElement = document.activeElement;
+  if (activeElement.closest("[role=\"dialog\"]")) {
+    handleKeyPressForPopover(evt, activeElement.closest("[role=\"dialog\"]"));
+  } else {
+    handleKeyPressForMainContent(evt, conditionBuilderRef);
+  }
+};
+var handleKeyPressForPopover = function handleKeyPressForPopover(evt, parentContainer) {
+  var _parentContainer$quer;
+  var key = evt.key;
+  var isHoldingShiftKey = checkForHoldingKey.checkForHoldingKey(evt, 'shiftKey');
+  var isMultiSelect = (_parentContainer$quer = parentContainer.querySelector('ul')) === null || _parentContainer$quer === void 0 ? void 0 : _parentContainer$quer.dataset.multiSelect;
+  var allItems = [];
+  switch (key) {
+    case 'ArrowUp':
+      //traverse through the popover options, search box, selectAll button
+      parentContainer.querySelectorAll("[role=\"option\"]").forEach(function (eachElem, index, allElements) {
+        util.traverseReverse(eachElem, index, allElements);
+      });
+      break;
+    case 'ArrowDown':
+      //traverse through the popover options, search box, selectAll button
+      parentContainer.querySelectorAll("[role=\"option\"]").forEach(function (eachElem, index, allElements) {
+        util.traverseClockVise(eachElem, index, allElements);
+      });
+      break;
+    case 'Tab':
+      allItems = [].concat(_rollupPluginBabelHelpers.toConsumableArray(Array.from(parentContainer.querySelectorAll(".".concat(DataConfigs.blockClass, "__selectAll-button,[role=\"searchbox\"]")))), [parentContainer.querySelector("[role=\"option\"]")]);
+      allItems.forEach(function (eachElem, index, allElements) {
+        if (isHoldingShiftKey) {
+          util.traverseReverse(eachElem, index, allElements, true, true);
+        } else {
+          util.traverseClockVise(eachElem, index, allElements, true, true);
+        }
+      });
+      evt.preventDefault();
+      break;
+    case ' ':
+      if (isMultiSelect === 'true') {
+        if (document.activeElement.type !== 'button') {
+          var _document$activeEleme;
+          //for button , enter key is click which already handled by framework, for other elements trigger click
+          (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 || _document$activeEleme.click();
+        }
+        evt.preventDefault();
+      }
+      break;
+    case 'Enter':
+      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
+          (_document$activeEleme2 = document.activeElement) === null || _document$activeEleme2 === void 0 || _document$activeEleme2.click();
+          util.focusThisField(evt);
+        }
+      }
+      break;
+    case 'Escape':
+      //focus the corresponding field in which the popover is triggered
+      util.focusThisField(evt);
+      break;
+  }
+};
+var getRows = function getRows(conditionBuilderRef) {
+  return Array.from(conditionBuilderRef.current.querySelectorAll('[role="row"]'));
+};
+var getRowIndex = function getRowIndex(element, conditionBuilderRef) {
+  var rows = getRows(conditionBuilderRef);
+  return rows.findIndex(function (row) {
+    return row.contains(element);
+  });
+};
+var handleRowNavigation = function handleRowNavigation(evt, conditionBuilderRef) {
+  var rows = getRows(conditionBuilderRef);
+  var currentRowIndex = getRowIndex(evt.target, conditionBuilderRef);
+  navigateToNextRowCell(evt, currentRowIndex, rows);
+};
+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 nextRowIndex = currentRowIndex;
+  if (evt.key === 'ArrowUp') {
+    nextRowIndex = currentRowIndex == 0 ? currentRowIndex : currentRowIndex - 1;
+  }
+  if (evt.key === 'ArrowDown') {
+    nextRowIndex = currentRowIndex === rows.length - 1 ? rows.length - 1 : currentRowIndex + 1;
+  }
+  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') {
+          util.traverseClockVise(eachElem, index, allElements);
+        } else {
+          util.traverseReverse(eachElem, index, allElements);
+        }
+      });
+      break;
+    case 'ArrowUp':
+    case 'ArrowDown':
+      handleRowNavigation(evt, conditionBuilderRef);
+      break;
+  }
+};
+
+exports.handleKeyDown = handleKeyDown;

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

@@ -1,4 +1,4 @@
-export function focusThisField(e: any): void;
+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;

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

@@ -9,12 +9,44 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var focusThisField = function focusThisField(e) {
+var focusThisField = function focusThisField(evt) {
   setTimeout(function () {
-    var _e$target$closest, _e$target$closest2;
-    (_e$target$closest = e.target.closest('[role="gridcell"]')) === null || _e$target$closest === void 0 || (_e$target$closest = _e$target$closest.querySelector('button')) === null || _e$target$closest === void 0 || _e$target$closest.click();
-    (_e$target$closest2 = e.target.closest('[role="gridcell"]')) === null || _e$target$closest2 === void 0 || (_e$target$closest2 = _e$target$closest2.querySelector('button')) === null || _e$target$closest2 === void 0 || _e$target$closest2.focus();
+    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);
 };
+var focusThisItem = function focusThisItem(currentElement) {
+  setTimeout(function () {
+    //document.activeElement.setAttribute('tabindex', '-1');
+    // currentElement.setAttribute('tabindex', '0');
+    currentElement === null || currentElement === void 0 || currentElement.focus();
+  }, 0);
+};
+var traverseClockVise = function traverseClockVise(eachElem, index, allElements, rotate, trapFocus) {
+  if (eachElem == document.activeElement) {
+    if (index !== allElements.length - 1) {
+      focusThisItem(allElements[index + 1]);
+    } else {
+      focusThisItem(allElements[rotate ? 0 : allElements.length - 1]);
+    }
+  } else if (Array.from(allElements).indexOf(document.activeElement) == -1 && trapFocus) {
+    focusThisItem(allElements[0]);
+  }
+};
+var traverseReverse = function traverseReverse(eachElem, index, allElements, rotate, trapFocus) {
+  if (eachElem == document.activeElement) {
+    if (index !== 0) {
+      focusThisItem(allElements[index - 1]);
+    } else {
+      focusThisItem(allElements[rotate ? allElements.length - 1 : 0]);
+    }
+  } else if (Array.from(allElements).indexOf(document.activeElement) == -1 && trapFocus) {
+    focusThisItem(allElements[allElements.length - 1]);
+  }
+};
 
 exports.focusThisField = focusThisField;
+exports.focusThisItem = focusThisItem;
+exports.traverseClockVise = traverseClockVise;
+exports.traverseReverse = traverseReverse;

package/lib/components/CreateInfluencer/CreateInfluencer.js

@@ -71,7 +71,7 @@ var CreateInfluencer = function CreateInfluencer(_ref) {
       return /*#__PURE__*/React__default["default"].createElement(react.ProgressStep, {
         label: step.title,
         key: stepIndex,
-        secondaryLabel: step.secondaryLabel,
+        secondaryLabel: step.secondaryLabel || undefined,
         invalid: step.invalid
       });
     })));

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

@@ -1,2 +1,95 @@
-export let CreateTearsheetStep: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+/**
+ * Copyright IBM Corp. 2021, 2023
+ *
+ * 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, { PropsWithChildren } from 'react';
+type fieldsetLegendTextProps = {
+    /**
+     * This optional prop will render your form content inside of a fieldset html element
+     * and is defaulted to true.
+     * You can set this prop to `false` if you have multiple fieldset elements or want to control the children of your Full Page's step content.
+     */
+    hasFieldset: false;
+    /**
+     * This is the required legend text that appears above a fieldset html element for accessibility purposes.
+     * You can set the `hasFieldset` prop to false if you have multiple fieldset elements or want to control the children of your Full Page's step content.
+     * Otherwise, use CSS to hide/remove this label text.
+     */
+    fieldsetLegendText?: string;
+} | {
+    /**
+     * This optional prop will render your form content inside of a fieldset html element
+     * and is defaulted to true.
+     * You can set this prop to `false` if you have multiple fieldset elements or want to control the children of your Full Page's step content.
+     */
+    hasFieldset?: true;
+    /**
+     * This is the required legend text that appears above a fieldset html element for accessibility purposes.
+     * You can set the `hasFieldset` prop to false if you have multiple fieldset elements or want to control the children of your Full Page's step content.
+     * Otherwise, use CSS to hide/remove this label text.
+     */
+    fieldsetLegendText: string;
+};
+interface CreateTearsheetStepBaseProps extends PropsWithChildren {
+    /**
+     * Content that shows in the tearsheet step
+     */
+    children?: React.ReactNode;
+    /**
+     * Sets an optional className to be added to the tearsheet step
+     */
+    className?: string;
+    /**
+     * Sets an optional description on the step component
+     */
+    description?: React.ReactNode;
+    /**
+     * This will conditionally disable the submit button in the multi step Tearsheet
+     */
+    disableSubmit?: boolean;
+    /**
+     * This prop is used to help track dynamic steps. If this value is `false` then the step is not included in the visible steps or the ProgressIndicator
+     * steps. If this value is `true` then the step will be included in the list of visible steps, as well as being included in the ProgressIndicator step list
+     */
+    includeStep?: boolean;
+    /**
+     * This prop can be used on the first step to mark it as an intro step, which will not render the progress indicator steps
+     */
+    introStep?: boolean;
+    /**
+     * This optional prop will indicate an error icon on the progress indicator step item
+     */
+    invalid?: boolean;
+    /**
+     * Optional function to be called on initial mount of a step.
+     * For example, this can be used to fetch data that is required on a particular step.
+     */
+    onMount?: () => void;
+    /**
+     * Optional function to be called when you move to the next step.
+     * For example, this can be used to validate input fields before proceeding to the next step.
+     * This function can _optionally_ return a promise that is either resolved or rejected and the CreateTearsheet will handle the submitting state of the next button.
+     */
+    onNext?: () => Promise<void>;
+    /**
+     * Optional function to be called when you move to the previous step.
+     */
+    onPrevious?: () => void;
+    /**
+     * Sets the optional secondary label on the progress step component
+     */
+    secondaryLabel?: string;
+    /**
+     * Sets an optional subtitle on the step component
+     */
+    subtitle?: string;
+    /**
+     * Sets the title text for a tearsheet step
+     */
+    title: React.ReactNode;
+}
+type CreateTearsheetStepProps = CreateTearsheetStepBaseProps & fieldsetLegendTextProps;
+export declare let CreateTearsheetStep: React.ForwardRefExoticComponent<CreateTearsheetStepProps & React.RefAttributes<unknown>>;
+export {};

package/lib/components/CreateTearsheet/CreateTearsheetStep.js

@@ -55,7 +55,7 @@ exports.CreateTearsheetStep = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var stepsContext = React.useContext(CreateTearsheet.StepsContext);
   var stepNumber = React.useContext(CreateTearsheet.StepNumberContext);
-  var _useState = React.useState(),
+  var _useState = React.useState(includeStep),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     shouldIncludeStep = _useState2[0],
     setShouldIncludeStep = _useState2[1];
@@ -65,11 +65,11 @@ exports.CreateTearsheetStep = /*#__PURE__*/React.forwardRef(function (_ref, ref)
   useRetrieveStepData.useRetrieveStepData({
     stepsContext: stepsContext,
     stepNumber: stepNumber,
-    introStep: introStep,
+    introStep: !!introStep,
     shouldIncludeStep: shouldIncludeStep,
-    secondaryLabel: secondaryLabel,
+    secondaryLabel: secondaryLabel || '',
     title: title,
-    invalid: invalid
+    invalid: !!invalid
   });
 
   // This useEffect reports back the onMount value so that they can be used
@@ -89,7 +89,7 @@ exports.CreateTearsheetStep = /*#__PURE__*/React.forwardRef(function (_ref, ref)
   // steps container context so that it can manage the 'Next' button appropriately.
   React.useEffect(function () {
     if (stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)) {
-      stepsContext.setIsDisabled(disableSubmit);
+      stepsContext.setIsDisabled(!!disableSubmit);
       stepsContext === null || stepsContext === void 0 || stepsContext.setOnNext(onNext); // needs to be updated here otherwise there could be stale state values from only initially setting onNext
       stepsContext === null || stepsContext === void 0 || stepsContext.setOnPrevious(onPrevious);
     }
@@ -153,6 +153,7 @@ exports.CreateTearsheetStep.propTypes = {
    * You can set the `hasFieldset` prop to false if you have multiple fieldset elements or want to control the children of your Full Page's step content.
    * Otherwise, use CSS to hide/remove this label text.
    */
+  /**@ts-ignore*/
   fieldsetLegendText: index["default"].string.isRequired.if(function (_ref2) {
     var hasFieldset = _ref2.hasFieldset;
     return !!hasFieldset;
@@ -162,6 +163,7 @@ exports.CreateTearsheetStep.propTypes = {
    * and is defaulted to true.
    * You can set this prop to `false` if you have multiple fieldset elements or want to control the children of your Full Page's step content.
    */
+  /**@ts-ignore*/
   hasFieldset: index["default"].bool,
   /**
    * This prop is used to help track dynamic steps. If this value is `false` then the step is not included in the visible steps or the ProgressIndicator

package/lib/components/DataSpreadsheet/DataSpreadsheet.js

@@ -214,8 +214,9 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     }
     if ((prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row) !== (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) || (prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.column) !== (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column)) {
       if (activeCellCoordinates && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) !== 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) !== 'header') {
+        var _activeCellFullData$r;
         var activeCellFullData = typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'number' && typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'number' ? rows[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row].cells[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column] : null;
-        setActiveCellContent(activeCellFullData.render('Cell'));
+        setActiveCellContent((_activeCellFullData$r = activeCellFullData === null || activeCellFullData === void 0 ? void 0 : activeCellFullData.render('Cell')) !== null && _activeCellFullData$r !== void 0 ? _activeCellFullData$r : null);
       }
       if (activeCellCoordinates && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' || (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header') {
         setActiveCellContent(null);
@@ -423,8 +424,8 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     var activeCellFullData = typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'number' && typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'number' ? rows[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row].cells[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column] : null;
     var activeCellValue;
     if (activeCellFullData && activeCellCoordinates !== null && activeCellCoordinates !== void 0 && activeCellCoordinates.column) {
-      var _activeCellFullData$r;
-      activeCellValue = activeCellFullData ? (_activeCellFullData$r = activeCellFullData.row.cells) === null || _activeCellFullData$r === void 0 || (_activeCellFullData$r = _activeCellFullData$r[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column]) === null || _activeCellFullData$r === void 0 ? void 0 : _activeCellFullData$r.value : null;
+      var _activeCellFullData$r2;
+      activeCellValue = activeCellFullData ? (_activeCellFullData$r2 = activeCellFullData.row.cells) === null || _activeCellFullData$r2 === void 0 || (_activeCellFullData$r2 = _activeCellFullData$r2[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column]) === null || _activeCellFullData$r2 === void 0 ? void 0 : _activeCellFullData$r2.value : null;
     }
     setCellEditorValue(activeCellValue || '');
     if (cellEditorRulerRef !== null && cellEditorRulerRef !== void 0 && cellEditorRulerRef.current) {