carbon-addons-iot-react 4.2.0 → 4.2.2

package/umd/carbon-addons-iot-react.js

@@ -2588,6 +2588,15 @@
     } else {
       enabled$1.enableExperimentalTileContrast = false;
     }
+    if (process.env.CARBON_ENABLE_TILE_CONTRAST) {
+      if (process.env.CARBON_ENABLE_TILE_CONTRAST === 'true') {
+        enabled$1.enableTileContrast = true;
+      } else {
+        enabled$1.enableTileContrast = false;
+      }
+    } else {
+      enabled$1.enableTileContrast = false;
+    }
     if (process.env.CARBON_ENABLE_V12_TILE_DEFAULT_ICONS) {
       if (process.env.CARBON_ENABLE_V12_TILE_DEFAULT_ICONS === 'true') {
         enabled$1.enableV12TileDefaultIcons = true;
@@ -2642,6 +2651,15 @@
     } else {
       enabled$1.enableExperimentalFocusWrapWithoutSentinels = false;
     }
+    if (process.env.CARBON_ENABLE_FOCUS_WRAP_WITHOUT_SENTINELS) {
+      if (process.env.CARBON_ENABLE_FOCUS_WRAP_WITHOUT_SENTINELS === 'true') {
+        enabled$1.enableFocusWrapWithoutSentinels = true;
+      } else {
+        enabled$1.enableFocusWrapWithoutSentinels = false;
+      }
+    } else {
+      enabled$1.enableFocusWrapWithoutSentinels = false;
+    }
     if (process.env.CARBON_ENABLE_DIALOG_ELEMENT) {
       if (process.env.CARBON_ENABLE_DIALOG_ELEMENT === 'true') {
         enabled$1.enableDialogElement = true;
@@ -2678,21 +2696,33 @@
     } else {
       enabled$1.enableEnhancedFileUploader = false;
     }
+    if (process.env.CARBON_ENABLE_PRESENCE) {
+      if (process.env.CARBON_ENABLE_PRESENCE === 'true') {
+        enabled$1.enablePresence = true;
+      } else {
+        enabled$1.enablePresence = false;
+      }
+    } else {
+      enabled$1.enablePresence = false;
+    }
   } catch (error) {
     enabled$1.enableCssCustomProperties = false;
     enabled$1.enableCssGrid = false;
     enabled$1.enableV11Release = true;
     enabled$1.enableExperimentalTileContrast = false;
+    enabled$1.enableTileContrast = false;
     enabled$1.enableV12TileDefaultIcons = false;
     enabled$1.enableV12TileRadioIcons = false;
     enabled$1.enableV12Overflowmenu = false;
     enabled$1.enableTreeviewControllable = false;
     enabled$1.enableV12StructuredListVisibleIcons = false;
     enabled$1.enableExperimentalFocusWrapWithoutSentinels = false;
+    enabled$1.enableFocusWrapWithoutSentinels = false;
     enabled$1.enableDialogElement = false;
     enabled$1.enableV12DynamicFloatingStyles = false;
     enabled$1.enableV12ToggleReducedLabelSpacing = false;
     enabled$1.enableEnhancedFileUploader = false;
+    enabled$1.enablePresence = false;
   }
   var featureFlagInfo = [{
     name: "enable-css-custom-properties",
@@ -2708,8 +2738,12 @@
     enabled: enabled$1.enableV11Release
   }, {
     name: "enable-experimental-tile-contrast",
-    description: "Enable the experimental tile improved contrast styles\n",
+    description: "Deprecated, use enable-tile-contrast instead\n",
     enabled: enabled$1.enableExperimentalTileContrast
+  }, {
+    name: "enable-tile-contrast",
+    description: "Enable the experimental tile improved contrast styles\n",
+    enabled: enabled$1.enableTileContrast
   }, {
     name: "enable-v12-tile-default-icons",
     description: "Enable rendering of default icons in the tile components\n",
@@ -2732,8 +2766,12 @@
     enabled: enabled$1.enableV12StructuredListVisibleIcons
   }, {
     name: "enable-experimental-focus-wrap-without-sentinels",
-    description: "Enable the new focus wrap behavior that doesn't use sentinel nodes\n",
+    description: "Deprecated, use enable-focus-wrap-without-sentinels instead\n",
     enabled: enabled$1.enableExperimentalFocusWrapWithoutSentinels
+  }, {
+    name: "enable-focus-wrap-without-sentinels",
+    description: "Enable the new focus wrap behavior that doesn't use sentinel nodes\n",
+    enabled: enabled$1.enableFocusWrapWithoutSentinels
   }, {
     name: "enable-dialog-element",
     description: "Enable components to utilize the native dialog element\n",
@@ -2750,6 +2788,10 @@
     name: "enable-enhanced-file-uploader",
     description: "Enable enhanced functionality for the FileUploader component, including richer callback data and expanded trigger events for onChange and onDelete.\n",
     enabled: enabled$1.enableEnhancedFileUploader
+  }, {
+    name: "enable-presence",
+    description: "Enable components to remain unmounted in closed state and mount in open state.\n",
+    enabled: enabled$1.enablePresence
   }];
 
   function _arrayLikeToArray$a(r, a) {
@@ -3249,6 +3291,7 @@
       throw new Error('`warning(condition, message)` requires a warning ' + 'format argument');
     }
     if (!condition) {
+      // eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20452
       console.warn('Warning: ' + message);
     }
   } ;
@@ -4086,6 +4129,7 @@
         }
         placeInProgressRef.current = false;
       }
+      // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
     }, [floatingPosition, onPlace]);
 
     // Attach a resize listener.
@@ -4096,11 +4140,13 @@
       return () => {
         resizeHandler.remove();
       };
+      // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
     }, [triggerRef, menuOffset, menuDirection, flipped, target, updateOrientation]);
 
     // Update menu position when key props change.
     React$1.useEffect(() => {
       updateMenuPosition();
+      // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
     }, [menuOffset, menuDirection, flipped, triggerRef, target, updateOrientation]);
 
     /**
@@ -4159,10 +4205,15 @@
         });
       }
     };
-    const focusTrapWithoutSentinels = enabled('enable-experimental-focus-wrap-without-sentinels');
+    const deprecatedFlag = enabled('enable-experimental-focus-wrap-without-sentinels');
+    const focusTrapWithoutSentinelsFlag = enabled('enable-focus-wrap-without-sentinels');
+    const focusTrapWithoutSentinels = deprecatedFlag || focusTrapWithoutSentinelsFlag;
     if (typeof document !== 'undefined') {
       const portalTarget = target ? target() : document.body;
-      return /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React$1.createElement("div", {
+      return /*#__PURE__*/ReactDOM.createPortal(
+      /*#__PURE__*/
+      // eslint-disable-next-line  jsx-a11y/no-static-element-interactions  -- https://github.com/carbon-design-system/carbon/issues/20452
+      React$1.createElement("div", {
         onBlur: focusTrap && !focusTrapWithoutSentinels ? handleBlur : undefined,
         onKeyDown: focusTrapWithoutSentinels ? handleKeyDown : undefined
       }, !focusTrapWithoutSentinels && /*#__PURE__*/React$1.createElement("span", {
@@ -4224,18 +4275,22 @@
    */
 
   /**
-   * @param {...Ref<Element>} refs List of React refs to merge.
-   * @returns {Ref<Element>} Merged React ref.
+   * @param refs Refs to merge.
+   * @returns Merged ref.
    */
-  const mergeRefs$1 = (...refs) => el => {
-    refs.forEach(ref => {
-      // https://github.com/facebook/react/issues/13029#issuecomment-410002316
-      if (typeof ref === 'function') {
-        ref(el);
-      } else if (Object(ref) === ref) {
-        ref.current = el;
-      }
-    });
+  const mergeRefs$1 = (...refs) => {
+    return value => {
+      refs.forEach(ref => {
+        if (!ref) return;
+
+        // https://github.com/facebook/react/issues/13029#issuecomment-410002316
+        if (typeof ref === 'function') {
+          ref(value);
+        } else if (typeof ref === 'object' && 'current' in ref) {
+          ref.current = value;
+        }
+      });
+    };
   };
 
   /**
@@ -4264,10 +4319,10 @@
 
 
   const didWarnAboutDeprecation = {};
-  function deprecateValuesWithin(propType, allowedValues, propMappingFunction) {
-    return function checker(props, propName, componentName, ...rest) {
-      if (props[propName] === undefined) {
-        return;
+  const deprecateValuesWithin = (propType, allowedValues, propMappingFunction) => {
+    return (props, propName, componentName, ...rest) => {
+      if (typeof props[propName] === 'undefined') {
+        return null;
       }
       if (!didWarnAboutDeprecation[componentName] || !didWarnAboutDeprecation[componentName][propName]) {
         didWarnAboutDeprecation[componentName] = {
@@ -4283,7 +4338,7 @@
       }
       return propType(props, propName, componentName, ...rest);
     };
-  }
+  };
 
   /**
    * Copyright IBM Corp. 2016, 2023
@@ -4313,6 +4368,7 @@
    * node, assigns that node to every ref in the array.
    */
   const useMergedRefs = refs => {
+    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
     const memoizedRefs = React$1.useMemo(() => refs, refs);
     return React$1.useCallback(node => {
       memoizedRefs.forEach(ref => {
@@ -7820,6 +7876,7 @@
    */
 
 
+  // TODO: Can this variable be deleted now? It isn't used anywhere.
   /**
    * Our FeatureFlagContext is used alongside the FeatureFlags component to enable
    * or disable feature flags in a given React tree
@@ -7836,9 +7893,11 @@
     enableV12Overflowmenu: PropTypes.bool,
     enableTreeviewControllable: PropTypes.bool,
     enableExperimentalFocusWrapWithoutSentinels: PropTypes.bool,
+    enableFocusWrapWithoutSentinels: PropTypes.bool,
     enableDialogElement: PropTypes.bool,
     enableV12DynamicFloatingStyles: PropTypes.bool,
-    enableEnhancedFileUploader: PropTypes.bool
+    enableEnhancedFileUploader: PropTypes.bool,
+    enablePresence: PropTypes.bool
   });
 
   /**
@@ -7881,17 +7940,21 @@
     as: BaseComponent = 'span',
     autoAlign = false,
     autoAlignBoundary,
+    backgroundToken = 'layer',
     caret = isTabTip ? false : true,
     className: customClassName,
     children,
+    border = false,
     dropShadow = true,
     highContrast = false,
     onRequestClose,
     open,
     alignmentAxisOffset,
     ...rest
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
   },
   //this is a workaround, have to come back and fix this.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
   forwardRef) {
     const prefix = usePrefix();
     const floating = React$1.useRef(null);
@@ -7903,8 +7966,12 @@
     // The `Popover` should close whenever it and its children loses focus
     useEvent(popover, 'focusout', event => {
       const relatedTarget = event.relatedTarget;
-
-      // No relatedTarget, focus moved to nowhere, so close the popover
+      if (isTabTip) {
+        if (relatedTarget && !popover.current?.contains(relatedTarget)) {
+          onRequestClose?.();
+        }
+        return;
+      }
       if (!relatedTarget) {
         onRequestClose?.();
         return;
@@ -7929,7 +7996,12 @@
     // needs to be placed 1px further outside the popover content. To do so,
     // we look to see if any of the children has a className containing "slug"
     const initialCaretHeight = React$1.Children.toArray(children).some(x => {
-      return x?.props?.className?.includes('slug') || x?.props?.className?.includes('ai-label');
+      return (
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
+        x?.props?.className?.includes('slug') ||
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
+        x?.props?.className?.includes('ai-label')
+      );
     }) ? 7 : 6;
     // These defaults match the defaults defined in packages/styles/scss/components/popover/_popover.scss
     const popoverDimensions = React$1.useRef({
@@ -7980,7 +8052,8 @@
         fallbackAxisSideDirection: 'start',
         boundary: autoAlignBoundary
       }), arrow({
-        element: caretRef
+        element: caretRef,
+        padding: 16
       }), autoAlign && hide$1()],
       whileElementsMounted: autoUpdate
     } : {}
@@ -8041,13 +8114,16 @@
       [`${prefix}--popover-container`]: true,
       [`${prefix}--popover--caret`]: caret,
       [`${prefix}--popover--drop-shadow`]: dropShadow,
+      [`${prefix}--popover--border`]: border,
       [`${prefix}--popover--high-contrast`]: highContrast,
       [`${prefix}--popover--open`]: open,
       [`${prefix}--popover--auto-align ${prefix}--autoalign`]: enableFloatingStyles,
       [`${prefix}--popover--${currentAlignment}`]: true,
-      [`${prefix}--popover--tab-tip`]: isTabTip
+      [`${prefix}--popover--tab-tip`]: isTabTip,
+      [`${prefix}--popover--background-token__background`]: backgroundToken === 'background' && !highContrast
     }, customClassName);
     const mappedChildren = React$1.Children.map(children, child => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
       const item = child;
       const displayName = item?.type?.displayName;
 
@@ -8062,9 +8138,13 @@
       const isTriggerComponent = enableFloatingStyles && displayName && ['ToggletipButton'].includes(displayName);
       const isAllowedTriggerComponent = enableFloatingStyles && !['ToggletipContent', 'PopoverContent'].includes(displayName);
       if (/*#__PURE__*/React$1.isValidElement(item) && (isTriggerElement || isTriggerComponent || isAllowedTriggerComponent)) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
         const className = item?.props?.className;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
         const ref = (item?.props).ref;
         const tabTipClasses = classnames(`${prefix}--popover--tab-tip__button`, className);
+
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
         return /*#__PURE__*/React$1.cloneElement(item, {
           className: isTabTip && item?.type === 'button' ? tabTipClasses : className || '',
           // With cloneElement, if you pass a `ref`, it overrides the original ref.
@@ -8152,6 +8232,10 @@
      * @see https://github.com/carbon-design-system/carbon/issues/18714
      */
     autoAlign: PropTypes.bool,
+    /**
+     * Specify the background token to use. Default is 'layer'.
+     */
+    backgroundToken: PropTypes.oneOf(['layer', 'background']),
     /**
      * Specify a bounding element to be used for autoAlign calculations. The viewport is used by default. This prop is currently experimental and is subject to future changes.
      */
@@ -8165,6 +8249,10 @@
      * Specify whether a caret should be rendered
      */
     caret: PropTypes.bool,
+    /**
+     * Specify whether a border should be rendered on the popover
+     */
+    border: PropTypes.bool,
     /**
      * Provide elements to be rendered inside of the component
      */
@@ -8196,9 +8284,7 @@
      */
     open: PropTypes.bool.isRequired
   };
-  function PopoverContentRenderFunction(
-  // eslint-disable-next-line react/prop-types
-  {
+  function PopoverContentRenderFunction({
     className,
     children,
     ...rest
@@ -8422,13 +8508,16 @@
       /*
       // eslint-disable-next-line react-hooks/rules-of-hooks
       */
+      // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
       React$1.useEffect(() => {
         const node = ref.current ? getInteractiveContent(ref.current) : false;
         if (node) {
           const errorMessage = `Error: ${message}.\n\nInstead found: ${node.outerHTML}`;
+          // eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20452
           console.error(errorMessage);
           throw new Error(errorMessage);
         }
+        // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
       }, []);
     }
   };
@@ -8496,6 +8585,7 @@
    * Event types that trigger a "drag" to stop.
    */
   const DRAG_STOP_EVENT_TYPES = new Set(['mouseup', 'touchend', 'touchcancel']);
+  // eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20452
   const Tooltip$2 = /*#__PURE__*/React$1.forwardRef(({
     as,
     align = 'top',
@@ -8542,6 +8632,8 @@
       'aria-labelledby': labelledBy,
       'aria-describedby': describedBy
     };
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
     function getChildEventHandlers(childProps) {
       const eventHandlerFunctions = Object.keys(triggerProps).filter(prop => prop.startsWith('on'));
       const eventHandlers = {};
@@ -8628,29 +8720,33 @@
         });
       };
     }, [isDragging, onDragStop]);
-    return /*#__PURE__*/React$1.createElement(Popover, _extends$2({
-      as: as,
-      ref: ref
-    }, rest, {
-      align: align,
-      className: classnames(`${prefix}--tooltip`, customClassName),
-      dropShadow: dropShadow,
-      highContrast: highContrast,
-      onKeyDown: onKeyDown,
-      onMouseLeave: onMouseLeave,
-      open: open
-    }), /*#__PURE__*/React$1.createElement("div", {
-      className: `${prefix}--tooltip-trigger__wrapper`
-    }, typeof child !== 'undefined' ? /*#__PURE__*/React$1.cloneElement(child, {
-      ...triggerProps,
-      ...getChildEventHandlers(child.props)
-    }) : null), /*#__PURE__*/React$1.createElement(PopoverContent, {
-      "aria-hidden": open ? 'false' : 'true',
-      className: `${prefix}--tooltip-content`,
-      id: id,
-      onMouseEnter: onMouseEnter,
-      role: "tooltip"
-    }, label || description));
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
+      React$1.createElement(Popover, _extends$2({
+        as: as,
+        ref: ref
+      }, rest, {
+        align: align,
+        className: classnames(`${prefix}--tooltip`, customClassName),
+        dropShadow: dropShadow,
+        highContrast: highContrast,
+        onKeyDown: onKeyDown,
+        onMouseLeave: onMouseLeave,
+        open: open
+      }), /*#__PURE__*/React$1.createElement("div", {
+        className: `${prefix}--tooltip-trigger__wrapper`
+      }, typeof child !== 'undefined' ? /*#__PURE__*/React$1.cloneElement(child, {
+        ...triggerProps,
+        ...getChildEventHandlers(child.props)
+      }) : null), /*#__PURE__*/React$1.createElement(PopoverContent, {
+        "aria-hidden": open ? 'false' : 'true',
+        className: `${prefix}--tooltip-content`,
+        id: id,
+        onMouseEnter: onMouseEnter,
+        role: "tooltip"
+      }, label || description))
+    );
   });
   Tooltip$2.propTypes = {
     /**
@@ -8888,7 +8984,8 @@
 
 
   const IconButtonKinds = ['primary', 'secondary', 'ghost', 'tertiary'];
-  const IconButton = /*#__PURE__*/React$1.forwardRef(function IconButton({
+  // eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20452
+  const IconButton = /*#__PURE__*/React$1.forwardRef(({
     align,
     autoAlign = false,
     badgeCount,
@@ -8907,12 +9004,13 @@
     size,
     isSelected,
     ...rest
-  }, ref) {
+  }, ref) => {
     const prefix = usePrefix();
     const tooltipClasses = classnames(wrapperClasses, `${prefix}--icon-tooltip`, {
       [`${prefix}--icon-tooltip--disabled`]: disabled
     });
     if (badgeCount && (kind !== 'ghost' || size !== 'lg')) {
+      // eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20452
       console.warn("The prop BadgeCount must be used with hasIconOnly=true, kind='ghost' and size='lg'");
     }
     const badgeId = useId('badge-indicator');
@@ -9075,6 +9173,7 @@
       /*
       // eslint-disable-next-line react-hooks/rules-of-hooks
       */
+      // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
       useWindowEvent('click', event => {
         const {
           target
@@ -9136,6 +9235,7 @@
     {
       !(triggerButtonPositionProp && triggerButtonPositionFactor) ? browser(false, '[OverflowMenu] wrong floating menu direction: `%s`', direction)  : void 0;
     }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
     const {
       offsetWidth: menuWidth,
       offsetHeight: menuHeight
@@ -9158,6 +9258,7 @@
         };
     }
   };
+  // eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20452
   const OverflowMenu$1 = /*#__PURE__*/React$1.forwardRef(({
     align,
     ['aria-label']: ariaLabel = null,
@@ -9239,8 +9340,7 @@
       if (onCloseMenu) {
         onCloseMenu();
       }
-      onClose();
-    }, [onClose]);
+    }, []);
     const closeMenuAndFocus = React$1.useCallback(() => {
       const wasClicked = click;
       const wasOpen = open;
@@ -9532,9 +9632,9 @@
      */
     selectorPrimaryFocus: PropTypes.string,
     /**
-     * Specify the size of the OverflowMenu. Currently supports either `sm`, `md` (default) or `lg` as an option.
+     * Specify the size of the OverflowMenu. Currently supports either `xs`, `sm`, `md` (default) or `lg` as an option.
      */
-    size: PropTypes.oneOf(['sm', 'md', 'lg'])
+    size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg'])
   };
 
   var defineProperty$c = objectDefineProperty.f;