@carbon/react 1.85.0-rc.0 → 1.85.0

package/es/components/TreeView/TreeNode.js

@@ -9,14 +9,83 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import { CaretDown } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useRef, useState, useEffect, useCallback } from 'react';
 import { ArrowLeft, ArrowRight, Enter, Space } from '../../internal/keyboard/keys.js';
 import { matches, match } from '../../internal/keyboard/match.js';
 import { useControllableState } from '../../internal/useControllableState.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useId } from '../../internal/useId.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
+import { IconButton } from '../IconButton/index.js';
 
+const extractTextContent = node => {
+  if (node === null || node === undefined) return '';
+  if (typeof node === 'string') return node;
+  if (typeof node === 'number') return String(node);
+  if (typeof node === 'boolean') return String(node);
+  if (Array.isArray(node)) {
+    return node.map(extractTextContent).join('');
+  }
+  if (/*#__PURE__*/React.isValidElement(node)) {
+    const element = node;
+    const children = element.props.children;
+    return extractTextContent(children);
+  }
+  return '';
+};
+const useEllipsisCheck = (label, detailsWrapperRef) => {
+  const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
+  const labelTextRef = useRef(null);
+  const checkEllipsis = useCallback(() => {
+    const element = labelTextRef.current;
+    if (!element) {
+      setIsEllipsisApplied(false);
+      return;
+    }
+    if (element.offsetWidth === 0) {
+      setIsEllipsisApplied(false);
+      return;
+    }
+    const checkElement = detailsWrapperRef.current || element;
+    if (checkElement && checkElement.offsetWidth > 0) {
+      const isTextTruncated = element.scrollWidth > checkElement.offsetWidth;
+      setIsEllipsisApplied(isTextTruncated);
+    } else {
+      setIsEllipsisApplied(false);
+    }
+  }, [detailsWrapperRef]);
+  useEffect(() => {
+    let animationFrameId;
+    animationFrameId = requestAnimationFrame(checkEllipsis);
+    let resizeObserver;
+    if (typeof window !== 'undefined' && typeof window.ResizeObserver !== 'undefined' && labelTextRef.current) {
+      resizeObserver = new window.ResizeObserver(() => {
+        requestAnimationFrame(checkEllipsis);
+      });
+      resizeObserver.observe(labelTextRef.current);
+      if (detailsWrapperRef.current) {
+        resizeObserver.observe(detailsWrapperRef.current);
+      }
+    }
+    return () => {
+      cancelAnimationFrame(animationFrameId);
+      if (resizeObserver) {
+        if (labelTextRef.current) {
+          resizeObserver.unobserve(labelTextRef.current);
+        }
+        if (detailsWrapperRef.current) {
+          resizeObserver.unobserve(detailsWrapperRef.current);
+        }
+        resizeObserver.disconnect();
+      }
+    };
+  }, [checkEllipsis, detailsWrapperRef]);
+  return {
+    labelTextRef,
+    isEllipsisApplied,
+    tooltipText: extractTextContent(label)
+  };
+};
 const TreeNode = /*#__PURE__*/React.forwardRef(({
   active,
   children,
@@ -35,11 +104,18 @@ const TreeNode = /*#__PURE__*/React.forwardRef(({
   selected: propSelected,
   value,
   href,
+  align = 'bottom',
+  autoAlign = false,
   ...rest
 }, forwardedRef) => {
-  // These are provided by the parent TreeView component
   const depth = propDepth;
   const selected = propSelected;
+  const detailsWrapperRef = useRef(null);
+  const {
+    labelTextRef,
+    isEllipsisApplied,
+    tooltipText
+  } = useEllipsisCheck(label, detailsWrapperRef);
   const enableTreeviewControllable = useFeatureFlag('enable-treeview-controllable');
   const {
     current: id
@@ -61,6 +137,25 @@ const TreeNode = /*#__PURE__*/React.forwardRef(({
   const currentNode = useRef(null);
   const currentNodeLabel = useRef(null);
   const prefix = usePrefix();
+  const renderLabelText = () => {
+    if (isEllipsisApplied && tooltipText) {
+      return /*#__PURE__*/React.createElement(IconButton, {
+        label: tooltipText,
+        kind: "ghost",
+        align: align,
+        autoAlign: autoAlign,
+        className: `${prefix}--tree-node__label__text-button`,
+        wrapperClasses: `${prefix}--popover-container`
+      }, /*#__PURE__*/React.createElement("span", {
+        ref: labelTextRef,
+        className: `${prefix}--tree-node__label__text`
+      }, label));
+    }
+    return /*#__PURE__*/React.createElement("span", {
+      ref: labelTextRef,
+      className: `${prefix}--tree-node__label__text`
+    }, label);
+  };
   const setRefs = element => {
     currentNode.current = element;
     if (typeof forwardedRef === 'function') {
@@ -300,7 +395,7 @@ const TreeNode = /*#__PURE__*/React.forwardRef(({
         ref: currentNodeLabel
       }, Icon && /*#__PURE__*/React.createElement(Icon, {
         className: `${prefix}--tree-node__icon`
-      }), label)));
+      }), renderLabelText())));
     } else {
       return /*#__PURE__*/React.createElement("li", _extends({}, treeNodeProps, {
         ref: setRefs
@@ -309,7 +404,7 @@ const TreeNode = /*#__PURE__*/React.forwardRef(({
         ref: currentNodeLabel
       }, Icon && /*#__PURE__*/React.createElement(Icon, {
         className: `${prefix}--tree-node__icon`
-      }), label));
+      }), renderLabelText()));
     }
   }
   if (href) {
@@ -332,10 +427,11 @@ const TreeNode = /*#__PURE__*/React.forwardRef(({
     }, /*#__PURE__*/React.createElement(CaretDown, {
       className: toggleClasses
     })), /*#__PURE__*/React.createElement("span", {
-      className: `${prefix}--tree-node__label__details`
+      className: `${prefix}--tree-node__label__details`,
+      ref: detailsWrapperRef
     }, Icon && /*#__PURE__*/React.createElement(Icon, {
       className: `${prefix}--tree-node__icon`
-    }), label))), /*#__PURE__*/React.createElement("ul", {
+    }), renderLabelText()))), /*#__PURE__*/React.createElement("ul", {
       id: `${id}-subtree`,
       role: "group",
       className: cx(`${prefix}--tree-node__children`, {
@@ -358,10 +454,11 @@ const TreeNode = /*#__PURE__*/React.forwardRef(({
     }, /*#__PURE__*/React.createElement(CaretDown, {
       className: toggleClasses
     })), /*#__PURE__*/React.createElement("span", {
-      className: `${prefix}--tree-node__label__details`
+      className: `${prefix}--tree-node__label__details`,
+      ref: detailsWrapperRef
     }, Icon && /*#__PURE__*/React.createElement(Icon, {
       className: `${prefix}--tree-node__icon`
-    }), label)), /*#__PURE__*/React.createElement("ul", {
+    }), renderLabelText())), /*#__PURE__*/React.createElement("ul", {
       id: `${id}-subtree`,
       role: "group",
       className: cx(`${prefix}--tree-node__children`, {
@@ -444,7 +541,17 @@ TreeNode.propTypes = {
   /**
    * Optional: The URL the TreeNode is linking to
    */
-  href: PropTypes.string
+  href: PropTypes.string,
+  /**
+   * Specify how the tooltip should align when text is truncated
+   */
+  align: PropTypes.oneOf(['top', 'bottom', 'left', 'right', 'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
+  /**
+   * **Experimental**: Will attempt to automatically align the floating
+   * element to avoid collisions with the viewport and being clipped by
+   * ancestor elements.
+   */
+  autoAlign: PropTypes.bool
 };
 TreeNode.displayName = 'TreeNode';
 

package/lib/components/DatePicker/DatePicker.d.ts

@@ -29,7 +29,7 @@ export interface DatePickerProps {
     /**
      * The DOM element the flatpickr should be inserted into `<body>` by default.
      */
-    appendTo?: object;
+    appendTo?: HTMLElement;
     /**
      * The child nodes.
      */

package/lib/components/DatePicker/DatePicker.js

@@ -352,7 +352,7 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
       parseDate: parseDate,
       plugins: [datePickerType === 'range' ? rangePlugin["default"]({
         input: endInputField.current
-      }) : () => {}, appendTo ? appendToPlugin["default"]({
+      }) : () => {}, appendTo ? appendToPlugin.appendToPlugin({
         appendTo
       }) : () => {}, carbonFlatpickrMonthSelectPlugin({
         selectorFlatpickrMonthYearContainer: '.flatpickr-current-month',

package/lib/components/DatePicker/plugins/appendToPlugin.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright IBM Corp. 2019, 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 type { Plugin } from 'flatpickr/dist/types/options';
+interface AppendToPluginConfig {
+    appendTo: HTMLElement;
+}
+export declare const appendToPlugin: (config: AppendToPluginConfig) => Plugin;
+export {};

package/lib/components/DatePicker/plugins/appendToPlugin.js

@@ -9,13 +9,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-/**
- * @param {object} config Plugin configuration.
- * @returns {Plugin} A Flatpickr plugin to put adjust the position of calendar dropdown.
- */
-var carbonFlatpickrAppendToPlugin = config => fp => {
+const appendToPlugin = config => fp => {
   /**
-   * Adjusts the floating menu position after Flatpicker sets it.
+   * Adjusts the floating menu position after Flatpickr sets it.
    */
   const handlePreCalendarPosition = () => {
     Promise.resolve().then(() => {
@@ -24,9 +20,10 @@ var carbonFlatpickrAppendToPlugin = config => fp => {
         config: fpConfig,
         _positionElement: positionElement
       } = fp;
-      const {
-        appendTo
-      } = fpConfig;
+      const appendTo = fpConfig.appendTo;
+      if (!appendTo) {
+        throw new Error('[appendToPlugin] Missing `appendTo` element.');
+      }
       const {
         left: containerLeft,
         top: containerTop
@@ -35,8 +32,8 @@ var carbonFlatpickrAppendToPlugin = config => fp => {
         left: refLeft,
         bottom: refBottom
       } = positionElement.getBoundingClientRect();
-      if ((appendTo !== appendTo.ownerDocument.body || containerLeft !== 0 || containerTop !== 0) && appendTo.ownerDocument.defaultView.getComputedStyle(appendTo).getPropertyValue('position') === 'static') {
-        throw new Error('Floating menu container must not have `position:static`.');
+      if ((appendTo !== appendTo.ownerDocument.body || containerLeft !== 0 || containerTop !== 0) && appendTo.ownerDocument.defaultView?.getComputedStyle(appendTo).getPropertyValue('position') === 'static') {
+        throw new Error('Floating menu container must not have `position: static`.');
       }
       // `2` for negative margin on calendar dropdown
       calendarContainer.style.top = `${refBottom - containerTop + 2}px`;
@@ -57,4 +54,4 @@ var carbonFlatpickrAppendToPlugin = config => fp => {
   };
 };
 
-exports["default"] = carbonFlatpickrAppendToPlugin;
+exports.appendToPlugin = appendToPlugin;

package/lib/components/Menu/Menu.js

@@ -254,8 +254,13 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu({
     return [fitValue(ranges.x, 'x') ?? -1, fitValue(ranges.y, 'y') ?? -1];
   }
   React.useEffect(() => {
-    if (open && focusableItems.length > 0) {
-      focusItem();
+    if (open) {
+      const raf = requestAnimationFrame(() => {
+        if (focusableItems.length > 0) {
+          focusItem();
+        }
+      });
+      return () => cancelAnimationFrame(raf);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open, focusableItems]);

package/lib/components/Menu/MenuItem.js

@@ -117,7 +117,11 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem({
   function handleKeyDown(e) {
     if (hasChildren && match.match(e, keys.ArrowRight)) {
       openSubmenu();
+      requestAnimationFrame(() => {
+        refs.floating.current?.focus();
+      });
       e.stopPropagation();
+      e.preventDefault();
     }
     pendingKeyboardClick.current = keyboardClickEvent(e);
     if (rest.onKeyDown) {
@@ -134,11 +138,18 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem({
     [`${prefix}--menu-item--disabled`]: isDisabled,
     [`${prefix}--menu-item--danger`]: isDanger
   });
-
+  const [isFocusable, setIsFocusable] = React.useState(false);
   // on first render, register this menuitem in the context's state
   // (used for keyboard navigation)
   React.useEffect(() => {
     registerItem();
+
+    // Detects if this is the first focusable item
+    const currentItems = context.state.items;
+    if (!disabled && menuItem.current && currentItems.length === 0) {
+      setIsFocusable(true);
+    }
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -177,7 +188,7 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem({
   }, rest, {
     ref: ref,
     className: classNames,
-    tabIndex: -1,
+    tabIndex: isFocusable ? 0 : -1,
     "aria-disabled": isDisabled ?? undefined,
     "aria-haspopup": hasChildren ?? undefined,
     "aria-expanded": hasChildren ? submenuOpen : undefined,

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -16,7 +16,7 @@ var Downshift = require('downshift');
 var isEqual = require('react-fast-compare');
 var PropTypes = require('prop-types');
 var React = require('react');
-var filter = require('../ComboBox/tools/filter.js');
+var filter = require('./filter.js');
 var MultiSelectPropTypes = require('./MultiSelectPropTypes.js');
 var index$1 = require('../ListBox/index.js');
 var ListBoxSelection = require('../ListBox/next/ListBoxSelection.js');

package/lib/components/MultiSelect/filter.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2016, 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 declare const defaultFilterItems: <ItemType>(items: ItemType[], { itemToString, inputValue, }: {
+    itemToString: (item: ItemType | null) => string;
+    inputValue: string | null;
+}) => ItemType[];

package/lib/components/MultiSelect/filter.js

@@ -0,0 +1,25 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+// TODO [@carbon-design-system/monorepo-reviewers]: This file was in the
+// `ComboBox` directory before but it wasn't used there. Now it's used in
+// `FilterableMultiSelect`. Is that expected?
+
+const defaultFilterItems = (items, {
+  itemToString,
+  inputValue
+}) => {
+  if (!inputValue) return items;
+  const normalizedInput = inputValue.toLowerCase();
+  return items.filter(item => itemToString(item).toLowerCase().includes(normalizedInput));
+};
+
+exports.defaultFilterItems = defaultFilterItems;