@carbon/ibm-products 2.48.0 → 2.49.0-rc.0

package/es/global/js/hooks/useFocus.js

@@ -5,9 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import { usePrefix } from '@carbon/react';
 import { pkg } from '../../../settings.js';
 import { useCallback, useEffect } from 'react';
+import wait from '../utils/wait.js';
 
 var getSpecificElement = function getSpecificElement(parentEl, elementId) {
   var element = parentEl === null || parentEl === void 0 ? void 0 : parentEl.querySelector(elementId);
@@ -16,6 +18,7 @@ var getSpecificElement = function getSpecificElement(parentEl, elementId) {
 var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
   var carbonPrefix = usePrefix();
   var tearsheetBaseClass = "".concat(pkg.prefix, "--tearsheet");
+  var sidePanelBaseClass = "".concat(pkg.prefix, "--side-panel");
   // Querying focusable element in the modal
   // Query to exclude hidden elements in the modal from querySelectorAll() method
   // feel free to include more if needed :)
@@ -27,8 +30,9 @@ var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
   var queryTextarea = "textarea".concat(notQuery);
   var queryLink = "[href]".concat(notQuery);
   var queryTabIndex = "[tabindex=\"0\"]".concat(notQuery);
+  var querySidePanelScroll = ".".concat(sidePanelBaseClass, "--scrolls");
   // Final query
-  var query = "".concat(queryButton, ",").concat(queryLink, ",").concat(queryInput, ",").concat(querySelect, ",").concat(queryTextarea, ", ").concat(queryTabIndex);
+  var query = "".concat(queryButton, ",").concat(queryLink, ",").concat(queryInput, ",").concat(querySelect, ",").concat(queryTextarea, ",").concat(queryTabIndex, ",").concat(querySidePanelScroll);
   var modalEl = modalRef === null || modalRef === void 0 ? void 0 : modalRef.current;
   var getFocusable = useCallback(function () {
     var _focusableElements, _focusableElements2, _focusableElements3, _focusableElements4;
@@ -54,30 +58,42 @@ var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
   useEffect(function () {
     getFocusable();
   }, [getFocusable]);
-  var handleKeyDown = function handleKeyDown(event) {
-    // Checking whether the key is tab or not
-    if (event.key === 'Tab') {
-      // updating the focusable elements list
-      var _getFocusable = getFocusable(),
-        first = _getFocusable.first,
-        last = _getFocusable.last,
-        all = _getFocusable.all;
-      setTimeout(function () {
-        var _document, _document2;
-        if (event.shiftKey && !Array.prototype.includes.call(all, (_document = document) === null || _document === void 0 ? void 0 : _document.activeElement)) {
-          // Prevents the default "Tab" behavior
-          event.preventDefault();
-          // if the user press shift+tab and the current element not in focusable items
-          last === null || last === void 0 || last.focus();
-        } else if (!Array.prototype.includes.call(all, (_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.activeElement)) {
-          event.preventDefault();
-          // user pressing tab key only then
-          // focusing the first element if the current element is not in focusable items
-          first === null || first === void 0 || first.focus();
+  var handleKeyDown = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(event) {
+      var _document, _document2, _getFocusable, first, last, all;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!(event.key === 'Tab')) {
+              _context.next = 5;
+              break;
+            }
+            // updating the focusable elements list
+            _getFocusable = getFocusable(), first = _getFocusable.first, last = _getFocusable.last, all = _getFocusable.all;
+            _context.next = 4;
+            return wait(1);
+          case 4:
+            if (event.shiftKey && !Array.prototype.includes.call(all, (_document = document) === null || _document === void 0 ? void 0 : _document.activeElement)) {
+              // Prevents the default "Tab" behavior
+              event.preventDefault();
+              // if the user press shift+tab and the current element not in focusable items
+              last === null || last === void 0 || last.focus();
+            } else if (!Array.prototype.includes.call(all, (_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.activeElement)) {
+              event.preventDefault();
+              // user pressing tab key only then
+              // focusing the first element if the current element is not in focusable items
+              first === null || first === void 0 || first.focus();
+            }
+          case 5:
+          case "end":
+            return _context.stop();
         }
-      }, 0);
-    }
-  };
+      }, _callee);
+    }));
+    return function handleKeyDown(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
   return {
     firstElement: getFocusable().first,
     lastElement: getFocusable().last,

package/es/global/js/utils/keyboardNavigation.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Various utilities to help with a11y work
+ */
+/**
+ * A flag `node.compareDocumentPosition(target)` returns,
+ * that indicates `target` is located earlier than `node` in the document or `target` contains `node`.
+ */
+export const DOCUMENT_POSITION_BROAD_PRECEDING: number | false;
+/**
+ * A flag `node.compareDocumentPosition(target)` returns,
+ * that indicates `target` is located later than `node` in the document or `node` contains `target`.
+ */
+export const DOCUMENT_POSITION_BROAD_FOLLOWING: number | false;
+/**
+ * CSS selector that selects major nodes that are sequential-focusable.
+ */
+export const selectorTabbable: "\n  a[href], area[href], input:not([disabled]):not([tabindex='-1']),\n  button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),\n  textarea:not([disabled]):not([tabindex='-1']),\n  iframe, object, embed, *[tabindex]:not([tabindex='-1']):not([disabled]), *[contenteditable=true]\n";
+/**
+ * CSS selector that selects major nodes that are click focusable
+ */
+export const selectorFocusable: "\n  a[href], area[href], input:not([disabled]),\n  button:not([disabled]),select:not([disabled]),\n  textarea:not([disabled]),\n  iframe, object, embed, *[tabindex]:not([disabled]), *[contenteditable=true]\n";

package/es/global/js/utils/keyboardNavigation.js

@@ -0,0 +1,37 @@
+/**
+ * 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.
+ */
+
+/**
+ * Various utilities to help with a11y work
+ */
+
+/**
+ * A flag `node.compareDocumentPosition(target)` returns,
+ * that indicates `target` is located earlier than `node` in the document or `target` contains `node`.
+ */
+var DOCUMENT_POSITION_BROAD_PRECEDING =
+// Checks `typeof Node` for `react-docgen`
+typeof Node !== 'undefined' &&
+// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS;
+
+/**
+ * A flag `node.compareDocumentPosition(target)` returns,
+ * that indicates `target` is located later than `node` in the document or `node` contains `target`.
+ */
+var DOCUMENT_POSITION_BROAD_FOLLOWING =
+// Checks `typeof Node` for `react-docgen`
+typeof Node !== 'undefined' &&
+// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY;
+
+/**
+ * CSS selector that selects major nodes that are sequential-focusable.
+ */
+var selectorTabbable = "\n  a[href], area[href], input:not([disabled]):not([tabindex='-1']),\n  button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),\n  textarea:not([disabled]):not([tabindex='-1']),\n  iframe, object, embed, *[tabindex]:not([tabindex='-1']):not([disabled]), *[contenteditable=true]\n";
+
+export { DOCUMENT_POSITION_BROAD_FOLLOWING, DOCUMENT_POSITION_BROAD_PRECEDING, selectorTabbable };

package/es/global/js/utils/wrapFocus.d.ts

@@ -0,0 +1,25 @@
+export default wrapFocus;
+/**
+ * @param {Node} node A DOM node.
+ * @param {string[]} selectorsFloatingMenus The CSS selectors that matches floating menus.
+ * @returns {boolean} `true` of the given `node` is in a floating menu.
+ */
+export function elementOrParentIsFloatingMenu(node: Node, selectorsFloatingMenus?: string[]): boolean;
+/**
+ * Ensures the focus is kept in the given `modalNode`, implementing "focus-wrap" behavior.
+ * @param {object} options The options.
+ * @param {Node|null} options.bodyNode The DOM node of the inner modal.
+ * @param {Node|null} options.startTrapNode The DOM node of the focus sentinel the is placed earlier next to `modalNode`.
+ * @param {Node|null} options.endTrapNode The DOM node of the focus sentinel the is placed next to `modalNode`.
+ * @param {Node} options.currentActiveNode The DOM node that has focus.
+ * @param {Node} options.oldActiveNode The DOM node that previously had focus.
+ * @param {string[]} [options.selectorsFloatingMenus] The CSS selectors that matches floating menus
+ */
+declare function wrapFocus({ bodyNode, startTrapNode, endTrapNode, currentActiveNode, oldActiveNode, selectorsFloatingMenus, }: {
+    bodyNode: Node | null;
+    startTrapNode: Node | null;
+    endTrapNode: Node | null;
+    currentActiveNode: Node;
+    oldActiveNode: Node;
+    selectorsFloatingMenus?: string[] | undefined;
+}): void;

package/es/global/js/utils/wrapFocus.js

@@ -0,0 +1,68 @@
+/**
+ * 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 { DOCUMENT_POSITION_BROAD_PRECEDING, selectorTabbable, DOCUMENT_POSITION_BROAD_FOLLOWING } from './keyboardNavigation.js';
+import { carbon } from '../../../settings.js';
+
+/**
+ * @param {Node} node A DOM node.
+ * @param {string[]} selectorsFloatingMenus The CSS selectors that matches floating menus.
+ * @returns {boolean} `true` of the given `node` is in a floating menu.
+ */
+function elementOrParentIsFloatingMenu(node) {
+  var selectorsFloatingMenus = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [".".concat(carbon.prefix, "--overflow-menu-options"), ".".concat(carbon.prefix, "--tooltip"), '.flatpickr-calendar'];
+  if (node && typeof node.closest === 'function') {
+    return selectorsFloatingMenus.some(function (selector) {
+      return node.closest(selector);
+    });
+  }
+}
+
+/**
+ * Ensures the focus is kept in the given `modalNode`, implementing "focus-wrap" behavior.
+ * @param {object} options The options.
+ * @param {Node|null} options.bodyNode The DOM node of the inner modal.
+ * @param {Node|null} options.startTrapNode The DOM node of the focus sentinel the is placed earlier next to `modalNode`.
+ * @param {Node|null} options.endTrapNode The DOM node of the focus sentinel the is placed next to `modalNode`.
+ * @param {Node} options.currentActiveNode The DOM node that has focus.
+ * @param {Node} options.oldActiveNode The DOM node that previously had focus.
+ * @param {string[]} [options.selectorsFloatingMenus] The CSS selectors that matches floating menus
+ */
+function wrapFocus(_ref) {
+  var bodyNode = _ref.bodyNode,
+    startTrapNode = _ref.startTrapNode,
+    endTrapNode = _ref.endTrapNode,
+    currentActiveNode = _ref.currentActiveNode,
+    oldActiveNode = _ref.oldActiveNode,
+    selectorsFloatingMenus = _ref.selectorsFloatingMenus;
+  if (bodyNode && currentActiveNode && oldActiveNode && !bodyNode.contains(currentActiveNode) && !elementOrParentIsFloatingMenu(currentActiveNode, selectorsFloatingMenus)) {
+    var comparisonResult = oldActiveNode.compareDocumentPosition(currentActiveNode);
+    if (currentActiveNode === startTrapNode || comparisonResult & DOCUMENT_POSITION_BROAD_PRECEDING) {
+      var arrayNodes = Array.from(bodyNode.querySelectorAll(selectorTabbable));
+      arrayNodes.reverse();
+      var tabbable = arrayNodes.find(function (elem) {
+        return Boolean(elem.offsetParent);
+      });
+      if (tabbable) {
+        tabbable.focus();
+      } else if (bodyNode !== oldActiveNode) {
+        bodyNode.focus();
+      }
+    } else if (currentActiveNode === endTrapNode || comparisonResult & DOCUMENT_POSITION_BROAD_FOLLOWING) {
+      var _tabbable = Array.prototype.find.call(bodyNode.querySelectorAll(selectorTabbable), function (elem) {
+        return Boolean(elem.offsetParent);
+      });
+      if (_tabbable) {
+        _tabbable.focus();
+      } else if (bodyNode !== oldActiveNode) {
+        bodyNode.focus();
+      }
+    }
+  }
+}
+
+export { wrapFocus as default, elementOrParentIsFloatingMenu };

package/lib/components/APIKeyModal/APIKeyModal.types.d.ts

@@ -144,7 +144,7 @@ interface APIKeyModalCommonProps {
     /**
      * The DOM node the tearsheet should be rendered within. Defaults to document.body.
      */
-    portalTarget: ReactNode;
+    portalTarget?: ReactNode;
     /**
      * label text that's displayed when hovering over visibility toggler to show key
      */

package/lib/components/Card/Card.js

@@ -245,7 +245,9 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       secondaryButtonText: secondaryButtonText
     };
   };
-  return /*#__PURE__*/React__default["default"].createElement("div", getCardProps(), !getStarted && media && /*#__PURE__*/React__default["default"].createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    "aria-disabled": disabled
+  }, getCardProps()), !getStarted && media && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__media")
   }, media), Pictogram && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__pictogram")

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

@@ -1,28 +1,104 @@
-export default ConditionBlock;
+/**
+ * Copyright IBM Corp. 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 React from 'react';
+import PropTypes from 'prop-types';
+import { Condition, ConditionGroup, LogicalOperator } from '../ConditionBuilder.types';
 /**
  * This component build each block of condition consisting of property, operator value and close button.
  */
-declare function ConditionBlock(props: any): import("react/jsx-runtime").JSX.Element;
-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>;
-    }
+interface ConditionBlockProps {
+    condition?: Condition;
+    onRemove: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onChange: (condition: Condition) => void;
+    onConnectorOperatorChange?: (op: string) => void;
+    onStatementChange?: (v: string) => void;
+    addConditionHandler?: (conditionIndex: number) => void;
+    addConditionSubGroupHandler?: (conditionIndex: number) => void;
+    hideConditionSubGroupPreviewHandler?: () => void;
+    showConditionSubGroupPreviewHandler?: () => void;
+    hideConditionPreviewHandler?: () => void;
+    showConditionPreviewHandler?: () => void;
+    conjunction?: LogicalOperator;
+    isStatement?: boolean;
+    group: ConditionGroup;
+    conditionIndex: number;
+    aria: {
+        level: number;
+        posinset: number;
+        setsize?: number;
+    };
+    isLastCondition: (index: number, conditions: (ConditionGroup | Condition)[]) => void;
 }
-import PropTypes from 'prop-types';
+declare const ConditionBlock: {
+    (props: ConditionBlockProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * callback to add a new condition
+         */
+        addConditionHandler: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * callback to add a new condition subgroup
+         */
+        addConditionSubGroupHandler: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * object hold aria attributes
+         */
+        aria: PropTypes.Requireable<object>;
+        condition: PropTypes.Requireable<object>;
+        conditionIndex: PropTypes.Requireable<number>;
+        /**
+         * string that decides to show the condition connector
+         */
+        conjunction: PropTypes.Requireable<string>;
+        /**
+         * object that hold the current group object where is condition is part of
+         */
+        group: PropTypes.Requireable<object>;
+        /**
+         * handler for hiding sub group preview
+         */
+        hideConditionPreviewHandler: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * handler for hiding sub group preview
+         */
+        hideConditionSubGroupPreviewHandler: PropTypes.Requireable<(...args: any[]) => any>;
+        isLastCondition: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         *  boolean that decides to show the statement(if/ excl.if)
+         */
+        isStatement: PropTypes.Requireable<boolean>;
+        /**
+         * callback to update the current condition of the state tree
+         */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * callback to handle the connector(and/or) change
+         */
+        onConnectorOperatorChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * callback for Remove a condition
+         */
+        onRemove: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * callback to handle the statement(if/ excl.if) change
+         */
+        onStatementChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * handler for showing add condition preview
+         */
+        showConditionPreviewHandler: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * handler for showing sub group preview
+         */
+        showConditionSubGroupPreviewHandler: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * object that hold the current condition
+         */
+        state: PropTypes.Requireable<object>;
+    };
+};
+export default ConditionBlock;

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

@@ -14,7 +14,6 @@ var React = require('react');
 var icons = require('@carbon/react/icons');
 var ConditionBuilderItem = require('../ConditionBuilderItem/ConditionBuilderItem.js');
 var index = require('../../../node_modules/prop-types/index.js');
-var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
 var cx = require('classnames');
 var ConditionConnector = require('../ConditionBuilderConnector/ConditionConnector.js');
 var ConditionBuilderItemNumber = require('../ConditionBuilderItem/ConditionBuilderItemNumber/ConditionBuilderItemNumber.js');
@@ -28,6 +27,7 @@ var ConditionBuilderAdd = require('../ConditionBuilderAdd/ConditionBuilderAdd.js
 var ItemOption = require('../ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js');
 var ItemOptionForValueField = require('../ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.js');
 var useTranslations = require('../utils/useTranslations.js');
+var useDataConfigs = require('../utils/useDataConfigs.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -41,13 +41,10 @@ var _div;
  */
 
 var ConditionBlock = function ConditionBlock(props) {
-  var _props$condition = props.condition,
-    property = _props$condition.property,
-    value = _props$condition.value,
-    operator = _props$condition.operator;
   var onRemove = props.onRemove,
     onChange = props.onChange,
-    condition = props.condition,
+    _props$condition = props.condition,
+    condition = _props$condition === void 0 ? {} : _props$condition,
     conjunction = props.conjunction,
     onConnectorOperatorChange = props.onConnectorOperatorChange,
     isStatement = props.isStatement,
@@ -62,6 +59,9 @@ var ConditionBlock = function ConditionBlock(props) {
     hideConditionPreviewHandler = props.hideConditionPreviewHandler,
     showConditionPreviewHandler = props.showConditionPreviewHandler,
     isLastCondition = props.isLastCondition;
+  var property = condition.property,
+    value = condition.value,
+    operator = condition.operator;
   var _useContext = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
     inputConfig = _useContext.inputConfig,
     variant = _useContext.variant,
@@ -81,19 +81,22 @@ var ConditionBlock = function ConditionBlock(props) {
     propertyText = _useTranslations2[2],
     operatorText = _useTranslations2[3],
     removeConditionText = _useTranslations2[4];
+  var _useDataConfigs = useDataConfigs.useDataConfigs(),
+    statementConfig = _useDataConfigs.statementConfig,
+    operatorConfig = _useDataConfigs.operatorConfig;
 
   //filtering the current property to access its properties and config options
   var getCurrentConfig = function getCurrentConfig(property) {
     var _inputConfig$properti, _inputConfig$properti2;
-    return (_inputConfig$properti = (_inputConfig$properti2 = inputConfig.properties) === null || _inputConfig$properti2 === void 0 ? void 0 : _inputConfig$properti2.find(function (eachProperty) {
+    return (_inputConfig$properti = inputConfig === null || inputConfig === void 0 || (_inputConfig$properti2 = inputConfig.properties) === null || _inputConfig$properti2 === void 0 ? void 0 : _inputConfig$properti2.find(function (eachProperty) {
       return eachProperty.id == property;
     })) !== null && _inputConfig$properti !== void 0 ? _inputConfig$properti : {};
   };
-  var _getCurrentConfig = getCurrentConfig(property),
-    icon = _getCurrentConfig.icon,
-    type = _getCurrentConfig.type,
-    config = _getCurrentConfig.config,
-    label = _getCurrentConfig.label;
+  var _ref = getCurrentConfig(property),
+    icon = _ref.icon,
+    type = _ref.type,
+    config = _ref.config,
+    label = _ref.label;
 
   //Below possible input types expected for value field.
   var itemComponents = {
@@ -105,7 +108,7 @@ var ConditionBlock = function ConditionBlock(props) {
     custom: config === null || config === void 0 ? void 0 : config.component,
     textarea: ConditionBuilderItemText.ConditionBuilderItemText
   };
-  var ItemComponent = property ? itemComponents[type] : null;
+  var ItemComponent = itemComponents[type];
   var showAllActionsHandler = function showAllActionsHandler() {
     setShowAllActions(true);
   };
@@ -114,7 +117,7 @@ var ConditionBlock = function ConditionBlock(props) {
   };
   var onStatementChangeHandler = function onStatementChangeHandler(v, evt) {
     util.focusThisField(evt, conditionBuilderRef);
-    onStatementChange(v);
+    onStatementChange === null || onStatementChange === void 0 || onStatementChange(v);
   };
   var onPropertyChangeHandler = function onPropertyChangeHandler(newProperty) {
     onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, condition), {}, {
@@ -145,7 +148,7 @@ var ConditionBlock = function ConditionBlock(props) {
     setShowDeletionPreview(false);
   };
   var manageActionButtons = function manageActionButtons(conditionIndex, conditions) {
-    if (variant === 'tree') {
+    if (variant === util.HIERARCHICAL_VARIANT) {
       return true;
     }
     return isLastCondition(conditionIndex, conditions);
@@ -154,12 +157,12 @@ var ConditionBlock = function ConditionBlock(props) {
     if (config !== null && config !== void 0 && config.operators) {
       return config.operators;
     }
-    return DataConfigs.operatorConfig.filter(function (operator) {
+    return operatorConfig.filter(function (operator) {
       return operator.type.indexOf(type) != -1 || operator.type == 'all';
     });
   };
   var getAriaAttributes = function getAriaAttributes() {
-    return variant == 'tree' ? {
+    return variant == util.HIERARCHICAL_VARIANT ? {
       'aria-level': aria.level,
       'aria-posinset': aria.posinset,
       'aria-setsize': aria.setsize
@@ -180,7 +183,7 @@ var ConditionBlock = function ConditionBlock(props) {
     });
   };
   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'), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__gap ").concat(DataConfigs.blockClass, "__gap-bottom"), variant == 'sentence'), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__condition--interacting"), showAllActions)),
+    className: cx__default["default"]("".concat(util.blockClass, "__condition-block"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(util.blockClass, "__condition__deletion-preview"), showDeletionPreview), _rollupPluginBabelHelpers.defineProperty({}, "".concat(util.blockClass, "__gap-bottom"), variant == util.HIERARCHICAL_VARIANT), _rollupPluginBabelHelpers.defineProperty({}, "".concat(util.blockClass, "__gap ").concat(util.blockClass, "__gap-bottom"), variant == util.NON_HIERARCHICAL_VARIANT), _rollupPluginBabelHelpers.defineProperty({}, "".concat(util.blockClass, "__condition--interacting"), showAllActions)),
     role: "row",
     "aria-label": conditionRowText
   }, getAriaAttributes(), {
@@ -189,10 +192,10 @@ var ConditionBlock = function ConditionBlock(props) {
     onMouseLeave: hideAllActionsHandler,
     onBlur: hideAllActionsHandler
   }), conjunction ? /*#__PURE__*/React__default["default"].createElement(ConditionConnector["default"], {
-    className: "".concat(DataConfigs.blockClass, "__gap"),
+    className: "".concat(util.blockClass, "__gap"),
     operator: conjunction,
     onChange: function onChange(op) {
-      return onConnectorOperatorChange(op);
+      return onConnectorOperatorChange === null || onConnectorOperatorChange === void 0 ? void 0 : onConnectorOperatorChange(op);
     }
   }) : _div || (_div = /*#__PURE__*/React__default["default"].createElement("div", {
     role: "gridcell"
@@ -200,8 +203,8 @@ var ConditionBlock = function ConditionBlock(props) {
     label: group.statement,
     title: conditionText,
     "data-name": "connectorField",
-    popOverClassName: "".concat(DataConfigs.blockClass, "__gap"),
-    className: "".concat(DataConfigs.blockClass, "__statement-button"),
+    popOverClassName: "".concat(util.blockClass, "__gap"),
+    className: "".concat(util.blockClass, "__statement-button"),
     tabIndex: 0
   }, /*#__PURE__*/React__default["default"].createElement(ItemOption.ItemOption, {
     conditionState: {
@@ -210,13 +213,14 @@ var ConditionBlock = function ConditionBlock(props) {
     },
     onChange: onStatementChangeHandler,
     config: {
-      options: DataConfigs.statementConfig
+      options: statementConfig,
+      isStatement: true
     }
   })), /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
     label: label !== null && label !== void 0 ? label : condition === null || condition === void 0 ? void 0 : condition.property,
     title: propertyText,
-    renderIcon: icon !== null && icon !== void 0 ? icon : null,
-    className: "".concat(DataConfigs.blockClass, "__property-field"),
+    renderIcon: icon !== null && icon !== void 0 ? icon : undefined,
+    className: "".concat(util.blockClass, "__property-field"),
     "data-name": "propertyField",
     condition: condition,
     type: type,
@@ -228,7 +232,7 @@ var ConditionBlock = function ConditionBlock(props) {
     },
     onChange: onPropertyChangeHandler,
     config: {
-      options: inputConfig.properties
+      options: inputConfig === null || inputConfig === void 0 ? void 0 : inputConfig.properties
     }
   })), util.checkIsValid(property) && /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
     label: operator,
@@ -268,24 +272,23 @@ var ConditionBlock = function ConditionBlock(props) {
     onFocus: handleShowDeletionPreview,
     onBlur: handleHideDeletionPreview,
     renderIcon: icons.Close,
-    className: "".concat(DataConfigs.blockClass, "__close-condition"),
+    className: "".concat(util.blockClass, "__close-condition"),
     "data-name": "closeCondition"
   })), manageActionButtons(conditionIndex, group.conditions) && /*#__PURE__*/React__default["default"].createElement(ConditionBuilderAdd["default"], {
     onClick: function onClick() {
-      addConditionHandler(conditionIndex);
+      addConditionHandler === null || addConditionHandler === void 0 || addConditionHandler(conditionIndex);
     },
     addConditionSubGroupHandler: function addConditionSubGroupHandler() {
-      _addConditionSubGroupHandler(conditionIndex);
+      _addConditionSubGroupHandler === null || _addConditionSubGroupHandler === void 0 || _addConditionSubGroupHandler(conditionIndex);
     },
     showConditionSubGroupPreviewHandler: showConditionSubGroupPreviewHandler,
     hideConditionSubGroupPreviewHandler: hideConditionSubGroupPreviewHandler,
-    enableSubGroup: variant == 'tree',
+    enableSubGroup: variant == util.HIERARCHICAL_VARIANT,
     showConditionPreviewHandler: showConditionPreviewHandler,
     hideConditionPreviewHandler: hideConditionPreviewHandler,
-    className: "".concat(DataConfigs.blockClass, "__gap ").concat(DataConfigs.blockClass, "__gap-left")
+    className: "".concat(util.blockClass, "__gap ").concat(util.blockClass, "__gap-left")
   }));
 };
-var ConditionBlock$1 = ConditionBlock;
 ConditionBlock.propTypes = {
   /**
    * callback to add a new condition
@@ -352,4 +355,4 @@ ConditionBlock.propTypes = {
   state: index["default"].object
 };
 
-exports["default"] = ConditionBlock$1;
+exports["default"] = ConditionBlock;

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

@@ -1,5 +1,12 @@
 /**
- * TODO: A description of the component.
+ * Copyright IBM Corp. 2024, 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.
  */
-export let ConditionBuilder: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';
+import { ConditionBuilderProps } from './ConditionBuilder.types';
+/**
+ * TODO: A description of the component.
+ */
+export declare let ConditionBuilder: React.ForwardRefExoticComponent<ConditionBuilderProps & React.RefAttributes<HTMLDivElement>>;