@carbon/ibm-products 2.42.1-canary.0 → 2.42.1-canary.11

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

@@ -13,12 +13,22 @@ var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHel
 var React = require('react');
 var ConditionBlock = require('../ConditionBlock/ConditionBlock.js');
 var index = require('../../../node_modules/prop-types/index.js');
+var cx = require('classnames');
 var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
+var ConditionBuilderItem = require('../ConditionBuilderItem/ConditionBuilderItem.js');
+var ConditionBuilderItemOption = require('../ConditionBuilderItem/ConditionBuilderItemOption/ConditionBuilderItemOption.js');
+var util = require('../utils/util.js');
+var ConditionConnector = require('../ConditionBuilderConnector/ConditionConnector.js');
+var ConditionBuilderProvider = require('../ConditionBuilderContext/ConditionBuilderProvider.js');
 var uuidv4 = require('../../../global/js/utils/uuidv4.js');
+var ConditionPreview = require('../ConditionPreview/ConditionPreview.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var _ConditionPreview, _ConditionPreview2;
 
 /**
  *
@@ -26,14 +36,24 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  * All the inner components of group are called from here.
  * @returns
  */
+
 var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
-  var _group$conditions;
   var group = _ref.group,
     aria = _ref.aria,
     onRemove = _ref.onRemove,
     onChange = _ref.onChange,
     conditionBuilderRef = _ref.conditionBuilderRef,
     className = _ref.className;
+  var _useContext = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
+    variant = _useContext.variant;
+  var _useState = React.useState(-1),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    showConditionPreview = _useState2[0],
+    setShowConditionPreview = _useState2[1];
+  var _useState3 = React.useState(-1),
+    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+    showConditionSubGroupPreview = _useState4[0],
+    setShowConditionSubGroupPreview = _useState4[1];
   var onRemoveHandler = function onRemoveHandler(conditionId, evt) {
     if (group.conditions.length > 1) {
       onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
@@ -64,72 +84,183 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
       conditions: [].concat(_rollupPluginBabelHelpers.toConsumableArray(group.conditions.slice(0, conditionIndex + 1)), [newCondition], _rollupPluginBabelHelpers.toConsumableArray(group.conditions.slice(conditionIndex + 1)))
     }));
   };
-  var isLastCondition = function isLastCondition(conditionIndex, conditionArr) {
-    return conditionIndex + 1 >= conditionArr.length || conditionArr.length - 1 != conditionIndex && conditionArr[conditionIndex + 1].conditions;
-  };
-  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"]');
+  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"]');
     if (previousClose) {
       previousClose.focus();
     }
   };
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(className, "  eachGroup")
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(DataConfigs.blockClass, "__condition-wrapper"),
-    role: "grid",
-    "aria-label": DataConfigs.translateWithId('condition_builder_group')
-  }, group === null || group === void 0 || (_group$conditions = group.conditions) === null || _group$conditions === void 0 ? void 0 : _group$conditions.map(function (eachCondition, conditionIndex) {
+  var addConditionSubGroupHandler = function addConditionSubGroupHandler(conditionIndex) {
+    onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
+      conditions: [].concat(_rollupPluginBabelHelpers.toConsumableArray(group.conditions.slice(0, conditionIndex + 1)), [{
+        groupSeparateOperator: null,
+        groupOperator: 'and',
+        statement: 'if',
+        conditions: [{
+          property: undefined,
+          operator: '',
+          value: '',
+          popoverToOpen: 'propertyField',
+          id: uuidv4["default"]()
+        }],
+        id: uuidv4["default"]()
+      }], _rollupPluginBabelHelpers.toConsumableArray(group.conditions.slice(conditionIndex + 1)))
+    }));
+  };
+  var isLastCondition = function isLastCondition(conditionIndex, conditionArr) {
+    return conditionIndex + 1 >= conditionArr.length || conditionArr.length - 1 != conditionIndex && conditionArr[conditionIndex + 1].conditions;
+  };
+  var _showConditionSubGroupPreviewHandler = function showConditionSubGroupPreviewHandler(conditionIndex) {
+    setShowConditionSubGroupPreview(conditionIndex);
+  };
+  var hideConditionSubGroupPreviewHandler = function hideConditionSubGroupPreviewHandler() {
+    setShowConditionSubGroupPreview(-1);
+  };
+  var _showConditionPreviewHandler = function showConditionPreviewHandler(conditionIndex) {
+    setShowConditionPreview(conditionIndex);
+  };
+  var hideConditionPreviewHandler = function hideConditionPreviewHandler() {
+    setShowConditionPreview(-1);
+  };
+  var onStatementChangeHandler = function onStatementChangeHandler(updatedStatement) {
+    onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
+      statement: updatedStatement
+    }));
+  };
+  var onConnectorOperatorChange = function onConnectorOperatorChange(op) {
+    onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
+      groupOperator: op
+    }));
+  };
+  var getSentenceVariant = function getSentenceVariant() {
+    var _group$conditions;
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      key: eachCondition.id
-    }, eachCondition.conditions && /*#__PURE__*/React__default["default"].createElement(ConditionGroupBuilder, {
-      className: "".concat(DataConfigs.blockClass, "__group"),
-      aria: {
-        level: aria.level + 1,
-        posinset: conditionIndex + 1,
-        setsize: group.conditions.length
-      },
-      group: eachCondition,
-      onChange: function onChange(updatedCondition) {
-        onChangeHandler(updatedCondition, conditionIndex);
-      },
-      onRemove: function onRemove(evt) {
-        onRemoveHandler(eachCondition.id, evt);
-      },
-      conditionBuilderRef: conditionBuilderRef
-    }), !eachCondition.conditions && /*#__PURE__*/React__default["default"].createElement(ConditionBlock["default"], {
-      conjunction: conditionIndex > 0 ? group.groupOperator : undefined,
-      aria: {
-        level: aria.level + 1,
-        posinset: conditionIndex + 1,
-        setsize: group.conditions.length
-      },
-      isStatement: conditionIndex == 0,
-      condition: eachCondition,
-      group: group,
-      conditionIndex: conditionIndex,
-      className: "".concat(DataConfigs.blockClass, "__gap ").concat(DataConfigs.blockClass, "__gap-bottom"),
-      onChange: function onChange(updatedConditions) {
-        onChangeHandler(updatedConditions, conditionIndex);
-      },
-      addConditionHandler: addConditionHandler,
-      onRemove: function onRemove(evt) {
-        onRemoveHandler(eachCondition.id, evt);
-      },
-      onConnectorOperatorChange: function onConnectorOperatorChange(op) {
-        onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
-          groupOperator: op
-        }));
+      className: "".concat(className, "  eachGroup")
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "".concat(DataConfigs.blockClass, "__condition-wrapper"),
+      role: "grid",
+      "aria-label": DataConfigs.translateWithId('condition_builder_group')
+    }, group === null || group === void 0 || (_group$conditions = group.conditions) === null || _group$conditions === void 0 ? void 0 : _group$conditions.map(function (eachCondition, conditionIndex) {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        key: eachCondition.id,
+        className: "".concat(DataConfigs.blockClass, "__group-wrapper")
+      }, /*#__PURE__*/React__default["default"].createElement(ConditionBlock["default"], {
+        conjunction: conditionIndex > 0 ? group.groupOperator : undefined,
+        aria: {
+          level: aria.level + 1,
+          posinset: conditionIndex + 1,
+          setsize: group.conditions.length
+        },
+        isStatement: conditionIndex == 0,
+        condition: eachCondition,
+        group: group,
+        conditionIndex: conditionIndex,
+        onChange: function onChange(updatedConditions) {
+          onChangeHandler(updatedConditions, conditionIndex);
+        },
+        addConditionHandler: addConditionHandler,
+        onRemove: function onRemove(e) {
+          onRemoveHandler(eachCondition.id, e);
+        },
+        onConnectorOperatorChange: onConnectorOperatorChange,
+        onStatementChange: onStatementChangeHandler,
+        isLastCondition: isLastCondition
+      }));
+    })));
+  };
+  var getTreeVariant = function getTreeVariant() {
+    var _group$conditions2;
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "".concat(className, " ").concat(DataConfigs.blockClass, "__condition-wrapper"),
+      role: aria.level === 1 ? 'rowgroup' : undefined,
+      "aria-label": aria.level == 1 ? DataConfigs.translateWithId('condition_builder_group') : undefined
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      tabIndex: 0,
+      role: "row",
+      "aria-level": aria.level,
+      "aria-posinset": aria.posinset,
+      "aria-setsize": aria.setsize
+    }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
+      label: group.statement,
+      title: DataConfigs.translateWithId('condition'),
+      "data-name": "connectorField",
+      popOverClassName: "".concat(DataConfigs.blockClass, "__gap"),
+      className: "".concat(DataConfigs.blockClass, "__statement-button")
+    }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItemOption.ConditionBuilderItemOption, {
+      conditionState: {
+        value: group.statement,
+        label: DataConfigs.translateWithId('condition')
       },
-      onStatementChange: function onStatementChange(updatedStatement) {
-        onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
-          statement: updatedStatement
-        }));
+      onChange: function onChange(v, evt) {
+        util.focusThisField(evt);
+        onStatementChangeHandler(v);
       },
-      isLastCondition: isLastCondition
+      config: {
+        options: DataConfigs.statementConfig
+      }
+    }))), group === null || group === void 0 || (_group$conditions2 = group.conditions) === null || _group$conditions2 === void 0 ? void 0 : _group$conditions2.map(function (eachCondition, conditionIndex) {
+      return /*#__PURE__*/React__default["default"].createElement(React.Fragment, {
+        key: eachCondition.id
+      }, eachCondition.conditions ? /*#__PURE__*/React__default["default"].createElement("div", {
+        className: cx__default["default"]("".concat(DataConfigs.blockClass, "__condition-block subgroup  ").concat(DataConfigs.blockClass, "__gap"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__gap-bottom"), group.conditions.length < conditionIndex + 1))
+      }, /*#__PURE__*/React__default["default"].createElement(ConditionConnector["default"], {
+        className: "".concat(DataConfigs.blockClass, "__gap ").concat(DataConfigs.blockClass, "__groupConnector"),
+        operator: group.groupOperator,
+        "aria-hidden": true
+      }), /*#__PURE__*/React__default["default"].createElement(ConditionGroupBuilder, {
+        aria: {
+          level: aria.level + 1,
+          posinset: conditionIndex + 1,
+          setsize: group.conditions.length
+        },
+        className: "".concat(DataConfigs.blockClass, "__group"),
+        group: eachCondition,
+        onChange: function onChange(updatedConditions) {
+          onChangeHandler(updatedConditions, conditionIndex);
+        },
+        onRemove: function onRemove(e) {
+          onRemoveHandler(eachCondition.id, e);
+        },
+        conditionBuilderRef: conditionBuilderRef
+      })) : /*#__PURE__*/React__default["default"].createElement(ConditionBlock["default"], {
+        conjunction: conditionIndex > 0 ? group.groupOperator : undefined,
+        aria: {
+          level: aria.level + 1,
+          posinset: conditionIndex + 1,
+          setsize: group.conditions.length
+        },
+        isStatement: false,
+        condition: eachCondition,
+        group: group,
+        conditionIndex: conditionIndex,
+        addConditionHandler: addConditionHandler,
+        addConditionSubGroupHandler: addConditionSubGroupHandler,
+        onChange: function onChange(updatedConditions) {
+          onChangeHandler(updatedConditions, conditionIndex);
+        },
+        onRemove: function onRemove(e) {
+          onRemoveHandler(eachCondition.id, e);
+        },
+        onConnectorOperatorChange: onConnectorOperatorChange,
+        onStatementChange: onStatementChangeHandler,
+        showConditionSubGroupPreviewHandler: function showConditionSubGroupPreviewHandler() {
+          _showConditionSubGroupPreviewHandler(conditionIndex);
+        },
+        hideConditionSubGroupPreviewHandler: hideConditionSubGroupPreviewHandler,
+        showConditionPreviewHandler: function showConditionPreviewHandler() {
+          _showConditionPreviewHandler(conditionIndex);
+        },
+        hideConditionPreviewHandler: hideConditionPreviewHandler,
+        isLastCondition: isLastCondition
+      }), conditionIndex == showConditionSubGroupPreview && (_ConditionPreview || (_ConditionPreview = /*#__PURE__*/React__default["default"].createElement(ConditionPreview["default"], {
+        previewType: "subGroup"
+      }))), conditionIndex == showConditionPreview && (_ConditionPreview2 || (_ConditionPreview2 = /*#__PURE__*/React__default["default"].createElement(ConditionPreview["default"], {
+        previewType: "condition"
+      }))));
     }));
-  })));
+  };
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, variant == 'tree' && getTreeVariant(), variant == 'sentence' && getSentenceVariant());
 };
 var ConditionGroupBuilder$1 = ConditionGroupBuilder;
 ConditionGroupBuilder.propTypes = {
@@ -138,19 +269,19 @@ ConditionGroupBuilder.propTypes = {
    */
   aria: index["default"].object,
   /**
-   * Provide an  class to be applied to the containing node.
+   * state defines the current group
+   */
+  /**
+   * Provide an optional class to be applied to the containing node.
    */
   className: index["default"].string,
   /**
+  className: PropTypes.string,
    * ref of condition builder
    */
   conditionBuilderRef: index["default"].object,
-  /**
-   * group defines the current group
-   */
   group: index["default"].object,
   /**
-  
    * callback to update the current condition of the state tree
    */
   onChange: index["default"].func,

package/lib/components/ConditionBuilder/ConditionPreview/ConditionPreview.d.ts

@@ -0,0 +1,10 @@
+export default ConditionPreview;
+declare function ConditionPreview({ previewType }: {
+    previewType: any;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace ConditionPreview {
+    namespace propTypes {
+        let previewType: PropTypes.Requireable<string>;
+    }
+}
+import PropTypes from 'prop-types';

package/lib/components/ConditionBuilder/ConditionPreview/ConditionPreview.js

@@ -0,0 +1,77 @@
+/**
+ * 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 React = require('react');
+var index = require('../../../node_modules/prop-types/index.js');
+var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
+var ConditionBuilderItem = require('../ConditionBuilderItem/ConditionBuilderItem.js');
+var ConditionConnector = require('../ConditionBuilderConnector/ConditionConnector.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ConditionPreview = function ConditionPreview(_ref) {
+  var previewType = _ref.previewType;
+  var getConditionSection = function getConditionSection() {
+    return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
+      label: DataConfigs.translateWithId('property')
+    }), /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
+      label: DataConfigs.translateWithId('operator')
+    }), /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
+      label: DataConfigs.translateWithId('value')
+    }));
+  };
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, previewType == 'newGroup' && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(DataConfigs.blockClass, "__group__row ").concat(DataConfigs.blockClass, "__group-preview  ")
+  }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
+    className: "".concat(DataConfigs.blockClass, "__statement-button"),
+    label: DataConfigs.translateWithId('and')
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    "aria-hidden": true,
+    className: "".concat(DataConfigs.blockClass, "__group ").concat(DataConfigs.blockClass, "__condition-wrapper ").concat(DataConfigs.blockClass, "__group-preview ").concat(DataConfigs.blockClass, "__group-wrapper")
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(DataConfigs.blockClass, "__gap")
+  }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
+    className: "".concat(DataConfigs.blockClass, "__statement-button"),
+    label: DataConfigs.translateWithId('if')
+  })), getConditionSection())), previewType == 'subGroup' && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(DataConfigs.blockClass, "__group-preview")
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(DataConfigs.blockClass, "__condition-block  ").concat(DataConfigs.blockClass, "__gap")
+  }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
+    label: DataConfigs.translateWithId('and'),
+    className: "".concat(DataConfigs.blockClass, "__statement-button"),
+    popOverClassName: "".concat(DataConfigs.blockClass, "__gap")
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(DataConfigs.blockClass, "__group ").concat(DataConfigs.blockClass, "__condition-wrapper")
+  }, /*#__PURE__*/React__default["default"].createElement(ConditionConnector["default"], {
+    className: "".concat(DataConfigs.blockClass, "__gap ").concat(DataConfigs.blockClass, "__groupConnector"),
+    operator: DataConfigs.translateWithId('if')
+  }), getConditionSection()))), previewType == 'condition' && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(DataConfigs.blockClass, "__group-preview")
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(DataConfigs.blockClass, "__condition-block  ").concat(DataConfigs.blockClass, "__gap")
+  }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
+    label: DataConfigs.translateWithId('and'),
+    className: "".concat(DataConfigs.blockClass, "__statement-button"),
+    popOverClassName: "".concat(DataConfigs.blockClass, "__gap")
+  }), getConditionSection())));
+};
+var ConditionPreview$1 = ConditionPreview;
+ConditionPreview.propTypes = {
+  /**
+   * type of review to be displayed
+   */
+  previewType: index["default"].oneOf(['condition', 'subGroup', 'newGroup'])
+};
+
+exports["default"] = ConditionPreview$1;

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

@@ -2,3 +2,4 @@ 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 checkForHoldingKey(evt: any, key: any): any;

package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -194,7 +194,7 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
       headerProps = _rollupPluginBabelHelpers["extends"]({}, (_rollupPluginBabelHelpers.objectDestructuringEmpty(_header$getHeaderProp), _header$getHeaderProp));
     var resizerProps = header === null || header === void 0 || (_header$getResizerPro = header.getResizerProps) === null || _header$getResizerPro === void 0 ? void 0 : _header$getResizerPro.call(header);
     return /*#__PURE__*/React__default["default"].createElement(react.TableHeader, _rollupPluginBabelHelpers["extends"]({}, headerProps, {
-      className: cx__default["default"](header === null || header === void 0 ? void 0 : header.className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__resizableColumn"), resizerProps), "".concat(blockClass, "__isResizing"), header === null || header === void 0 ? void 0 : header.isResizing), "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable && header.id !== 'spacer'), "".concat(blockClass, "__isSorted"), header === null || header === void 0 ? void 0 : header.isSorted), "".concat(blockClass, "__header-actions-column"), header === null || header === void 0 ? void 0 : header.isAction), "".concat(blockClass, "__with-slug"), header.slug && /*#__PURE__*/React__default["default"].isValidElement(header === null || header === void 0 ? void 0 : header.slug))),
+      className: cx__default["default"](header === null || header === void 0 ? void 0 : header.className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__resizableColumn"), resizerProps), "".concat(blockClass, "__isResizing"), header === null || header === void 0 ? void 0 : header.isResizing), "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable && header.id !== 'spacer'), "".concat(blockClass, "__isSorted"), header === null || header === void 0 ? void 0 : header.isSorted), "".concat(blockClass, "__header-actions-column"), header === null || header === void 0 ? void 0 : header.isAction), "".concat(blockClass, "__with-slug"), header.slug && /*#__PURE__*/React__default["default"].isValidElement(header === null || header === void 0 ? void 0 : header.slug)), headerProps.className),
       key: header.id,
       "aria-hidden": header.id === 'spacer' && 'true'
     }, getAccessibilityProps(header)), header.render('Header'), renderSlug(header.slug), resizerProps && !header.isAction && /*#__PURE__*/React__default["default"].createElement(ResizeHeader, {

package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilterContext.d.ts

@@ -1,2 +1,8 @@
+/**
+ * Copyright IBM Corp. 2023, 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.
+ */
+declare const useFilterContext: () => any;
 export default useFilterContext;
-declare function useFilterContext(): any;

package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js

@@ -454,7 +454,7 @@ var InlineEditCell = function InlineEditCell(_ref) {
       "data-inline-type": type,
       onClick: !nonEditCell ? handleInlineCellClick : addActiveState,
       onKeyDown: !nonEditCell ? handleKeyDown : null,
-      className: cx__default["default"]("".concat(blockClass, "__inline-edit--outer-cell-button"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__inline-edit--outer-cell-button--").concat(rowSize), rowSize), "".concat(blockClass, "__inline-edit--outer-cell-button--lg"), !rowSize), "".concat(blockClass, "__inline-edit--outer-cell-button--invalid"), config === null || config === void 0 || (_config$validator = config.validator) === null || _config$validator === void 0 ? void 0 : _config$validator.call(config, cellValue)), "".concat(blockClass, "__static--outer-cell"), !disabledCell))
+      className: cx__default["default"]("".concat(blockClass, "__inline-edit--outer-cell-button"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__inline-edit--outer-cell-button--").concat(rowSize), rowSize), "".concat(blockClass, "__inline-edit--outer-cell-button--lg"), !rowSize), "".concat(blockClass, "__inline-edit--outer-cell-button--invalid"), inEditMode && (config === null || config === void 0 || (_config$validator = config.validator) === null || _config$validator === void 0 ? void 0 : _config$validator.call(config, cellValue))), "".concat(blockClass, "__static--outer-cell"), !disabledCell))
     }, !nonEditCell && !disabledCell && renderRegularCell(), (!inEditMode || disabledCell) && /*#__PURE__*/React__default["default"].createElement(InlineEditButton.InlineEditButton, {
       isActiveCell: cellId === activeCellId,
       renderIcon: setRenderIcon(),

package/lib/components/Datagrid/types/index.d.ts

@@ -192,6 +192,7 @@ export interface DataGridState<T extends object = any> extends TableCommonProps,
     onVirtualScroll?: (evt?: boolean) => void;
     fetchMoreData?: () => void;
     loadMoreThreshold?: number;
+    onSort?: boolean;
 }
 export interface ResizeHeaderProps {
     resizerProps?: ResizerProps;

package/lib/components/Datagrid/useSortableColumns.d.ts

@@ -1,6 +1,13 @@
-export function getNewSortOrder(sortOrder: any): {
-    newSortDesc: undefined;
+/**
+ * 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 { Hooks } from 'react-table';
+export declare const getNewSortOrder: (sortOrder?: boolean | string) => {
+    newSortDesc: boolean;
     newOrder: string;
 };
+declare const useSortableColumns: (hooks: Hooks) => void;
 export default useSortableColumns;
-declare function useSortableColumns(hooks: any): void;

package/lib/components/Datagrid/useSortableColumns.js

@@ -31,7 +31,7 @@ var ordering = {
 };
 var getNewSortOrder = function getNewSortOrder(sortOrder) {
   var order = {
-    newSortDesc: undefined,
+    newSortDesc: false,
     newOrder: ordering.NONE
   };
   if (sortOrder === false || sortOrder === ordering.DESC) {
@@ -146,7 +146,8 @@ var useSortableColumns = function useSortableColumns(hooks) {
     return (_instance$customizeCo = instance.customizeColumnsProps) !== null && _instance$customizeCo !== void 0 && _instance$customizeCo.isTearsheetOpen ? visibleColumns : _rollupPluginBabelHelpers.toConsumableArray(sortableColumns);
   };
   var sortInstanceProps = function sortInstanceProps(instance) {
-    var onSort = instance.onSort;
+    var _ref3 = instance,
+      onSort = _ref3.onSort;
     Object.assign(instance, {
       manualSortBy: !!onSort,
       isTableSortable: true

package/lib/components/InterstitialScreenView/InterstitialScreenView.d.ts

@@ -20,7 +20,7 @@ interface InterstitialScreenViewProps extends PropsWithChildren {
     stepTitle: string;
 }
 /**
- * A Novice to Pro component intended to be used as the child elements of the InterstitialScreen component.
+ * An Onboarding component intended to be used as the child elements of the InterstitialScreen component.
  */
 export declare let InterstitialScreenView: React.ForwardRefExoticComponent<InterstitialScreenViewProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/lib/components/InterstitialScreenView/InterstitialScreenView.js

@@ -30,7 +30,7 @@ var _excluded = ["children", "className", "stepTitle"];
 var blockClass = "".concat(settings.pkg.prefix, "--interstitial-screen-view");
 var componentName = 'InterstitialScreenView';
 /**
- * A Novice to Pro component intended to be used as the child elements of the InterstitialScreen component.
+ * An Onboarding component intended to be used as the child elements of the InterstitialScreen component.
  */
 exports.InterstitialScreenView = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var children = _ref.children,

package/lib/components/SidePanel/SidePanel.d.ts

@@ -11,7 +11,7 @@ type SidePanelBaseProps = {
     /**
      * Sets the action toolbar buttons
      */
-    actionToolbarButtons?: ButtonProps[];
+    actionToolbarButtons?: ButtonProps<any>[];
     /**
      * The primary actions to be shown in the side panel. Each action is
      * specified as an object that will render expressive Buttons. Any Button
@@ -20,7 +20,7 @@ type SidePanelBaseProps = {
      *
      * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
      */
-    actions?: ButtonProps[];
+    actions?: ButtonProps<any>[];
     /**
      * Determines if the title will animate on scroll
      */

package/lib/components/SidePanel/SidePanel.js

@@ -332,12 +332,12 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
           if (primeFocusEl) {
             primeFocusEl === null || primeFocusEl === void 0 || primeFocusEl.focus();
           }
-        } else {
+        } else if (!slideIn) {
           firstElement === null || firstElement === void 0 || firstElement.focus();
         }
       }, 0);
     }
-  }, [animationComplete, firstElement, open, selectorPrimaryFocus]);
+  }, [animationComplete, firstElement, open, selectorPrimaryFocus, slideIn]);
   var primaryActionContainerClassNames = cx__default["default"](["".concat(blockClass, "__actions-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__actions-container--condensed"), condensedActions)]);
   var mainPanelClassNames = cx__default["default"]([blockClass, className, "".concat(blockClass), "".concat(blockClass, "--").concat(size), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--right-placement"), placement === 'right'), "".concat(blockClass, "--left-placement"), placement === 'left'), "".concat(blockClass, "--slide-in"), slideIn), "".concat(blockClass, "--has-slug"), slug), "".concat(blockClass, "--condensed-actions"), condensedActions), "".concat(blockClass, "--has-overlay"), includeOverlay)]);
   var renderTitle = function renderTitle() {
@@ -385,20 +385,20 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
       ref: labelTextRef
     }, labelText), title && title.length && renderTitle(), /*#__PURE__*/React__default["default"].createElement("div", {
       className: "".concat(blockClass, "__slug-and-close")
-    }, normalizedSlug, /*#__PURE__*/React__default["default"].createElement(react.Button, {
-      "aria-label": closeIconDescription,
-      kind: "ghost",
-      size: slugCloseSize,
-      renderIcon: function renderIcon(props) {
-        return /*#__PURE__*/React__default["default"].createElement(icons.Close, _rollupPluginBabelHelpers["extends"]({
-          size: 20
-        }, props));
-      },
-      iconDescription: closeIconDescription,
+    }, normalizedSlug, /*#__PURE__*/React__default["default"].createElement(react.IconButton, {
       className: "".concat(blockClass, "__close-button"),
+      label: closeIconDescription,
       onClick: onRequestClose,
-      ref: closeRef
-    })), subtitle && /*#__PURE__*/React__default["default"].createElement("p", {
+      title: closeIconDescription,
+      "aria-label": closeIconDescription,
+      ref: closeRef,
+      align: "left"
+    }, /*#__PURE__*/React__default["default"].createElement(icons.Close, {
+      size: 20,
+      "aria-hidden": "true",
+      tabIndex: "-1",
+      className: "".concat(blockClass, "--btn__icon")
+    }))), subtitle && /*#__PURE__*/React__default["default"].createElement("p", {
       className: cx__default["default"]("".concat(blockClass, "__subtitle-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__subtitle-text-no-animation-no-action-toolbar"), !doAnimateTitle && (!actionToolbarButtons || !actionToolbarButtons.length))),
       ref: subtitleRef
     }, subtitle), actionToolbarButtons && actionToolbarButtons.length && /*#__PURE__*/React__default["default"].createElement("div", {
@@ -457,7 +457,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
       placement: placement,
       shouldReduceMotion: shouldReduceMotion
     },
-    onKeyDown: keyDownListener
+    onKeyDown: slideIn ? undefined : keyDownListener
   }), /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, renderHeader(), renderMain()), /*#__PURE__*/React__default["default"].createElement(MotionActionSet, {
     actions: actions !== null && actions !== void 0 ? actions : [],
     className: primaryActionContainerClassNames,
@@ -480,6 +480,7 @@ exports.SidePanel.propTypes = {
   /**
    * Sets the action toolbar buttons
    */
+  /**@ts-ignore */
   actionToolbarButtons: index["default"].arrayOf(index["default"].shape({
     label: index["default"].string,
     leading: index["default"].bool,
@@ -513,6 +514,7 @@ exports.SidePanel.propTypes = {
     label: index["default"].string,
     loading: index["default"].bool,
     // we duplicate this Button prop to improve the DocGen here
+    /**@ts-ignore */
     onClick: react.Button.propTypes.onClick
   })))]),
   /**

package/lib/components/SteppedAnimatedMedia/SteppedAnimatedMedia.d.ts

@@ -20,7 +20,7 @@ interface SteppedAnimatedMediaProps {
     playStep?: number;
 }
 /**
- * The SteppedAnimatedMedia is a Novice to Pro internal component and is not intended for general use.
+ * The SteppedAnimatedMedia is an Onboarding internal component and is not intended for general use.
  */
 export declare const SteppedAnimatedMedia: React.ForwardRefExoticComponent<SteppedAnimatedMediaProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/lib/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js

@@ -38,7 +38,7 @@ var defaults = {
   playStep: 0
 };
 /**
- * The SteppedAnimatedMedia is a Novice to Pro internal component and is not intended for general use.
+ * The SteppedAnimatedMedia is an Onboarding internal component and is not intended for general use.
  */
 var SteppedAnimatedMedia = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var className = _ref.className,