@carbon/ibm-products 2.71.1 → 2.72.0-rc.0

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

@@ -0,0 +1,125 @@
+/**
+ * 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 { extends as _extends } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import cx from 'classnames';
+import { useTheme, usePrefix } from '@carbon/react';
+import React__default, { forwardRef, useRef, useLayoutEffect } from 'react';
+import { pkg } from '../../../../../settings.js';
+import { offset, flip, shift, arrow } from '../../../../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js';
+import { autoUpdate, computePosition } from '../../../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
+
+const CoachmarkBubble = /*#__PURE__*/forwardRef(props => {
+  const {
+    children,
+    align,
+    target,
+    className,
+    dropShadow = true,
+    highContrast = false,
+    caret = false,
+    open,
+    ...rest
+  } = props;
+  const {
+    theme
+  } = useTheme();
+  const carbonPrefix = usePrefix();
+  const tooltipRef = useRef(null);
+  const arrowRef = useRef(null);
+  const targetRef = useRef(null);
+  useLayoutEffect(() => {
+    if (target) {
+      if (typeof target === 'string') {
+        targetRef.current = document.querySelector(target);
+      } else if ('current' in target) {
+        targetRef.current = target.current;
+      } else {
+        targetRef.current = target;
+      }
+      if (targetRef.current && tooltipRef.current && arrowRef.current && open) {
+        targetRef.current.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center',
+          inline: 'center'
+        });
+        const middlewares = [offset(10), flip(), shift({
+          padding: 5
+        }), arrow({
+          element: arrowRef.current
+        })];
+        const cleanup = autoUpdate(targetRef.current, tooltipRef.current, () => {
+          if (targetRef.current && tooltipRef.current) {
+            computePosition(targetRef.current, tooltipRef.current, {
+              placement: align,
+              strategy: 'fixed',
+              middleware: middlewares
+            }).then(_ref => {
+              let {
+                x,
+                y,
+                placement,
+                middlewareData
+              } = _ref;
+              if (tooltipRef.current) {
+                Object.assign(tooltipRef.current.style, {
+                  left: `${x}px`,
+                  top: `${y}px`
+                });
+              }
+              const arrowX = middlewareData.arrow?.x;
+              const arrowY = middlewareData.arrow?.y;
+              const staticSide = {
+                top: 'bottom',
+                right: 'left',
+                bottom: 'top',
+                left: 'right'
+              }[placement.split('-')[0]];
+              if (staticSide && arrowRef.current) {
+                Object.assign(arrowRef.current.style, {
+                  left: arrowX != null ? `${arrowX}px` : '',
+                  top: arrowY != null ? `${arrowY}px` : '',
+                  right: '',
+                  bottom: '',
+                  [staticSide]: '-4px'
+                });
+              }
+            });
+          }
+        }, {
+          animationFrame: true
+        });
+        return () => {
+          cleanup();
+        };
+      }
+    }
+  }, [target, open, align]);
+  if (!target) {
+    return null;
+  }
+  return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
+    ref: tooltipRef,
+    className: cx({
+      [`${carbonPrefix}--g100`]: theme === 'white' && highContrast || theme === 'g100' && !highContrast,
+      [`${carbonPrefix}--g90`]: theme === 'g10' && highContrast || theme === 'g90' && !highContrast,
+      [`${carbonPrefix}--g10`]: theme === 'g90' && highContrast || theme === 'g10' && !highContrast,
+      [`${carbonPrefix}--white`]: theme === 'g100' && highContrast || theme === 'white' && !highContrast,
+      [`${pkg.prefix}__bubble`]: true,
+      [`${pkg.prefix}__bubble-open`]: open,
+      [`${pkg.prefix}__bubble-drop-shadow`]: dropShadow,
+      [`${pkg.prefix}__bubble-high-contrast`]: highContrast,
+      [`${pkg.prefix}__bubble-hidden`]: !targetRef.current
+    }, className)
+  }), /*#__PURE__*/React__default.createElement("div", {
+    ref: arrowRef,
+    className: !caret ? `${pkg.prefix}__bubble__arrow` : ''
+  }), children);
+});
+CoachmarkBubble.displayName = 'CoachmarkBubble';
+
+export { CoachmarkBubble };

package/es/components/Coachmark/next/Coachmark/CoachmarkBubble/CoachmarkBubbleHeader.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 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 React, { HTMLProps, ReactNode } from 'react';
+interface BubbleHeaderProps extends HTMLProps<HTMLElement> {
+    /**
+     * Provide the contents of the Bubble header
+     */
+    children: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+}
+declare const CoachmarkBubbleHeader: {
+    ({ children, className, ...rest }: BubbleHeaderProps): React.JSX.Element;
+    displayName: string;
+};
+export { CoachmarkBubbleHeader };

package/es/components/Coachmark/next/Coachmark/CoachmarkBubble/CoachmarkBubbleHeader.js

@@ -0,0 +1,25 @@
+/**
+ * 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 { extends as _extends } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import cx from 'classnames';
+import { pkg } from '../../../../../settings.js';
+
+const CoachmarkBubbleHeader = _ref => {
+  let {
+    children,
+    className,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement("header", _extends({}, rest, {
+    className: cx(`${pkg.prefix}__bubble__header`, className)
+  }), children);
+};
+CoachmarkBubbleHeader.displayName = 'CoachmarkBubbleHeader';
+
+export { CoachmarkBubbleHeader };

package/es/components/Coachmark/next/Coachmark/CoachmarkBubble/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 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.
+ */
+export { CoachmarkBubble } from './CoachmarkBubble';
+export { CoachmarkBubbleHeader } from './CoachmarkBubbleHeader';

package/es/components/Coachmark/next/Coachmark/CoachmarkContent.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Copyright IBM Corp. 2024, 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 { FC, ForwardRefExoticComponent, ReactElement, ReactNode, RefAttributes } from 'react';
+import { ContentHeaderProps } from './ContentHeader';
+import { ContentBodyProps } from './ContentBody';
+export interface CoachmarkContentProps {
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * This is a required callback that has to return the content to render in the body section.
+     * It can be a single child or an array of children depending on your need
+     */
+    children: ReactElement | ReactNode;
+    /**
+     * Specify whether the component should be rendered on high-contrast.
+     */
+    highContrast?: boolean;
+    /**
+     * Specify whether a drop shadow should be rendered on the popover.
+     */
+    dropShadow?: boolean;
+}
+export type CoachmarkContentComponent = ForwardRefExoticComponent<CoachmarkContentProps & RefAttributes<HTMLDivElement>> & {
+    Header: FC<ContentHeaderProps>;
+    Body: FC<ContentBodyProps>;
+};
+declare const CoachmarkContent: CoachmarkContentComponent;
+export default CoachmarkContent;

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

@@ -0,0 +1,118 @@
+/**
+ * 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 { extends as _extends } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useContext, useRef, useEffect } from 'react';
+import PropTypes from '../../../../_virtual/index.js';
+import { pkg } from '../../../../settings.js';
+import { CoachmarkContext, blockClass } from './Coachmark.js';
+import { CoachmarkBubble } from './CoachmarkBubble/CoachmarkBubble.js';
+import './CoachmarkBubble/CoachmarkBubbleHeader.js';
+import ContentHeader from './ContentHeader.js';
+import ContentBody from './ContentBody.js';
+import cx from 'classnames';
+
+const CoachmarkContent = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className = '',
+    children,
+    highContrast,
+    dropShadow,
+    ...rest
+  } = props;
+  const coachmarkContentBlockClass = `${blockClass}--coachmark-content`;
+  const contentBodyClass = `${blockClass}--content-body`;
+  const {
+    align,
+    open,
+    setOpen,
+    triggerRef,
+    setContentRef,
+    floating
+  } = useContext(CoachmarkContext);
+  const targetId = open ? triggerRef?.current?.id : null;
+  const handleRef = useRef(null);
+  const bubbleRef = ref && typeof ref !== 'function' ? ref : handleRef;
+  useEffect(() => {
+    if (open && bubbleRef.current) {
+      requestAnimationFrame(() => {
+        const contentBody = bubbleRef.current.querySelector(`.${contentBodyClass}`);
+        if (contentBody) {
+          const firstFocusable = Array.from(contentBody.querySelectorAll('*')).find(el => el.tabIndex >= 0);
+          firstFocusable?.focus();
+        }
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+  useEffect(() => {
+    const handleOutsideClick = event => {
+      const targetElement = document.getElementById(targetId || '');
+      const bubbleElement = bubbleRef.current;
+      if (bubbleElement && !bubbleElement.contains(event.target) && targetElement && !targetElement.contains(event.target)) {
+        setOpen?.(false);
+      }
+    };
+    const handleKeyDown = e => {
+      if (e.key === 'Escape') {
+        setOpen?.(false);
+      }
+    };
+    if (open) {
+      document.addEventListener('click', handleOutsideClick);
+      window.addEventListener('keydown', handleKeyDown);
+    }
+    return () => {
+      document.removeEventListener('click', handleOutsideClick);
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, targetId, setOpen]);
+  useEffect(() => {
+    if (open && bubbleRef.current) {
+      const dragContainer = bubbleRef.current.querySelector(`.${pkg.prefix}__bubble`);
+      if (dragContainer instanceof HTMLElement) {
+        setContentRef(dragContainer);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, bubbleRef.current]);
+  return open && /*#__PURE__*/React__default.createElement("div", {
+    ref: bubbleRef
+  }, /*#__PURE__*/React__default.createElement(CoachmarkBubble, _extends({
+    className: cx(coachmarkContentBlockClass, className),
+    highContrast: highContrast,
+    dropShadow: dropShadow,
+    align: align,
+    open: open,
+    target: `#${targetId}`,
+    caret: floating
+  }, rest), children));
+});
+CoachmarkContent.Header = ContentHeader;
+CoachmarkContent.Body = ContentBody;
+CoachmarkContent.propTypes = {
+  /**
+   * This is a required callback that has to return the content to render in the body section.
+   * It can be a single child or an array of children depending on your need
+   */
+  children: PropTypes.node,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string,
+  /**
+   * Specify whether a drop shadow should be rendered on the popover.
+   */
+  dropShadow: PropTypes.bool,
+  /**
+   * Specify whether the component should be rendered on high-contrast.
+   */
+  highContrast: PropTypes.bool
+};
+
+export { CoachmarkContent as default };

package/es/components/Coachmark/next/Coachmark/ContentBody.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright IBM Corp. 2024, 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 React, { ReactNode } from 'react';
+export interface ContentBodyProps {
+    /**
+     * Provide the optional content for header section and will be render after header titles and before progress indicator.
+     * People can make use of this if they want to have custom header.
+     */
+    children: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+}
+export type EnrichedChildren = {
+    children: ReactNode;
+};
+declare const ContentBody: React.ForwardRefExoticComponent<ContentBodyProps & React.RefAttributes<HTMLDivElement>>;
+export default ContentBody;

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

@@ -0,0 +1,37 @@
+/**
+ * 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 React__default, { forwardRef } from 'react';
+import PropTypes from '../../../../_virtual/index.js';
+import cx from 'classnames';
+import { blockClass } from './Coachmark.js';
+
+const ContentBody = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className = '',
+    children,
+    ...rest
+  } = props;
+  const ContentBodyBlockClass = `${blockClass}--content-body`;
+  return /*#__PURE__*/React__default.createElement("div", {
+    ref: ref,
+    className: cx(ContentBodyBlockClass, className)
+  }, children);
+});
+ContentBody.propTypes = {
+  /**
+   * Provide the optional content for header section and will be render after header titles and before progress indicator.
+   * People can make use of this if they want to have custom header.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string
+};
+
+export { ContentBody as default };

package/es/components/Coachmark/next/Coachmark/ContentHeader.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface ContentHeaderProps {
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * Tooltip text and aria label for the Close button icon.
+     */
+    closeIconDescription?: string;
+    /**
+     * Tooltip text and aria label for the Drag button icon.
+     */
+    dragIconDescription?: string;
+    /**
+     * Optional contents of the Coachmark Header.
+     */
+    children?: string;
+}
+declare const ContentHeader: React.ForwardRefExoticComponent<ContentHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export default ContentHeader;

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

@@ -0,0 +1,89 @@
+/**
+ * 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 { extends as _extends } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { Button } from '@carbon/react';
+import React__default, { forwardRef, useContext, useRef, useEffect } from 'react';
+import PropTypes from '../../../../_virtual/index.js';
+import cx from 'classnames';
+import { CoachmarkContext, blockClass } from './Coachmark.js';
+import './CoachmarkBubble/CoachmarkBubble.js';
+import { CoachmarkBubbleHeader } from './CoachmarkBubble/CoachmarkBubbleHeader.js';
+import { Draggable, Close } from '@carbon/react/icons';
+import { makeDraggable } from '../../../../global/js/utils/makeDraggable/makeDraggable.js';
+
+const ContentHeader = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className = '',
+    closeIconDescription,
+    dragIconDescription,
+    children,
+    ...rest
+  } = props;
+  const {
+    setOpen,
+    onClose,
+    contentRef,
+    floating
+  } = useContext(CoachmarkContext);
+  const headerRef = useRef(null);
+  const dragRef = useRef(null);
+  const handleRef = ref || headerRef;
+  const contentHeaderBlockClass = `${blockClass}--content-header`;
+  const closeBubble = () => {
+    onClose?.();
+    setOpen(false);
+  };
+  useEffect(() => {
+    if (floating && contentRef && typeof handleRef === 'object' && handleRef !== null && 'current' in handleRef && handleRef.current && dragRef.current) {
+      makeDraggable({
+        el: contentRef,
+        dragHandle: handleRef.current,
+        focusableDragHandle: dragRef.current
+      });
+    }
+  });
+  return /*#__PURE__*/React__default.createElement(CoachmarkBubbleHeader, _extends({
+    ref: handleRef,
+    className: cx(contentHeaderBlockClass, className)
+  }, rest), floating && /*#__PURE__*/React__default.createElement(Button, {
+    kind: "ghost",
+    size: "sm",
+    ref: dragRef,
+    renderIcon: Draggable,
+    iconDescription: dragIconDescription,
+    hasIconOnly: true,
+    className: `${contentHeaderBlockClass}--drag-icon`
+  }), children, /*#__PURE__*/React__default.createElement(Button, {
+    kind: "ghost",
+    size: "sm",
+    renderIcon: Close,
+    iconDescription: closeIconDescription,
+    hasIconOnly: true,
+    onClick: closeBubble
+  }));
+});
+ContentHeader.propTypes = {
+  /**
+   * Optional contents of the Coachmark Header.
+   */
+  children: PropTypes.node,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string,
+  /**
+   * Tooltip text and aria label for the Close button icon.
+   */
+  closeIconDescription: PropTypes.string,
+  /**
+   * Tooltip text and aria label for the Drag button icon.
+   */
+  dragIconDescription: PropTypes.string
+};
+
+export { ContentHeader as default };

package/{lib/components/BigNumbers → es/components/Coachmark/next/Coachmark}/index.d.ts

@@ -1,7 +1,7 @@
 /**
- * Copyright IBM Corp. 2024, 2024
+ * Copyright IBM Corp. 2024, 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.
  */
-export { BigNumbers } from './BigNumbers';
+export { Coachmark } from './Coachmark';

package/es/components/CoachmarkBeacon/CoachmarkBeacon.js

@@ -38,7 +38,6 @@ let CoachmarkBeacon = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   }, getDevtoolsProps(componentName), {
     role: "tooltip"
   }), /*#__PURE__*/React__default.createElement("button", _extends({
-    tabIndex: 0,
     type: "button"
   }, buttonProps, {
     className: `${blockClass}__target`

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

@@ -189,9 +189,10 @@ const ConditionBuilderContent = _ref => {
       role: 'gridcell',
       'aria-label': addConditionGroupText
     }
-  })), showConditionGroupPreview && /*#__PURE__*/React__default.createElement(ConditionPreview, {
+  })), /*#__PURE__*/React__default.createElement(ConditionPreview, {
     previewType: "newGroup",
     colorIndex: getColorIndex(),
+    className: showConditionGroupPreview ? `${blockClass}__visible` : `${blockClass}__hidden`,
     group: {
       groupOperator: rootState?.operator,
       id: uuidv4()

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

@@ -51,6 +51,11 @@ const ConditionBuilderItem = _ref => {
     statementIdMap[statement.id] = statement.label;
   });
   const [invalidText, addConditionText, addPropertyText, addOperatorText, addValueText, labelText] = useTranslations(['invalidText', 'addConditionText', 'addPropertyText', 'addOperatorText', 'addValueText', label], statementIdMap);
+  const getCustomOperatorLabel = propertyLabel => {
+    return propertyLabel && config?.operators?.find(operator => {
+      return operator.id === propertyLabel;
+    });
+  };
   const getPropertyDetails = () => {
     const {
       property,
@@ -62,6 +67,12 @@ const ConditionBuilderItem = _ref => {
         isInvalid: true
       };
     }
+    if (rest['data-name'] == 'operatorField' && type == 'custom') {
+      return {
+        isInvalid: false,
+        propertyLabel: getCustomOperatorLabel(label)?.id
+      };
+    }
     const propertyId = rest['data-name'] == 'valueField' && type ? getValue(type, label, config) : labelText;
     return {
       isInvalid: false,
@@ -133,11 +144,6 @@ const ConditionBuilderItem = _ref => {
       manageInvalidSelection();
     }
   };
-  const getCustomOperatorLabel = propertyLabel => {
-    return propertyLabel && config?.operators?.find(operator => {
-      return operator.id === propertyLabel;
-    });
-  };
   const getLabel = () => {
     if (config?.operators && rest['data-name'] === 'operatorField') {
       return getCustomOperatorLabel(propertyLabel)?.label ?? addOperatorText;

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

@@ -23,7 +23,7 @@ const ConditionBuilderItemDate = _ref => {
   const DatePickerInputRef = useRef(null);
   const [startText, endText] = useTranslations(['startText', 'endText']);
   const [dateFromState, setDateFromState] = useState();
-  const dateFormat = config.dateFormat || 'm/d/Y';
+  const dateFormat = config?.dateFormat || 'm/d/Y';
   const {
     conditionBuilderRef
   } = useContext(ConditionBuilderContext);

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

@@ -24,19 +24,26 @@ const ConditionBuilderItemNumber = _ref => {
       value
     } = _ref2;
     if (value !== '' && !isNaN(value) && checkIfValid(value)) {
-      onChange(`${value} ${config.unit ?? ''}`);
+      onChange(config?.unit ? `${value} ${config.unit}` : String(value));
     } else {
       onChange('INVALID');
     }
   };
   const checkIfValid = value => {
-    if (config.max !== undefined && config.min === undefined && value > config.max) {
+    if (!config) {
+      return true;
+    }
+    const {
+      min,
+      max
+    } = config;
+    if (max !== undefined && min === undefined && value > max) {
       return false;
     }
-    if (config.min !== undefined && config.max === undefined && value < config.min) {
+    if (min !== undefined && max === undefined && value < min) {
       return false;
     }
-    if (config.max !== undefined && config.min !== undefined && (value > config.max || value < config.min)) {
+    if (min !== undefined && max !== undefined && (value < min || value > max)) {
       return false;
     }
     return true;

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

@@ -28,7 +28,7 @@ const ItemOption = _ref => {
   const {
     conditionBuilderRef
   } = useContext(ConditionBuilderContext);
-  const allOptions = config.options;
+  const allOptions = config?.options;
   const [searchValue, setSearchValue] = useState('');
   const selection = conditionState.value;
   const filteredItems = searchValue ? allOptions?.filter(opt => opt.label?.toLowerCase().includes(searchValue.toLowerCase())) : allOptions;
@@ -95,7 +95,7 @@ const ItemOption = _ref => {
       className: `${blockClass}__item-option__option-content`
     }, /*#__PURE__*/React__default.createElement("span", {
       className: `${blockClass}__item-option__option-label`
-    }, Icon && /*#__PURE__*/React__default.createElement(Icon, null), config.isStatement ? getStatementContent(option) : option.label), isSelected && /*#__PURE__*/React__default.createElement(Checkmark, {
+    }, Icon && /*#__PURE__*/React__default.createElement(Icon, null), config?.isStatement ? getStatementContent(option) : option.label), isSelected && /*#__PURE__*/React__default.createElement(Checkmark, {
       className: `${blockClass}__checkmark`
     })));
   })));

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

@@ -32,7 +32,7 @@ const ItemOptionForValueField = _ref => {
     conditionBuilderRef
   } = useContext(ConditionBuilderContext);
   const contentRef = useRef(null);
-  const [allOptions, setAllOptions] = useState(config.options);
+  const [allOptions, setAllOptions] = useState(config?.options);
   const [searchValue, setSearchValue] = useState('');
   const filteredItems = allOptions?.filter(opt => opt.label.toLowerCase().includes(searchValue.toLowerCase()));
   const selection = Array.isArray(conditionState.value) ? conditionState.value : conditionState.value !== undefined ? [conditionState.value] : [];