@carbon/ibm-products 2.42.1-canary.2 → 2.42.1-canary.22

package/es/components/Datagrid/useSelectRows.js

@@ -108,7 +108,8 @@ var SelectRow = function SelectRow(datagridState) {
       dispatch: dispatch,
       rowData: row,
       isChecked: event.target.checked,
-      getRowId: getRowId
+      getRowId: getRowId,
+      selectAll: null
     });
   };
   var selectDisabled = isFetching || row.getRowProps().disabled;
@@ -128,7 +129,7 @@ var SelectRow = function SelectRow(datagridState) {
     onSelect: onSelectHandler,
     id: rowId,
     name: "".concat(rowId, "-name"),
-    className: cx([checkboxClass, cellProps.className, _defineProperty({}, "".concat(checkboxClass, "-sticky-left"), isFirstColumnStickyLeft && windowSize > 671)]),
+    className: cx([checkboxClass, cellProps.className, _defineProperty({}, "".concat(checkboxClass, "-sticky-left"), isFirstColumnStickyLeft && Number(windowSize) > 671)]),
     ariaLabel: title,
     disabled: selectDisabled
   }));

package/es/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/es/components/Datagrid/useSortableColumns.js

@@ -22,7 +22,7 @@ var ordering = {
 };
 var getNewSortOrder = function getNewSortOrder(sortOrder) {
   var order = {
-    newSortDesc: undefined,
+    newSortDesc: false,
     newOrder: ordering.NONE
   };
   if (sortOrder === false || sortOrder === ordering.DESC) {
@@ -137,7 +137,8 @@ var useSortableColumns = function useSortableColumns(hooks) {
     return (_instance$customizeCo = instance.customizeColumnsProps) !== null && _instance$customizeCo !== void 0 && _instance$customizeCo.isTearsheetOpen ? visibleColumns : _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/es/components/Datagrid/utils/getAutoSizedColumnWidth.d.ts

@@ -1 +1,8 @@
-export function getAutoSizedColumnWidth(rows: Array<object>, accessor: string, headerText: string): number;
+/**
+ * Copyright IBM Corp. 2023, 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 { Row } from 'react-table';
+export declare const getAutoSizedColumnWidth: (rows: Array<Row<object>>, accessor: string, headerText: string) => number;

package/es/components/Datagrid/utils/getAutoSizedColumnWidth.js

@@ -14,13 +14,6 @@ import { toConsumableArray as _toConsumableArray } from '../../../_virtual/_roll
  * LICENSE file in the root directory of this source tree.
  */
 
-/**
- * Calculates the auto sized width of a column
- * @param {Array<object>} rows - The datagrid rows
- * @param {string} accessor - The accessor for the column
- * @param {string} headerText - The header text for the column
- */
-
 var getAutoSizedColumnWidth = function getAutoSizedColumnWidth(rows, accessor, headerText) {
   var maxWidth = 400;
   var minWidth = 58;

package/es/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/es/components/InterstitialScreenView/InterstitialScreenView.js

@@ -21,7 +21,7 @@ var _excluded = ["children", "className", "stepTitle"];
 var blockClass = "".concat(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.
  */
 var InterstitialScreenView = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var children = _ref.children,

package/es/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/es/components/SidePanel/SidePanel.js

@@ -323,12 +323,12 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
           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(["".concat(blockClass, "__actions-container"), _defineProperty({}, "".concat(blockClass, "__actions-container--condensed"), condensedActions)]);
   var mainPanelClassNames = cx([blockClass, className, "".concat(blockClass), "".concat(blockClass, "--").concat(size), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_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() {
@@ -448,7 +448,7 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       placement: placement,
       shouldReduceMotion: shouldReduceMotion
     },
-    onKeyDown: keyDownListener
+    onKeyDown: slideIn ? undefined : keyDownListener
   }), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, renderHeader(), renderMain()), /*#__PURE__*/React__default.createElement(MotionActionSet, {
     actions: actions !== null && actions !== void 0 ? actions : [],
     className: primaryActionContainerClassNames,
@@ -471,6 +471,7 @@ SidePanel.propTypes = {
   /**
    * Sets the action toolbar buttons
    */
+  /**@ts-ignore */
   actionToolbarButtons: PropTypes.arrayOf(PropTypes.shape({
     label: PropTypes.string,
     leading: PropTypes.bool,
@@ -504,6 +505,7 @@ SidePanel.propTypes = {
     label: PropTypes.string,
     loading: PropTypes.bool,
     // we duplicate this Button prop to improve the DocGen here
+    /**@ts-ignore */
     onClick: Button.propTypes.onClick
   })))]),
   /**

package/es/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/es/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js

@@ -27,7 +27,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.forwardRef(function (_ref, ref) {
   var className = _ref.className,

package/es/feature-flags.js

@@ -0,0 +1,18 @@
+/**
+ * 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 * as FeatureFlags from '@carbon/feature-flags';
+
+FeatureFlags.merge({
+  'default-portal-target-body': true,
+  'enable-datagrid-useInlineEdit': false,
+  'enable-datagrid-useEditableCell': false,
+  'enable-datagrid-useCustomizeColumns': false,
+  'ExampleComponent.secondaryIcon': false,
+  'ExampleComponent.useExample': false,
+  'enable-example-flag': false
+});

package/es/global/js/package-settings.js

@@ -98,7 +98,7 @@ var defaults = {
     GetStartedCard: false,
     /* new component flags here - comment used by generate CLI */
 
-    // Novice to pro components not yet reviewed and released:
+    // Onboarding components not yet reviewed and released:
     Coachmark: false,
     CoachmarkBeacon: false,
     CoachmarkButton: false,
@@ -118,7 +118,7 @@ var defaults = {
     UserAvatar: false,
     /* new component flags here - comment used by generate CLI */
 
-    // Novice to pro components not yet reviewed and released:
+    // Onboarding components not yet reviewed and released:
     EmptyStateV2: false,
     Guidebanner: false,
     GuidebannerElement: false,

package/es/index.d.ts

@@ -4,6 +4,7 @@
  * 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 './feature-flags';
 export { pkg } from './settings';
 export { usePrefix } from './global/js/hooks';
 export * from './components';

package/es/index.js

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import './feature-flags.js';
 export { pkg } from './settings.js';
 export { useColumnOrder } from 'react-table';
 export { usePrefix } from './global/js/hooks/usePrefix.js';

package/lib/components/Carousel/Carousel.d.ts

@@ -47,7 +47,7 @@ export interface CarouselProps {
     [key: string]: any;
 }
 /**
- * The Carousel acts as a scaffold for other Novice to Pro content.
+ * The Carousel acts as a scaffold for other Onboarding content.
  *
  * This component is not intended for general use.
  *

package/lib/components/Carousel/Carousel.js

@@ -35,7 +35,7 @@ var defaults = {
 };
 
 /**
- * The Carousel acts as a scaffold for other Novice to Pro content.
+ * The Carousel acts as a scaffold for other Onboarding content.
  *
  * This component is not intended for general use.
  *

package/lib/components/Coachmark/CoachmarkDragbar.d.ts

@@ -38,7 +38,7 @@ interface CoachmarkDragbarProps {
 }
 /**
  * DO NOT USE. This component is for the exclusive use
- * of other Novice to Pro components.
+ * of other Onboarding components.
  */
 export declare let CoachmarkDragbar: React.ForwardRefExoticComponent<Omit<CoachmarkDragbarProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export {};

package/lib/components/Coachmark/CoachmarkDragbar.js

@@ -42,7 +42,7 @@ var defaults = {
 };
 /**
  * DO NOT USE. This component is for the exclusive use
- * of other Novice to Pro components.
+ * of other Onboarding components.
  */
 exports.CoachmarkDragbar = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var a11yKeyboardHandler = _ref.a11yKeyboardHandler,

package/lib/components/Coachmark/CoachmarkHeader.d.ts

@@ -25,7 +25,7 @@ interface CoachmarkHeaderProps {
 }
 /**
  * DO NOT USE. This component is for the exclusive use
- * of other Novice to Pro components.
+ * of other Onboarding components.
  */
 export declare let CoachmarkHeader: React.ForwardRefExoticComponent<CoachmarkHeaderProps & React.RefAttributes<HTMLElement>>;
 export {};

package/lib/components/Coachmark/CoachmarkHeader.js

@@ -37,7 +37,7 @@ var defaults = {
 };
 /**
  * DO NOT USE. This component is for the exclusive use
- * of other Novice to Pro components.
+ * of other Onboarding components.
  */
 exports.CoachmarkHeader = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var _ref$closeIconDescrip = _ref.closeIconDescription,

package/lib/components/Coachmark/CoachmarkOverlay.d.ts

@@ -40,7 +40,7 @@ interface CoachmarkOverlayProps {
 }
 /**
  * DO NOT USE. This component is for the exclusive use
- * of other Novice to Pro components.
+ * of other Onboarding components.
  */
 export declare let CoachmarkOverlay: React.ForwardRefExoticComponent<Omit<CoachmarkOverlayProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export {};

package/lib/components/Coachmark/CoachmarkOverlay.js

@@ -41,7 +41,7 @@ var defaults = {
 };
 /**
  * DO NOT USE. This component is for the exclusive use
- * of other Novice to Pro components.
+ * of other Onboarding components.
  */
 exports.CoachmarkOverlay = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,

package/lib/components/Coachmark/CoachmarkTagline.d.ts

@@ -25,7 +25,7 @@ interface CoachmarkTaglineProps {
 }
 /**
  * DO NOT USE. This component is for the exclusive use
- * of other Novice to Pro components.
+ * of other Onboarding components.
  */
 export declare let CoachmarkTagline: React.ForwardRefExoticComponent<CoachmarkTaglineProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/lib/components/Coachmark/CoachmarkTagline.js

@@ -37,7 +37,7 @@ var defaults = {
 };
 /**
  * DO NOT USE. This component is for the exclusive use
- * of other Novice to Pro components.
+ * of other Onboarding components.
  */
 exports.CoachmarkTagline = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var _ref$closeIconDescrip = _ref.closeIconDescription,

package/lib/components/CoachmarkStack/CoachmarkStackHome.d.ts

@@ -1,6 +1,6 @@
 /**
  * DO NOT USE. This component is for the exclusive use
- * of other Novice to Pro components.
+ * of other Onboarding components.
  */
 export let CoachmarkStackHome: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';

package/lib/components/CoachmarkStack/CoachmarkStackHome.js

@@ -39,7 +39,7 @@ var componentName = 'CoachmarkStackHome';
 
 /**
  * DO NOT USE. This component is for the exclusive use
- * of other Novice to Pro components.
+ * of other Onboarding components.
  */
 exports.CoachmarkStackHome = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _document$querySelect;
@@ -67,7 +67,7 @@ exports.CoachmarkStackHome = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     }, 100);
   }, [isOpen]);
   if (!navLinkLabels) {
-    return pconsole["default"].warn("".concat(componentName, " is a Novice to Pro internal component and is not intended for general use."));
+    return pconsole["default"].warn("".concat(componentName, " is an Onboarding internal component and is not intended for general use."));
   }
   var portalNode = portalTarget ? (_document$querySelect = document.querySelector(portalTarget)) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector('body') : document.querySelector('body');
   return /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {

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

@@ -6,17 +6,23 @@ declare function ConditionBlock(props: any): import("react/jsx-runtime").JSX.Ele
 declare namespace ConditionBlock {
     namespace propTypes {
         let addConditionHandler: PropTypes.Requireable<(...args: any[]) => any>;
+        let addConditionSubGroupHandler: PropTypes.Requireable<(...args: any[]) => any>;
         let aria: PropTypes.Requireable<object>;
         let condition: PropTypes.Requireable<object>;
         let conditionIndex: PropTypes.Requireable<number>;
         let conjunction: PropTypes.Requireable<string>;
         let group: PropTypes.Requireable<object>;
+        let hideConditionPreviewHandler: PropTypes.Requireable<(...args: any[]) => any>;
+        let hideConditionSubGroupPreviewHandler: PropTypes.Requireable<(...args: any[]) => any>;
         let isLastCondition: PropTypes.Requireable<(...args: any[]) => any>;
         let isStatement: PropTypes.Requireable<boolean>;
         let onChange: PropTypes.Requireable<(...args: any[]) => any>;
         let onConnectorOperatorChange: PropTypes.Requireable<(...args: any[]) => any>;
         let onRemove: PropTypes.Requireable<(...args: any[]) => any>;
         let onStatementChange: PropTypes.Requireable<(...args: any[]) => any>;
+        let showConditionPreviewHandler: PropTypes.Requireable<(...args: any[]) => any>;
+        let showConditionSubGroupPreviewHandler: PropTypes.Requireable<(...args: any[]) => any>;
+        let state: PropTypes.Requireable<object>;
     }
 }
 import PropTypes from 'prop-types';

package/lib/components/ConditionBuilder/ConditionBlock/ConditionBlock.js

@@ -17,7 +17,7 @@ var index = require('../../../node_modules/prop-types/index.js');
 var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
 var ConditionBuilderItemOption = require('../ConditionBuilderItem/ConditionBuilderItemOption/ConditionBuilderItemOption.js');
 var cx = require('classnames');
-var ConditionConnector = require('../ConditionConnector/ConditionConnector.js');
+var ConditionConnector = require('../ConditionBuilderConnector/ConditionConnector.js');
 var ConditionBuilderItemNumber = require('../ConditionBuilderItem/ConditionBuilderItemNumber/ConditionBuilderItemNumber.js');
 var ConditionBuilderItemText = require('../ConditionBuilderItem/ConditionBuilderItemText/ConditionBuilderItemText.js');
 var ConditionBuilderItemDate = require('../ConditionBuilderItem/ConditionBuilderItemDate/ConditionBuilderItemDate.js');
@@ -32,6 +32,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
+var _div;
 /**
  * This component build each block of condition consisting of property, operator value and close button.
  */
@@ -49,11 +50,19 @@ var ConditionBlock = function ConditionBlock(props) {
     isStatement = props.isStatement,
     group = props.group,
     onStatementChange = props.onStatementChange,
-    addConditionHandler = props.addConditionHandler,
     conditionIndex = props.conditionIndex,
+    addConditionHandler = props.addConditionHandler,
+    _addConditionSubGroupHandler = props.addConditionSubGroupHandler,
+    aria = props.aria,
+    hideConditionSubGroupPreviewHandler = props.hideConditionSubGroupPreviewHandler,
+    showConditionSubGroupPreviewHandler = props.showConditionSubGroupPreviewHandler,
+    hideConditionPreviewHandler = props.hideConditionPreviewHandler,
+    showConditionPreviewHandler = props.showConditionPreviewHandler,
     isLastCondition = props.isLastCondition;
   var _useContext = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
-    inputConfig = _useContext.inputConfig;
+    inputConfig = _useContext.inputConfig,
+    variant = _useContext.variant;
+  //Below possible input types expected for value field.
   var itemComponents = {
     option: ConditionBuilderItemOption.ConditionBuilderItemOption,
     text: ConditionBuilderItemText.ConditionBuilderItemText,
@@ -78,14 +87,17 @@ var ConditionBlock = function ConditionBlock(props) {
     type = _getCurrentConfig.type,
     config = _getCurrentConfig.config,
     label = _getCurrentConfig.label;
-  var ItemComponent = property ? itemComponents[type] : null;
+  var ItemComponent;
+  //   if (type == 'custom') {
+  //     ItemComponent = config.component;
+  //   } else {
+  ItemComponent = property ? itemComponents[type] : null;
+  //}
+
   var onStatementChangeHandler = function onStatementChangeHandler(v, evt) {
     util.focusThisField(evt);
     onStatementChange(v);
   };
-  var onConnectorOperatorChangeHandler = function onConnectorOperatorChangeHandler(op) {
-    onConnectorOperatorChange(op);
-  };
   var onPropertyChangeHandler = function onPropertyChangeHandler(newProperty) {
     onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, condition), {}, {
       property: newProperty,
@@ -118,21 +130,32 @@ var ConditionBlock = function ConditionBlock(props) {
       return operator.type.indexOf(type) != -1 || operator.type == 'all';
     });
   };
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: cx__default["default"]("".concat(DataConfigs.blockClass, "__condition-block conditionBlockWrapper ").concat(DataConfigs.blockClass, "__gap ").concat(DataConfigs.blockClass, "__gap-bottom"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__condition__deletion-preview"), showDeletionPreview)),
-    key: conditionIndex,
+  var getAriaAttributes = function getAriaAttributes() {
+    return variant == 'tree' ? {
+      'aria-level': aria.level,
+      'aria-posinset': aria.posinset,
+      'aria-setsize': aria.setsize
+    } : {};
+  };
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: cx__default["default"]("".concat(DataConfigs.blockClass, "__condition-block"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__condition__deletion-preview"), showDeletionPreview), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__gap-bottom"), variant == 'tree' && !(conditionIndex + 1 >= group.conditions.length)), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__gap ").concat(DataConfigs.blockClass, "__gap-bottom"), variant == 'sentence')),
     role: "row",
     "aria-label": DataConfigs.translateWithId('condition_row'),
     tabIndex: -1
-  }, isStatement && /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem
-  //   open={false}
-  , {
+  }, getAriaAttributes()), conjunction ? /*#__PURE__*/React__default["default"].createElement(ConditionConnector["default"], {
+    className: "".concat(DataConfigs.blockClass, "__gap"),
+    operator: conjunction,
+    onChange: function onChange(op) {
+      return onConnectorOperatorChange(op);
+    }
+  }) : _div || (_div = /*#__PURE__*/React__default["default"].createElement("div", {
+    role: "gridcell"
+  })), isStatement && /*#__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"),
-    tabIndex: 0
+    className: "".concat(DataConfigs.blockClass, "__statement-button")
   }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItemOption.ConditionBuilderItemOption, {
     conditionState: {
       value: group.statement,
@@ -142,11 +165,7 @@ var ConditionBlock = function ConditionBlock(props) {
     config: {
       options: DataConfigs.statementConfig
     }
-  })), conjunction && /*#__PURE__*/React__default["default"].createElement(ConditionConnector["default"], {
-    className: "".concat(DataConfigs.blockClass, "__gap"),
-    operator: conjunction,
-    onChange: onConnectorOperatorChangeHandler
-  }), /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
+  })), /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
     label: label,
     title: DataConfigs.translateWithId('property'),
     renderIcon: icon !== null && icon !== void 0 ? icon : null,
@@ -193,7 +212,8 @@ var ConditionBlock = function ConditionBlock(props) {
       value: value
     },
     onChange: onValueChangeHandler,
-    config: config
+    config: config,
+    "data-name": "valueField"
   })), /*#__PURE__*/React__default["default"].createElement("span", {
     role: "gridcell",
     "aria-label": DataConfigs.translateWithId('remove_condition')
@@ -211,9 +231,15 @@ var ConditionBlock = function ConditionBlock(props) {
   })), isLastCondition(conditionIndex, group.conditions) && /*#__PURE__*/React__default["default"].createElement(ConditionBuilderAdd["default"], {
     onClick: function onClick() {
       addConditionHandler(conditionIndex);
-    }
-    //addConditionSubGroupHandler={()=>{addConditionSubGroupHandler(conditionIndex)}}
-    ,
+    },
+    addConditionSubGroupHandler: function addConditionSubGroupHandler() {
+      _addConditionSubGroupHandler(conditionIndex);
+    },
+    showConditionSubGroupPreviewHandler: showConditionSubGroupPreviewHandler,
+    hideConditionSubGroupPreviewHandler: hideConditionSubGroupPreviewHandler,
+    enableSubGroup: variant == 'tree',
+    showConditionPreviewHandler: showConditionPreviewHandler,
+    hideConditionPreviewHandler: hideConditionPreviewHandler,
     className: "".concat(DataConfigs.blockClass, "__gap ").concat(DataConfigs.blockClass, "__gap-left")
   }));
 };
@@ -224,16 +250,14 @@ ConditionBlock.propTypes = {
    */
   addConditionHandler: index["default"].func,
   /**
-   * object hold aria attributes
+   * callback to add a new condition subgroup
    */
-  aria: index["default"].object,
+  addConditionSubGroupHandler: index["default"].func,
   /**
-   * object that hold the current condition
+   * object hold aria attributes
    */
+  aria: index["default"].object,
   condition: index["default"].object,
-  /**
-   * index of the current condition
-   */
   conditionIndex: index["default"].number,
   /**
    * string that decides to show the condition connector
@@ -244,8 +268,13 @@ ConditionBlock.propTypes = {
    */
   group: index["default"].object,
   /**
-   * callback to add a new condition
+   * handler for hiding sub group preview
+   */
+  hideConditionPreviewHandler: index["default"].func,
+  /**
+   * handler for hiding sub group preview
    */
+  hideConditionSubGroupPreviewHandler: index["default"].func,
   isLastCondition: index["default"].func,
   /**
    *  boolean that decides to show the statement(if/ excl.if)
@@ -266,7 +295,19 @@ ConditionBlock.propTypes = {
   /**
    * callback to handle the statement(if/ excl.if) change
    */
-  onStatementChange: index["default"].func
+  onStatementChange: index["default"].func,
+  /**
+   * handler for showing add condition preview
+   */
+  showConditionPreviewHandler: index["default"].func,
+  /**
+   * handler for showing sub group preview
+   */
+  showConditionSubGroupPreviewHandler: index["default"].func,
+  /**
+   * object that hold the current condition
+   */
+  state: index["default"].object
 };
 
 exports["default"] = ConditionBlock$1;

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

@@ -1,12 +1,26 @@
 export default ConditionBuilderAdd;
-declare function ConditionBuilderAdd({ className, onClick }: {
+declare function ConditionBuilderAdd({ className, onClick, addConditionSubGroupHandler, showConditionSubGroupPreviewHandler, hideConditionSubGroupPreviewHandler, showConditionPreviewHandler, hideConditionPreviewHandler, enableSubGroup, buttonLabel, }: {
     className: any;
     onClick: any;
+    addConditionSubGroupHandler: any;
+    showConditionSubGroupPreviewHandler: any;
+    hideConditionSubGroupPreviewHandler: any;
+    showConditionPreviewHandler: any;
+    hideConditionPreviewHandler: any;
+    enableSubGroup: any;
+    buttonLabel: any;
 }): import("react/jsx-runtime").JSX.Element;
 declare namespace ConditionBuilderAdd {
     namespace propTypes {
+        let addConditionSubGroupHandler: PropTypes.Requireable<(...args: any[]) => any>;
+        let buttonLabel: PropTypes.Requireable<string>;
         let className: PropTypes.Requireable<string>;
+        let enableSubGroup: PropTypes.Requireable<boolean>;
+        let hideConditionPreviewHandler: PropTypes.Requireable<(...args: any[]) => any>;
+        let hideConditionSubGroupPreviewHandler: PropTypes.Requireable<(...args: any[]) => any>;
         let onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        let showConditionPreviewHandler: PropTypes.Requireable<(...args: any[]) => any>;
+        let showConditionSubGroupPreviewHandler: PropTypes.Requireable<(...args: any[]) => any>;
     }
 }
 import PropTypes from 'prop-types';