@carbon/ibm-products 2.73.1 → 2.74.0-rc.0

package/es/components/Coachmark/next/Coachmark/context.js

@@ -0,0 +1,28 @@
+/**
+ * Copyright IBM Corp. 2020, 2025
+ *
+ * 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 { createContext } from 'react';
+import { pkg } from '../../../../settings.js';
+
+const CoachmarkContext = /*#__PURE__*/createContext({
+  open: false,
+  setOpen: () => {},
+  align: 'bottom',
+  triggerRef: {
+    current: null
+  },
+  position: {
+    x: 0,
+    y: 0
+  },
+  contentRef: null,
+  setContentRef: value => {},
+  floating: false
+});
+const blockClass = `${pkg.prefix}--coachmark__next`;
+
+export { CoachmarkContext, blockClass };

package/es/components/Coachmark/utils/context.d.ts

@@ -6,7 +6,7 @@
  */
 import { PopoverAlignment } from '@carbon/react';
 import { ButtonProps } from '@carbon/react';
-interface CoachmarkContextType {
+export interface CoachmarkContextType {
     buttonProps: ButtonProps<React.ElementType>;
     closeButtonProps: {
         onClick: () => void;
@@ -22,7 +22,7 @@ interface CoachmarkContextType {
         y: number;
     };
     isOpen: boolean;
+    closeIconDescription?: string;
 }
 export declare const CoachmarkContext: import("react").Context<CoachmarkContextType | null>;
 export declare const useCoachmark: () => CoachmarkContextType | null;
-export {};

package/es/components/CoachmarkFixed/CoachmarkFixed.d.ts

@@ -37,6 +37,10 @@ export interface CoachmarkFixedProps {
      * Determines the theme of the component.
      */
     theme?: 'light' | 'dark';
+    /**
+     * Tooltip text and aria label for the Close button icon.
+     */
+    closeIconDescription?: string;
 }
 /**
  * Fixed coachmarks are used to call out specific functionality or concepts

package/es/components/CoachmarkFixed/CoachmarkFixed.js

@@ -47,6 +47,7 @@ let CoachmarkFixed = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     portalTarget,
     tagline = defaults.tagline,
     theme = defaults.theme,
+    closeIconDescription,
     // Collect any other property values passed in.
     ...rest
   } = _ref;
@@ -113,7 +114,7 @@ let CoachmarkFixed = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     targetRect: targetRect,
     targetOffset: targetOffset,
     isOpen: isOpen,
-    tacos: 'tacos'
+    closeIconDescription
   };
 
   // instead of toggling on/off,
@@ -182,6 +183,10 @@ CoachmarkFixed.propTypes = {
    * Optional class name for this component.
    */
   className: PropTypes.string,
+  /**
+   * Tooltip text and aria label for the Close button icon.
+   */
+  closeIconDescription: PropTypes.string,
   /**
    * Function to call when the Coachmark closes.
    */

package/es/components/CoachmarkStack/CoachmarkStack.d.ts

@@ -56,6 +56,10 @@ interface CoachmarkStackProps {
      * Label's tooltip position
      */
     tooltipAlign?: TooltipAlignment;
+    /**
+     * Tooltip text and aria label for the Close button icon.
+     */
+    closeIconDescription?: string;
 }
 /**
  * Stacked coachmarks are used to call out specific functionality or concepts

package/es/components/CoachmarkStack/CoachmarkStack.js

@@ -61,6 +61,7 @@ let CoachmarkStack = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     theme = defaults.theme,
     title,
     tooltipAlign,
+    closeIconDescription,
     ...rest
   } = _ref;
   const portalNode = useRef(null);
@@ -133,7 +134,8 @@ let CoachmarkStack = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     closeButtonProps: {
       onClick: () => handleClose(false)
     },
-    isOpen: isOpen
+    isOpen: isOpen,
+    closeIconDescription
   };
   useEffect(() => {
     mountedRef.current = true;
@@ -234,6 +236,10 @@ CoachmarkStack.propTypes = {
    * The label for the button that will close the Stack
    */
   closeButtonLabel: PropTypes.string,
+  /**
+   * Tooltip text and aria label for the Close button icon.
+   */
+  closeIconDescription: PropTypes.string,
   // Pass through to CoachmarkStackHome
   /**
    * The description of the Coachmark.

package/es/components/ConditionBuilder/ConditionBlock/ConditionBlock.js

@@ -57,7 +57,8 @@ const ConditionBlock = props => {
   const {
     inputConfig,
     variant,
-    conditionBuilderRef
+    conditionBuilderRef,
+    readOnly
   } = useContext(ConditionBuilderContext);
   const [showDeletionPreview, setShowDeletionPreview] = useState(false);
   const [showAllActions, setShowAllActions] = useState(false);
@@ -177,7 +178,8 @@ const ConditionBlock = props => {
       config: {
         options: inputConfig?.properties
       },
-      closePopover: closePopover
+      closePopover: closePopover,
+      group: group
     });
   };
   return /*#__PURE__*/React__default.createElement("div", _extends({
@@ -205,7 +207,7 @@ const ConditionBlock = props => {
     label: group.statement,
     title: conditionText,
     "data-name": "connectorField",
-    popOverClassName: `${blockClass}__gap`,
+    popOverClassName: `${blockClass}__gap ${blockClass}__connector`,
     className: `${blockClass}__statement-button`,
     tabIndex: 0
   }, /*#__PURE__*/React__default.createElement(ItemOption, {
@@ -218,7 +220,9 @@ const ConditionBlock = props => {
       options: statementConfig,
       isStatement: true
     }
-  })), /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: `${blockClass}__condition-inner-block`
+  }, /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
     label: label ?? condition?.property,
     title: propertyText,
     renderIcon: icon ?? undefined,
@@ -256,7 +260,7 @@ const ConditionBlock = props => {
     config: config,
     onChange: onValueChangeHandler,
     renderChildren: renderChildren
-  }), /*#__PURE__*/React__default.createElement("span", {
+  })), !readOnly && /*#__PURE__*/React__default.createElement("span", {
     role: "gridcell",
     "aria-label": removeConditionText
   }, /*#__PURE__*/React__default.createElement(ConditionBuilderButton, {
@@ -271,7 +275,7 @@ const ConditionBlock = props => {
     className: `${blockClass}__close-condition`,
     "data-name": "closeCondition",
     wrapperClassName: `${blockClass}__close-condition-wrapper`
-  })), manageActionButtons(conditionIndex, group.conditions) && /*#__PURE__*/React__default.createElement(ConditionBuilderAdd, {
+  })), !readOnly && manageActionButtons(conditionIndex, group.conditions) ? /*#__PURE__*/React__default.createElement(ConditionBuilderAdd, {
     onClick: () => {
       addConditionHandler?.(conditionIndex);
     },
@@ -285,7 +289,7 @@ const ConditionBlock = props => {
     hideConditionPreviewHandler: hideConditionPreviewHandler,
     className: `${blockClass}__gap ${blockClass}__gap-left`,
     group: group
-  }));
+  }) : null);
 };
 ConditionBlock.propTypes = {
   /**

package/es/components/ConditionBuilder/ConditionBuilder.js

@@ -57,6 +57,7 @@ let ConditionBuilder = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     translateWithId,
     statementConfigCustom,
     onAddItem,
+    readOnly,
     ...rest
   } = _ref;
   const localRef = useRef(null);
@@ -72,14 +73,16 @@ let ConditionBuilder = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     translateWithId: translateWithId,
     conditionBuilderRef: conditionBuilderRef,
     statementConfigCustom: statementConfigCustom,
-    onAddItem: onAddItem
+    onAddItem: onAddItem,
+    readOnly: !!readOnly
   }, /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: cx(blockClass,
     // Apply the block class to the main HTML element
     className,
     // Apply any supplied class names to the main HTML element.
-    // example: `${blockClass}__template-string-class-${kind}-n-${size}`,
     {
+      [`${blockClass}__readonly`]: readOnly
+    }, {
       // switched classes dependant on props or state
       // example: [`${blockClass}__here-if-small`]: size === 'sm',
     }),
@@ -173,6 +176,8 @@ ConditionBuilder.propTypes = {
       type: PropTypes.oneOf(['text', 'textarea', 'number', 'date', 'option', 'time', 'custom']).isRequired,
       description: PropTypes.string,
       //will be displayed on hover of property field
+      getIsDisabled: PropTypes.func,
+      getIsHidden: PropTypes.func,
       config: PropTypes.shape({
         options: PropTypes.arrayOf(PropTypes.shape({
           id: PropTypes.string.isRequired,
@@ -197,6 +202,10 @@ ConditionBuilder.propTypes = {
    * Provide an mandatory numeric value that will be used to enable search option in the popovers with list.
    */
   popOverSearchThreshold: PropTypes.number.isRequired,
+  /**
+   * Whether the conditionBuilder should be readOnly
+   */
+  readOnly: PropTypes.bool,
   /**
    * Provide a label to the button that starts condition builder
    */

package/es/components/ConditionBuilder/ConditionBuilder.types.d.ts

@@ -93,6 +93,14 @@ export type Property = Item & {
     description?: string;
     type?: any;
     config?: any;
+    getIsDisabled?: (args: {
+        conditionState: Condition;
+        group?: ConditionGroup;
+    }) => boolean;
+    getIsHidden?: (args: {
+        conditionState: Condition;
+        group?: ConditionGroup;
+    }) => boolean;
 } & ConfigType;
 export type inputConfig = {
     properties: Property[];
@@ -149,6 +157,7 @@ export type ConditionBuilderProps = {
     onAddItem?: (config: AddItemConfig) => {
         preventAdd: boolean;
     };
+    readOnly?: boolean;
 };
 export type InitialState = {
     state: ConditionBuilderState;
@@ -163,6 +172,7 @@ export interface ConditionBuilderContextInputProps extends PropsWithChildren {
     translateWithId?: (id: ConditionBuilderTextKeys) => string;
     statementConfigCustom?: statementConfig[];
     conditionBuilderRef?: ForwardedRef<HTMLDivElement>;
+    readOnly?: boolean;
 }
 export type ConditionBuilderContextProps = {
     rootState?: ConditionBuilderState;

package/es/components/ConditionBuilder/ConditionBuilderActions/ConditionBuilderActions.js

@@ -26,11 +26,15 @@ const ConditionBuilderActions = _ref => {
   } = _ref;
   const {
     actionState = [],
-    setActionState
+    setActionState,
+    readOnly
   } = useContext(ConditionBuilderContext);
   const [showDeletionPreview, setShowDeletionPreview] = useState(-1);
   const [actionsText, thenText, andText, removeActionText, addActionText, actionSectionText] = useTranslations(['actionsText', 'then', 'and', 'removeActionText', 'addActionText', 'actionSectionText']);
   const addActionHandler = () => {
+    if (readOnly) {
+      return;
+    }
     const action = {
       id: uuidv4(),
       label: undefined,
@@ -75,14 +79,15 @@ const ConditionBuilderActions = _ref => {
   }, /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
     className: `${blockClass}__statement-button`,
     tabIndex: 0,
-    popOverClassName: `${blockClass}__gap`,
+    popOverClassName: `${blockClass}__gap ${blockClass}__connector`,
     label: index === 0 ? thenText : andText
   }), /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
     label: action.label,
     title: actionsText,
     condition: action,
     "data-name": "valueField",
-    type: "option"
+    type: "option",
+    popOverClassName: `${blockClass}__action-block`
   }, /*#__PURE__*/React__default.createElement(ItemOptionForValueField, {
     conditionState: {
       value: action.label
@@ -91,7 +96,7 @@ const ConditionBuilderActions = _ref => {
     config: {
       options: actions
     }
-  })), /*#__PURE__*/React__default.createElement("span", {
+  })), !readOnly && /*#__PURE__*/React__default.createElement("span", {
     role: "gridcell",
     "aria-label": removeActionText
   }, /*#__PURE__*/React__default.createElement(ConditionBuilderButton, {
@@ -105,7 +110,7 @@ const ConditionBuilderActions = _ref => {
     renderIcon: Close,
     className: `${blockClass}__close-condition`,
     "data-name": "closeCondition"
-  })), actionState.length === index + 1 && /*#__PURE__*/React__default.createElement(ConditionBuilderAdd, {
+  })), !readOnly && actionState.length === index + 1 && /*#__PURE__*/React__default.createElement(ConditionBuilderAdd, {
     onClick: addActionHandler,
     className: `${blockClass}__gap ${blockClass}__gap-left`,
     buttonLabel: addActionText,

package/es/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.js

@@ -6,12 +6,13 @@
  */
 
 import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+import React__default, { useContext } from 'react';
 import cx from 'classnames';
 import PropTypes from '../../../_virtual/index.js';
 import { usePrefix, Tooltip } from '@carbon/react';
 import { WarningAltFilled } from '@carbon/react/icons';
 import { blockClass } from '../utils/util.js';
+import { ConditionBuilderContext } from '../ConditionBuilderContext/ConditionBuilderProvider.js';
 
 var _WarningAltFilled;
 const ConditionBuilderButton = _ref => {
@@ -39,6 +40,15 @@ const ConditionBuilderButton = _ref => {
   const carbonPrefix = usePrefix();
   const Button = () => {
     const dataName = rest['data-name'] ?? '';
+    const {
+      readOnly
+    } = useContext(ConditionBuilderContext);
+    const handleClick = e => {
+      if (readOnly) {
+        return;
+      }
+      onClick?.(e);
+    };
     return /*#__PURE__*/React__default.createElement("button", _extends({
       tabIndex: tabIndex !== undefined ? tabIndex : -1,
       className: cx([className, `${blockClass}__button`, {
@@ -47,12 +57,13 @@ const ConditionBuilderButton = _ref => {
         [`${blockClass}__invalid-input`]: isInvalid
       }]),
       type: "button",
-      onClick: onClick,
+      onClick: handleClick,
       onBlur: onBlur,
       onFocus: onFocus,
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave,
-      "data-name": dataName
+      "data-name": dataName,
+      "aria-disabled": readOnly
     }, rest), Icon && (_Icon || (_Icon = /*#__PURE__*/React__default.createElement(Icon, null))), !hideLabel && (_span || (_span = /*#__PURE__*/React__default.createElement("span", null, label))), isInvalid && (_WarningAltFilled || (_WarningAltFilled = /*#__PURE__*/React__default.createElement(WarningAltFilled, null))));
   };
   return hideLabel || showToolTip || description ? /*#__PURE__*/React__default.createElement(Tooltip, _extends({

package/es/components/ConditionBuilder/ConditionBuilderConnector/ConditionConnector.js

@@ -51,7 +51,7 @@ const ConditionConnector = _ref => {
     focusThisField(evt, conditionBuilderRef);
   };
   return variant == HIERARCHICAL_VARIANT ? /*#__PURE__*/React__default.createElement("span", {
-    className: `${className} ${blockClass}__connector--disabled`
+    className: `${className} ${blockClass}__connector ${blockClass}__connector--disabled`
   }, /*#__PURE__*/React__default.createElement(ConditionBuilderButton, {
     label: operator
   })) : /*#__PURE__*/React__default.createElement(ConditionBuilderItem, _extends({
@@ -63,7 +63,7 @@ const ConditionConnector = _ref => {
     onFocus: activeConnectorHandler,
     onBlur: inActiveConnectorHandler
   }, rest, {
-    popOverClassName: className,
+    popOverClassName: `${className} ${blockClass}__connector`,
     className: `${blockClass}__connector-button`
   }), /*#__PURE__*/React__default.createElement(ItemOption, {
     config: {

package/es/components/ConditionBuilder/ConditionBuilderConnector/GroupConnector.js

@@ -37,7 +37,7 @@ const GroupConnector = () => {
     label: rootState.operator,
     title: conditionText,
     "data-name": "connectorField",
-    popOverClassName: `${blockClass}__gap`,
+    popOverClassName: `${blockClass}__gap ${blockClass}__groupConnector`,
     className: `${blockClass}__statement-button`
   }, /*#__PURE__*/React__default.createElement(ItemOption, {
     conditionState: {

package/es/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js

@@ -34,7 +34,8 @@ const ConditionBuilderContent = _ref => {
     setRootState,
     variant,
     actionState,
-    onAddItem
+    onAddItem,
+    readOnly
   } = useContext(ConditionBuilderContext);
   const initialConditionState = useRef(initialState?.state ? JSON.parse(JSON.stringify(initialState?.state)) : null);
   const [isConditionBuilderActive, setIsConditionBuilderActive] = useState(false);
@@ -170,7 +171,7 @@ const ConditionBuilderContent = _ref => {
     onChange: updatedGroup => {
       onChangeHandler(updatedGroup, groupIndex);
     }
-  }), rootState.groups && groupIndex < rootState.groups.length - 1 && (_GroupConnector || (_GroupConnector = /*#__PURE__*/React__default.createElement(GroupConnector, null))))), variant == HIERARCHICAL_VARIANT && /*#__PURE__*/React__default.createElement("div", {
+  }), rootState.groups && groupIndex < rootState.groups.length - 1 && (_GroupConnector || (_GroupConnector = /*#__PURE__*/React__default.createElement(GroupConnector, null))))), !readOnly && variant == HIERARCHICAL_VARIANT && /*#__PURE__*/React__default.createElement("div", {
     role: "row",
     tabIndex: -1,
     "aria-level": 1,
@@ -189,7 +190,7 @@ const ConditionBuilderContent = _ref => {
       role: 'gridcell',
       'aria-label': addConditionGroupText
     }
-  })), /*#__PURE__*/React__default.createElement(ConditionPreview, {
+  })), variant === HIERARCHICAL_VARIANT ? /*#__PURE__*/React__default.createElement(ConditionPreview, {
     previewType: "newGroup",
     colorIndex: getColorIndex(),
     className: showConditionGroupPreview ? `${blockClass}__visible` : `${blockClass}__hidden`,
@@ -197,7 +198,7 @@ const ConditionBuilderContent = _ref => {
       groupOperator: rootState?.operator,
       id: uuidv4()
     }
-  })), actions && /*#__PURE__*/React__default.createElement(ConditionBuilderActions, {
+  }) : null), actions && /*#__PURE__*/React__default.createElement(ConditionBuilderActions, {
     actions: actions,
     className: `${blockClass}__actions-container`
   }));

package/es/components/ConditionBuilder/ConditionBuilderContext/ConditionBuilderProvider.js

@@ -46,7 +46,8 @@ const ConditionBuilderProvider = props => {
     translateWithId: props.translateWithId,
     conditionBuilderRef: props.conditionBuilderRef,
     statementConfigCustom: props.statementConfigCustom,
-    onAddItem: props.onAddItem
+    onAddItem: props.onAddItem,
+    readOnly: props.readOnly
   };
   return /*#__PURE__*/React__default.createElement(ConditionBuilderContext.Provider, {
     value: contextValue

package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.js

@@ -39,7 +39,8 @@ const ConditionBuilderItem = _ref => {
   const [open, setOpen] = useState(false);
   const {
     conditionBuilderRef,
-    statementConfigCustom
+    statementConfigCustom,
+    readOnly
   } = useContext(ConditionBuilderContext);
   const statementIdMap = {
     ifAll: translationsObject.ifText,
@@ -151,7 +152,12 @@ const ConditionBuilderItem = _ref => {
     }
     setOpen(false);
   };
-  const openPopOver = () => setOpen(true);
+  const openPopOver = () => {
+    if (readOnly) {
+      return;
+    }
+    setOpen(true);
+  };
   const togglePopover = () => {
     if (children || renderChildren) {
       setOpen(!open);

package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.d.ts

@@ -5,22 +5,23 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import { option, statementConfig } from '../../ConditionBuilder.types';
+import { ConditionGroup, option, Property, statementConfig } from '../../ConditionBuilder.types';
 interface ItemOptionProps {
     conditionState: {
         label?: string;
         value?: string;
     };
     config: {
-        options?: option[] | statementConfig[];
+        options?: option[] | statementConfig[] | Property[];
     } & {
         isStatement?: boolean;
     };
     onChange: (value: string, e: Event) => void;
     closePopover?: () => void;
+    group?: ConditionGroup;
 }
 export declare const ItemOption: {
-    ({ conditionState, config, onChange, closePopover, }: ItemOptionProps): React.JSX.Element | undefined;
+    ({ conditionState, config, onChange, closePopover, group, }: ItemOptionProps): React.JSX.Element | undefined;
     propTypes: {
         /**
          * current condition object

package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { extends as _extends } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useContext, useRef, useState, useEffect } from 'react';
 import { Search } from '@carbon/react';
 import { Checkmark } from '@carbon/react/icons';
@@ -18,7 +19,8 @@ const ItemOption = _ref => {
     conditionState = {},
     config = {},
     onChange,
-    closePopover
+    closePopover,
+    group
   } = _ref;
   const {
     popOverSearchThreshold
@@ -43,7 +45,9 @@ const ItemOption = _ref => {
     }
   }, [allOptions]);
   const onClickHandler = (evt, option) => {
-    onChange(option.id, evt);
+    if (!evt.currentTarget.hasAttribute('aria-disabled')) {
+      onChange(option.id, evt);
+    }
   };
   const onSearchChangeHandler = evt => {
     const {
@@ -81,7 +85,15 @@ const ItemOption = _ref => {
   }, filteredItems?.map(option => {
     const isSelected = selection === option.id;
     const Icon = option.icon;
-    return /*#__PURE__*/React__default.createElement("li", {
+    const disabled = option?.getIsDisabled?.({
+      conditionState,
+      group
+    });
+    const hidden = option?.getIsHidden?.({
+      conditionState,
+      group
+    });
+    return /*#__PURE__*/React__default.createElement("li", _extends({
       tabIndex: 0,
       key: option.id,
       role: "option",
@@ -91,7 +103,11 @@ const ItemOption = _ref => {
         return false;
       },
       onClick: evt => onClickHandler(evt, option)
-    }, /*#__PURE__*/React__default.createElement("div", {
+    }, disabled ? {
+      'aria-disabled': 'true'
+    } : {}, hidden ? {
+      'aria-hidden': 'true'
+    } : {}), /*#__PURE__*/React__default.createElement("div", {
       className: `${blockClass}__item-option__option-content`
     }, /*#__PURE__*/React__default.createElement("span", {
       className: `${blockClass}__item-option__option-label`

package/es/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.js

@@ -297,7 +297,7 @@ const ConditionGroupBuilder = _ref => {
       label: group.statement,
       title: conditionText,
       "data-name": "connectorField",
-      popOverClassName: `${blockClass}__gap`,
+      popOverClassName: `${blockClass}__gap ${blockClass}__connector`,
       className: `${blockClass}__statement-button`
     }, /*#__PURE__*/React__default.createElement(ItemOption, {
       conditionState: {

package/es/components/ConditionBuilder/index.d.ts

@@ -1 +1,2 @@
 export { ConditionBuilder } from "./ConditionBuilder";
+export * from "./ConditionBuilder.types";

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { blockClass, HIERARCHICAL_VARIANT, focusThisItem, manageTabIndexAndFocus, traverseClockVise, traverseReverse, checkForHoldingKey, focusThisField } from './util.js';
+import { blockClass, HIERARCHICAL_VARIANT, focusThisItem, manageTabIndexAndFocus, traverseClockwise, traverseReverse, checkForHoldingKey, focusThisField } from './util.js';
 
 const handleKeyDown = (evt, conditionBuilderRef, variant) => {
   const activeElement = document.activeElement;
@@ -24,6 +24,9 @@ const handleKeyDownForPopover = (evt, conditionBuilderRef, popoverRef, closePopo
 const excludeKeyPress = evt => {
   return !['Escape'].includes(evt.key) && evt.target.closest(`.${blockClass}__item-date`);
 };
+const getVisibleOptions = parentContainer => {
+  return Array.from(parentContainer.querySelectorAll(`[role="option"]`)).filter(el => !el.hasAttribute('aria-disabled') && !el.hasAttribute('aria-hidden'));
+};
 const handleKeyPressForPopover = (evt, parentContainer, conditionBuilderRef, closePopover) => {
   const key = evt.key;
   const isHoldingShiftKey = checkForHoldingKey(evt, 'shiftKey');
@@ -43,7 +46,8 @@ const handleKeyPressForPopover = (evt, parentContainer, conditionBuilderRef, clo
       case 'ArrowUp':
         evt.preventDefault();
         //traverse through the popover options, search box, selectAll button
-        parentContainer.querySelectorAll(`[role="option"]`).forEach((eachElem, index, allElements) => {
+        allItems = getVisibleOptions(parentContainer);
+        allItems.forEach((eachElem, index, allElements) => {
           traverseReverse(eachElem, index, allElements, null, null, conditionBuilderRef);
         });
         //scroll to top when we reach a the top of the list to make search box visible
@@ -54,17 +58,18 @@ const handleKeyPressForPopover = (evt, parentContainer, conditionBuilderRef, clo
       case 'ArrowDown':
         evt.preventDefault();
         //traverse through the popover options, search box, selectAll button
-        parentContainer.querySelectorAll(`[role="option"]`).forEach((eachElem, index, allElements) => {
-          traverseClockVise(eachElem, index, allElements, null, null, conditionBuilderRef);
+        allItems = getVisibleOptions(parentContainer);
+        allItems.forEach((eachElem, index, allElements) => {
+          traverseClockwise(eachElem, index, allElements, null, null, conditionBuilderRef);
         });
         break;
       case 'Tab':
-        allItems = [...Array.from(parentContainer.querySelectorAll(`.${blockClass}__selectAll-button,[role="searchbox"]`)), parentContainer.querySelector(`[role="option"]`)];
+        allItems = [...Array.from(parentContainer.querySelectorAll(`.${blockClass}__selectAll-button,[role="searchbox"]`)), getVisibleOptions(parentContainer)?.[0]];
         allItems.forEach((eachElem, index, allElements) => {
           if (isHoldingShiftKey) {
             traverseReverse(eachElem, index, allElements, true, true, conditionBuilderRef);
           } else {
-            traverseClockVise(eachElem, index, allElements, true, true, conditionBuilderRef);
+            traverseClockwise(eachElem, index, allElements, true, true, conditionBuilderRef);
           }
         });
         evt.preventDefault();
@@ -218,7 +223,7 @@ const navigateToNextRowCell = (evt, currentRowIndex, rows, variant, conditionBui
 const handleCellNavigation = (evt, conditionBuilderRef) => {
   conditionBuilderRef.current.querySelectorAll(`[role="gridcell"] button`).forEach((eachElem, index, allElements) => {
     if (evt.key === 'ArrowRight') {
-      traverseClockVise(eachElem, index, allElements, null, null, conditionBuilderRef);
+      traverseClockwise(eachElem, index, allElements, null, null, conditionBuilderRef);
     } else {
       traverseReverse(eachElem, index, allElements, null, null, conditionBuilderRef);
     }

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

@@ -1,5 +1,5 @@
 export function useDataConfigs(): {
-    statementConfig: import("../ConditionBuilder.types").statementConfig[] | {
+    statementConfig: import("..").statementConfig[] | {
         id: string;
         connector: string;
         label: any;

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

@@ -3,7 +3,7 @@ export const NON_HIERARCHICAL_VARIANT: "Non-Hierarchical";
 export const HIERARCHICAL_VARIANT: "Hierarchical";
 export function focusThisField(evt: any, conditionBuilderRef: any): void;
 export function focusThisItem(currentElement: any, conditionBuilderRef: any): void;
-export function traverseClockVise(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any, conditionBuilderRef: any): void;
+export function traverseClockwise(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any, conditionBuilderRef: any): void;
 export function traverseReverse(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any, conditionBuilderRef: any): void;
 export function checkForHoldingKey(evt: any, key: any): any;
 export function checkIsValid(item: any): any;