@carbon/react 1.85.0-rc.0 → 1.85.1

package/lib/components/TreeView/TreeNode.js

@@ -20,6 +20,7 @@ var useControllableState = require('../../internal/useControllableState.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var useId = require('../../internal/useId.js');
 var index = require('../FeatureFlags/index.js');
+var index$1 = require('../IconButton/index.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -27,6 +28,74 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+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__default["default"].isValidElement(node)) {
+    const element = node;
+    const children = element.props.children;
+    return extractTextContent(children);
+  }
+  return '';
+};
+const useEllipsisCheck = (label, detailsWrapperRef) => {
+  const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
+  const labelTextRef = React.useRef(null);
+  const checkEllipsis = React.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]);
+  React.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__default["default"].forwardRef(({
   active,
   children,
@@ -45,11 +114,18 @@ const TreeNode = /*#__PURE__*/React__default["default"].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 = React.useRef(null);
+  const {
+    labelTextRef,
+    isEllipsisApplied,
+    tooltipText
+  } = useEllipsisCheck(label, detailsWrapperRef);
   const enableTreeviewControllable = index.useFeatureFlag('enable-treeview-controllable');
   const {
     current: id
@@ -71,6 +147,25 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef(({
   const currentNode = React.useRef(null);
   const currentNodeLabel = React.useRef(null);
   const prefix = usePrefix.usePrefix();
+  const renderLabelText = () => {
+    if (isEllipsisApplied && tooltipText) {
+      return /*#__PURE__*/React__default["default"].createElement(index$1.IconButton, {
+        label: tooltipText,
+        kind: "ghost",
+        align: align,
+        autoAlign: autoAlign,
+        className: `${prefix}--tree-node__label__text-button`,
+        wrapperClasses: `${prefix}--popover-container`
+      }, /*#__PURE__*/React__default["default"].createElement("span", {
+        ref: labelTextRef,
+        className: `${prefix}--tree-node__label__text`
+      }, label));
+    }
+    return /*#__PURE__*/React__default["default"].createElement("span", {
+      ref: labelTextRef,
+      className: `${prefix}--tree-node__label__text`
+    }, label);
+  };
   const setRefs = element => {
     currentNode.current = element;
     if (typeof forwardedRef === 'function') {
@@ -310,7 +405,7 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef(({
         ref: currentNodeLabel
       }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
         className: `${prefix}--tree-node__icon`
-      }), label)));
+      }), renderLabelText())));
     } else {
       return /*#__PURE__*/React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({}, treeNodeProps, {
         ref: setRefs
@@ -319,7 +414,7 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef(({
         ref: currentNodeLabel
       }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
         className: `${prefix}--tree-node__icon`
-      }), label));
+      }), renderLabelText()));
     }
   }
   if (href) {
@@ -342,10 +437,11 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef(({
     }, /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretDown, {
       className: toggleClasses
     })), /*#__PURE__*/React__default["default"].createElement("span", {
-      className: `${prefix}--tree-node__label__details`
+      className: `${prefix}--tree-node__label__details`,
+      ref: detailsWrapperRef
     }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
       className: `${prefix}--tree-node__icon`
-    }), label))), /*#__PURE__*/React__default["default"].createElement("ul", {
+    }), renderLabelText()))), /*#__PURE__*/React__default["default"].createElement("ul", {
       id: `${id}-subtree`,
       role: "group",
       className: cx__default["default"](`${prefix}--tree-node__children`, {
@@ -368,10 +464,11 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef(({
     }, /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretDown, {
       className: toggleClasses
     })), /*#__PURE__*/React__default["default"].createElement("span", {
-      className: `${prefix}--tree-node__label__details`
+      className: `${prefix}--tree-node__label__details`,
+      ref: detailsWrapperRef
     }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
       className: `${prefix}--tree-node__icon`
-    }), label)), /*#__PURE__*/React__default["default"].createElement("ul", {
+    }), renderLabelText())), /*#__PURE__*/React__default["default"].createElement("ul", {
       id: `${id}-subtree`,
       role: "group",
       className: cx__default["default"](`${prefix}--tree-node__children`, {
@@ -454,7 +551,17 @@ TreeNode.propTypes = {
   /**
    * Optional: The URL the TreeNode is linking to
    */
-  href: PropTypes__default["default"].string
+  href: PropTypes__default["default"].string,
+  /**
+   * Specify how the tooltip should align when text is truncated
+   */
+  align: PropTypes__default["default"].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__default["default"].bool
 };
 TreeNode.displayName = 'TreeNode';
 

package/lib/components/UIShell/HeaderPanel.js

@@ -68,14 +68,12 @@ const HeaderPanel = /*#__PURE__*/React__default["default"].forwardRef(function H
       }
     };
   }
-  useEvent.useWindowEvent('click', () => {
-    const {
-      activeElement
-    } = document;
-    if (!(activeElement instanceof HTMLElement)) return;
-    setLastClickedElement(activeElement);
+  useEvent.useWindowEvent('click', event => {
+    const target = event.target;
+    if (!(target instanceof HTMLElement)) return;
+    setLastClickedElement(target);
     const isChildASwitcher = /*#__PURE__*/React.isValidElement(children) && typeof children.type !== 'string' && children.type === Switcher["default"];
-    if (isChildASwitcher && !activeElement.closest(`.${prefix}--header-panel--expanded`) && !activeElement.closest(`.${prefix}--header__action`) && !headerPanelReference?.current?.classList.contains(`${prefix}--switcher`) && expanded) {
+    if (isChildASwitcher && !target.closest(`.${prefix}--header-panel--expanded`) && !target.closest(`.${prefix}--header__action`) && !headerPanelReference?.current?.classList.contains(`${prefix}--switcher`) && expanded) {
       setExpandedState(false);
       onHeaderPanelFocus();
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.85.0-rc.0",
+  "version": "1.85.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -53,9 +53,9 @@
   "dependencies": {
     "@babel/runtime": "^7.27.3",
     "@carbon/feature-flags": "^0.27.0",
-    "@carbon/icons-react": "^11.62.0-rc.0",
-    "@carbon/layout": "^11.36.0-rc.0",
-    "@carbon/styles": "^1.84.0-rc.0",
+    "@carbon/icons-react": "^11.62.0",
+    "@carbon/layout": "^11.36.0",
+    "@carbon/styles": "^1.84.0",
     "@carbon/utilities": "^0.7.0",
     "@floating-ui/react": "^0.27.4",
     "@ibm/telemetry-js": "^1.5.0",
@@ -80,7 +80,7 @@
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@carbon/test-utils": "^10.36.0",
-    "@carbon/themes": "^11.55.0-rc.0",
+    "@carbon/themes": "^11.55.0",
     "@figma/code-connect": "^1.3.2",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^28.0.0",
@@ -139,5 +139,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "80ee492dc5079b90b8bca04f49497a90b60a366e"
+  "gitHead": "467c96c1d82d6b1261cf8f17ee1c8b27d0bc572f"
 }

package/es/components/ComboBox/tools/filter.js

@@ -1,18 +0,0 @@
-/**
- * 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.
- */
-
-const defaultFilterItems = (items, {
-  itemToString,
-  inputValue
-}) => items.filter(item => {
-  if (!inputValue) {
-    return true;
-  }
-  return itemToString(item).toLowerCase().includes(inputValue.toLowerCase());
-});
-
-export { defaultFilterItems };

package/lib/components/ComboBox/tools/filter.js

@@ -1,22 +0,0 @@
-/**
- * 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 });
-
-const defaultFilterItems = (items, {
-  itemToString,
-  inputValue
-}) => items.filter(item => {
-  if (!inputValue) {
-    return true;
-  }
-  return itemToString(item).toLowerCase().includes(inputValue.toLowerCase());
-});
-
-exports.defaultFilterItems = defaultFilterItems;