@carbon/react 1.65.0 → 1.66.0

package/lib/components/Tag/DismissibleTag.d.ts

@@ -43,6 +43,10 @@ export interface DismissibleTagBaseProps {
      * Provide text to be rendered inside of a the tag.
      */
     text?: string;
+    /**
+     * Provide a custom `title` to be inserted in the tag.
+     */
+    tagTitle?: string;
     /**
      * Text to show on clear filters
      */
@@ -54,7 +58,7 @@ export interface DismissibleTagBaseProps {
 }
 export type DismissibleTagProps<T extends React.ElementType> = PolymorphicProps<T, DismissibleTagBaseProps>;
 declare const DismissibleTag: {
-    <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>>({ className, disabled, id, renderIcon, title, onClose, slug, size, text, type, ...other }: DismissibleTagProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>>({ className, disabled, id, renderIcon, title, onClose, slug, size, text, tagTitle, type, ...other }: DismissibleTagProps<T>): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Provide a custom className that is applied to the containing <span>
@@ -90,6 +94,10 @@ declare const DismissibleTag: {
          * Provide text to be rendered inside of a the tag.
          */
         text: PropTypes.Requireable<string>;
+        /**
+         * Provide a custom `title` to be inserted in the tag.
+         */
+        tagTitle: PropTypes.Requireable<string>;
         /**
          * Text to show on clear filters
          */

package/lib/components/Tag/DismissibleTag.js

@@ -41,6 +41,7 @@ const DismissibleTag = _ref => {
     slug,
     size,
     text,
+    tagTitle,
     type,
     ...other
   } = _ref;
@@ -86,7 +87,7 @@ const DismissibleTag = _ref => {
   }, otherProps), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--interactive--tag-children`
   }, /*#__PURE__*/React__default["default"].createElement(Text.Text, {
-    title: text,
+    title: tagTitle ? tagTitle : text,
     className: `${prefix}--tag__label`
   }, text), /*#__PURE__*/React__default["default"].createElement(Tooltip.Tooltip, {
     label: isEllipsisApplied ? dismissLabel : title,
@@ -99,8 +100,7 @@ const DismissibleTag = _ref => {
     className: `${prefix}--tag__close-icon`,
     onClick: handleClose,
     disabled: disabled,
-    "aria-label": title,
-    title: title
+    "aria-label": title
   }, _Close || (_Close = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null)))), normalizedSlug));
 };
 DismissibleTag.propTypes = {
@@ -138,6 +138,10 @@ DismissibleTag.propTypes = {
    * Provide text to be rendered inside of a the tag.
    */
   text: PropTypes__default["default"].string,
+  /**
+   * Provide a custom `title` to be inserted in the tag.
+   */
+  tagTitle: PropTypes__default["default"].string,
   /**
    * Text to show on clear filters
    */

package/lib/components/Tag/Tag.js

@@ -141,10 +141,10 @@ const Tag = /*#__PURE__*/React__default["default"].forwardRef(function Tag(_ref,
     definition: children !== null && children !== undefined ? children : typeText,
     className: `${prefix}--definition--tooltip--tag`
   }, /*#__PURE__*/React__default["default"].createElement(Text.Text, {
-    title: children !== null && children !== undefined ? children : typeText,
+    title: children !== null && children !== undefined && typeof children === 'string' ? children : typeText,
     className: labelClasses
   }, children !== null && children !== undefined ? children : typeText)) : /*#__PURE__*/React__default["default"].createElement(Text.Text, {
-    title: children !== null && children !== undefined ? children : typeText,
+    title: children !== null && children !== undefined && typeof children === 'string' ? children : typeText,
     className: labelClasses
   }, children !== null && children !== undefined ? children : typeText), normalizedSlug);
 });

package/lib/components/Toggletip/index.js

@@ -84,7 +84,8 @@ function Toggletip(_ref2) {
   const prefix = usePrefix.usePrefix();
   const id = useId.useId();
   const className = cx__default["default"](`${prefix}--toggletip`, customClassName, {
-    [`${prefix}--toggletip--open`]: open
+    [`${prefix}--toggletip--open`]: open,
+    [`${prefix}--autoalign`]: autoAlign
   });
   const actions = {
     toggle: () => {

package/lib/components/TreeView/TreeNode.js

@@ -27,7 +27,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
+const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, forwardedRef) => {
   let {
     active,
     children,
@@ -64,6 +64,14 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
   const currentNode = React.useRef(null);
   const currentNodeLabel = React.useRef(null);
   const prefix = usePrefix.usePrefix();
+  const setRefs = element => {
+    currentNode.current = element;
+    if (typeof forwardedRef === 'function') {
+      forwardedRef(element);
+    } else if (forwardedRef) {
+      forwardedRef.current = element;
+    }
+  };
   const nodesWithProps = React__default["default"].Children.map(children, node => {
     if ( /*#__PURE__*/React__default["default"].isValidElement(node)) {
       return /*#__PURE__*/React__default["default"].cloneElement(node, {
@@ -131,13 +139,14 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     }
     if (match.match(event, keys.ArrowLeft)) {
       const findParentTreeNode = node => {
+        if (!node) return null;
         if (node.classList.contains(`${prefix}--tree-parent-node`)) {
           return node;
         }
         if (node.classList.contains(`${prefix}--tree`)) {
           return null;
         }
-        return findParentTreeNode(node.parentNode);
+        return findParentTreeNode(node.parentElement);
       };
       if (children && expanded) {
         if (!enableTreeviewControllable) {
@@ -154,7 +163,10 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
          * When focus is on a leaf node or a closed parent node, move focus to
          * its parent node (unless its depth is level 1)
          */
-        findParentTreeNode(currentNode.current?.parentNode)?.focus();
+        const parentNode = findParentTreeNode(currentNode.current?.parentElement || null);
+        if (parentNode instanceof HTMLElement) {
+          parentNode.focus();
+        }
       }
     }
     if (children && match.match(event, keys.ArrowRight)) {
@@ -239,44 +251,40 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     onClick: handleClick,
     onFocus: handleFocusEvent,
     onKeyDown: handleKeyDown,
-    role: 'treeitem',
-    // @ts-ignore
-    ref: currentNode
+    role: 'treeitem'
   };
   if (!children) {
-    return /*#__PURE__*/React__default["default"].createElement("li", treeNodeProps, /*#__PURE__*/React__default["default"].createElement("div", {
+    return /*#__PURE__*/React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({}, treeNodeProps, {
+      ref: setRefs
+    }), /*#__PURE__*/React__default["default"].createElement("div", {
       className: `${prefix}--tree-node__label`,
       ref: currentNodeLabel
     }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
       className: `${prefix}--tree-node__icon`
     }), label));
   }
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/role-supports-aria-props
-    React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({}, treeNodeProps, {
-      "aria-expanded": !!expanded,
-      ref: ref
-    }), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: `${prefix}--tree-node__label`,
-      ref: currentNodeLabel
-    }, /*#__PURE__*/React__default["default"].createElement("span", {
-      className: `${prefix}--tree-parent-node__toggle`
-      // @ts-ignore
-      ,
-      disabled: disabled,
-      onClick: handleToggleClick
-    }, /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretDown, {
-      className: toggleClasses
-    })), /*#__PURE__*/React__default["default"].createElement("span", {
-      className: `${prefix}--tree-node__label__details`
-    }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
-      className: `${prefix}--tree-node__icon`
-    }), label)), expanded && /*#__PURE__*/React__default["default"].createElement("ul", {
-      role: "group",
-      className: `${prefix}--tree-node__children`
-    }, nodesWithProps))
-  );
+  return /*#__PURE__*/React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({}, treeNodeProps, {
+    "aria-expanded": !!expanded,
+    ref: setRefs
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--tree-node__label`,
+    ref: currentNodeLabel
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: `${prefix}--tree-parent-node__toggle`
+    // @ts-ignore
+    ,
+    disabled: disabled,
+    onClick: handleToggleClick
+  }, /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretDown, {
+    className: toggleClasses
+  })), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: `${prefix}--tree-node__label__details`
+  }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
+    className: `${prefix}--tree-node__icon`
+  }), label)), expanded && /*#__PURE__*/React__default["default"].createElement("ul", {
+    role: "group",
+    className: `${prefix}--tree-node__children`
+  }, nodesWithProps));
 });
 TreeNode.propTypes = {
   /**

package/lib/components/TreeView/TreeView.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import TreeNode from './TreeNode';
+import TreeNode, { TreeNodeProps } from './TreeNode';
 export type TreeViewProps = {
     /**
      * Mark the active node in the tree, represented by its ID
@@ -40,7 +40,9 @@ export type TreeViewProps = {
     /**
      * Callback function that is called when any node is selected
      */
-    onSelect?: (selected: Array<string | number>, payload: any) => void;
+    onSelect?: (event: React.SyntheticEvent<HTMLUListElement>, payload?: Partial<TreeNodeProps> & {
+        activeNodeId?: string | number;
+    }) => void;
     /**
      * Array representing all selected node IDs in the tree
      */
@@ -49,7 +51,7 @@ export type TreeViewProps = {
      * Specify the size of the tree from a list of available sizes.
      */
     size?: 'xs' | 'sm';
-} & React.HTMLAttributes<HTMLUListElement>;
+} & Omit<React.HTMLAttributes<HTMLUListElement>, 'onSelect'>;
 type TreeViewComponent = {
     (props: TreeViewProps): JSX.Element;
     propTypes?: any;

package/lib/index.js

@@ -163,6 +163,8 @@ var SideNavMenuItem = require('./components/UIShell/SideNavMenuItem.js');
 var SideNavSwitcher = require('./components/UIShell/SideNavSwitcher.js');
 var UnorderedList = require('./components/UnorderedList/UnorderedList.js');
 var index = require('./components/FeatureFlags/index.js');
+var FluidTextArea = require('./components/FluidTextArea/FluidTextArea.js');
+var FluidTextArea_Skeleton = require('./components/FluidTextArea/FluidTextArea.Skeleton.js');
 var index$c = require('./components/Heading/index.js');
 var index$d = require('./components/IconButton/index.js');
 var index$e = require('./components/Layer/index.js');
@@ -171,6 +173,8 @@ var index$2 = require('./components/OverflowMenuV2/index.js');
 var index$f = require('./components/Popover/index.js');
 var ProgressBar = require('./components/ProgressBar/ProgressBar.js');
 var index$3 = require('./components/AILabel/index.js');
+var ChatButton = require('./components/ChatButton/ChatButton.js');
+var ChatButton_Skeleton = require('./components/ChatButton/ChatButton.Skeleton.js');
 var AISkeletonPlaceholder = require('./components/AISkeleton/AISkeletonPlaceholder.js');
 var AISkeletonIcon = require('./components/AISkeleton/AISkeletonIcon.js');
 var AISkeletonText = require('./components/AISkeleton/AISkeletonText.js');
@@ -182,8 +186,6 @@ var usePrefix = require('./internal/usePrefix.js');
 var useIdPrefix = require('./internal/useIdPrefix.js');
 var FluidDatePicker_Skeleton = require('./components/FluidDatePicker/FluidDatePicker.Skeleton.js');
 var FluidSearch_Skeleton = require('./components/FluidSearch/FluidSearch.Skeleton.js');
-var FluidTextArea = require('./components/FluidTextArea/FluidTextArea.js');
-var FluidTextArea_Skeleton = require('./components/FluidTextArea/FluidTextArea.Skeleton.js');
 var FluidTextInput = require('./components/FluidTextInput/FluidTextInput.js');
 var FluidTextInput_Skeleton = require('./components/FluidTextInput/FluidTextInput.Skeleton.js');
 var PageSelector = require('./components/Pagination/experimental/PageSelector.js');
@@ -210,8 +212,6 @@ var FluidTimePicker_Skeleton = require('./components/FluidTimePicker/FluidTimePi
 var FluidTimePickerSelect = require('./components/FluidTimePickerSelect/FluidTimePickerSelect.js');
 var LayoutDirection = require('./components/LayoutDirection/LayoutDirection.js');
 var useLayoutDirection = require('./components/LayoutDirection/useLayoutDirection.js');
-var ChatButton = require('./components/ChatButton/ChatButton.js');
-var ChatButton_Skeleton = require('./components/ChatButton/ChatButton.Skeleton.js');
 var Text = require('./components/Text/Text.js');
 var TextDirection = require('./components/Text/TextDirection.js');
 var CheckboxGroup = require('./components/CheckboxGroup/CheckboxGroup.js');
@@ -429,6 +429,8 @@ exports.UnorderedList = UnorderedList["default"];
 exports.unstable_FeatureFlags = index.FeatureFlags;
 exports.unstable_useFeatureFlag = index.useFeatureFlag;
 exports.unstable_useFeatureFlags = index.useFeatureFlags;
+exports.unstable__FluidTextArea = FluidTextArea["default"];
+exports.unstable__FluidTextAreaSkeleton = FluidTextArea_Skeleton["default"];
 exports.Heading = index$c.Heading;
 exports.Section = index$c.Section;
 exports.IconButton = index$d.IconButton;
@@ -446,6 +448,8 @@ exports.AILabelContent = index$3.AILabelContent;
 exports.unstable__Slug = index$3.AILabel;
 exports.unstable__SlugActions = index$3.AILabelActions;
 exports.unstable__SlugContent = index$3.AILabelContent;
+exports.unstable__ChatButton = ChatButton["default"];
+exports.unstable__ChatButtonSkeleton = ChatButton_Skeleton["default"];
 exports.AISkeletonPlaceholder = AISkeletonPlaceholder["default"];
 exports.unstable__AiSkeletonPlaceholder = AISkeletonPlaceholder["default"];
 exports.AISkeletonIcon = AISkeletonIcon["default"];
@@ -464,8 +468,6 @@ exports.usePrefix = usePrefix.usePrefix;
 exports.useIdPrefix = useIdPrefix.useIdPrefix;
 exports.unstable__FluidDatePickerSkeleton = FluidDatePicker_Skeleton["default"];
 exports.unstable__FluidSearchSkeleton = FluidSearch_Skeleton["default"];
-exports.unstable__FluidTextArea = FluidTextArea["default"];
-exports.unstable__FluidTextAreaSkeleton = FluidTextArea_Skeleton["default"];
 exports.unstable__FluidTextInput = FluidTextInput["default"];
 exports.unstable__FluidTextInputSkeleton = FluidTextInput_Skeleton["default"];
 exports.unstable_PageSelector = PageSelector["default"];
@@ -492,8 +494,6 @@ exports.unstable__FluidTimePickerSkeleton = FluidTimePicker_Skeleton["default"];
 exports.unstable__FluidTimePickerSelect = FluidTimePickerSelect["default"];
 exports.unstable_LayoutDirection = LayoutDirection.LayoutDirection;
 exports.unstable_useLayoutDirection = useLayoutDirection.useLayoutDirection;
-exports.unstable__ChatButton = ChatButton["default"];
-exports.unstable__ChatButtonSkeleton = ChatButton_Skeleton["default"];
 exports.unstable_Text = Text.Text;
 exports.unstable_TextDirection = TextDirection.TextDirection;
 exports.CheckboxGroup = CheckboxGroup["default"];

package/lib/internal/Selection.js

@@ -43,7 +43,9 @@ function useSelection(_ref2) {
     disabled,
     onChange,
     initialSelectedItems = [],
-    selectedItems: controlledItems
+    selectedItems: controlledItems,
+    selectAll = false,
+    filteredItems = []
   } = _ref2;
   const isMounted = React.useRef(false);
   const savedOnChange = React.useRef(onChange);
@@ -54,25 +56,35 @@ function useSelection(_ref2) {
     if (disabled) {
       return;
     }
-    let selectedIndex;
-    selectedItems.forEach((selectedItem, index) => {
-      if (isEqual__default["default"](selectedItem, item)) {
-        selectedIndex = index;
-      }
-    });
+    const allSelectableItems = filteredItems.filter(item => !item.disabled);
+    const disabledItemCount = filteredItems.filter(item => item.disabled).length;
     let newSelectedItems;
-    if (selectedIndex === undefined) {
-      newSelectedItems = selectedItems.concat(item);
-      callOnChangeHandler({
-        isControlled,
-        isMounted: isMounted.current,
-        onChangeHandlerControlled: savedOnChange.current,
-        onChangeHandlerUncontrolled: setUncontrolledItems,
-        selectedItems: newSelectedItems
+
+    //deselect all on click to All/indeterminate option
+    if (item && item.isSelectAll && selectedItems.length > 0) {
+      newSelectedItems = [];
+    }
+    //select all option
+    else if (item && item.isSelectAll && selectedItems.length == 0) {
+      newSelectedItems = allSelectableItems;
+    } else {
+      let selectedIndex;
+      selectedItems.forEach((selectedItem, index) => {
+        if (isEqual__default["default"](selectedItem, item)) {
+          selectedIndex = index;
+        }
       });
-      return;
+      if (selectedIndex === undefined) {
+        newSelectedItems = selectedItems.concat(item);
+        // checking if all items are selected then We should select mark the 'select All' option as well
+        if (selectAll && filteredItems.length - 1 === newSelectedItems.length + disabledItemCount) {
+          newSelectedItems = allSelectableItems;
+        }
+      } else {
+        newSelectedItems = removeAtIndex(selectedItems, selectedIndex);
+        newSelectedItems = newSelectedItems.filter(item => !item.isSelectAll);
+      }
     }
-    newSelectedItems = removeAtIndex(selectedItems, selectedIndex);
     callOnChangeHandler({
       isControlled,
       isMounted: isMounted.current,
@@ -80,7 +92,7 @@ function useSelection(_ref2) {
       onChangeHandlerUncontrolled: setUncontrolledItems,
       selectedItems: newSelectedItems
     });
-  }, [disabled, isControlled, selectedItems]);
+  }, [disabled, selectedItems, filteredItems, selectAll, isControlled]);
   const clearSelection = React.useCallback(() => {
     if (disabled) {
       return;

package/lib/internal/useMergedRefs.d.ts

@@ -10,4 +10,4 @@ import { Ref, ForwardedRef } from 'react';
  * refs from both `React.forwardRef` and `useRef` that you would like to add to
  * the same node.
  */
-export declare const useMergedRefs: <T>(refs: ForwardedRef<T>[]) => Ref<T>;
+export declare const useMergedRefs: <T extends unknown>(refs: ForwardedRef<T>[]) => Ref<T>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.65.0",
+  "version": "1.66.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -49,9 +49,9 @@
   "dependencies": {
     "@babel/runtime": "^7.24.7",
     "@carbon/feature-flags": "^0.22.0",
-    "@carbon/icons-react": "^11.48.0",
-    "@carbon/layout": "^11.25.0",
-    "@carbon/styles": "^1.64.0",
+    "@carbon/icons-react": "^11.49.0",
+    "@carbon/layout": "^11.26.0",
+    "@carbon/styles": "^1.65.0",
     "@floating-ui/react": "^0.26.0",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
@@ -79,22 +79,25 @@
     "@babel/preset-env": "^7.24.7",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@carbon/test-utils": "^10.31.0",
-    "@carbon/themes": "^11.39.0",
-    "@figma/code-connect": "^1.0.4",
+    "@carbon/test-utils": "^10.32.0",
+    "@carbon/themes": "^11.40.0",
+    "@figma/code-connect": "^1.0.6",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^26.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-typescript": "^11.0.0",
-    "@storybook/addon-a11y": "^7.1.0",
-    "@storybook/addon-actions": "^7.1.0",
-    "@storybook/addon-docs": "^7.1.0",
-    "@storybook/addon-essentials": "^7.1.0",
-    "@storybook/addon-links": "^7.4.5",
-    "@storybook/addon-storysource": "^7.1.0",
-    "@storybook/react": "^7.1.0",
-    "@storybook/react-webpack5": "^7.1.0",
-    "@storybook/theming": "^7.1.0",
+    "@storybook/addon-a11y": "^8.2.8",
+    "@storybook/addon-actions": "^8.2.8",
+    "@storybook/addon-docs": "^8.2.8",
+    "@storybook/addon-essentials": "^8.2.8",
+    "@storybook/addon-links": "^8.1.10",
+    "@storybook/addon-storysource": "^8.2.8",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/blocks": "^8.2.8",
+    "@storybook/manager-api": "^8.2.8",
+    "@storybook/react": "^8.2.8",
+    "@storybook/react-webpack5": "^8.2.8",
+    "@storybook/theming": "^8.2.8",
     "@types/react-is": "~18.3.0",
     "autoprefixer": "^10.4.0",
     "babel-loader": "^9.0.0",
@@ -115,20 +118,20 @@
     "prop-types": "^15.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "remark-gfm": "^3.0.1",
+    "remark-gfm": "^4.0.0",
     "requestanimationframe": "^0.0.23",
     "rimraf": "^6.0.0",
     "rollup": "^2.79.1",
     "rollup-plugin-strip-banner": "^3.0.0",
-    "sass": "^1.51.0",
-    "sass-loader": "^14.0.0",
-    "storybook": "^7.1.0",
+    "sass": "^1.77.7",
+    "sass-loader": "^16.0.0",
+    "storybook": "^8.2.8",
     "storybook-addon-accessibility-checker": "^3.1.61-rc.3",
     "stream-browserify": "^3.0.0",
     "style-loader": "^4.0.0",
     "typescript-config-carbon": "^0.3.0",
     "webpack": "^5.65.0",
-    "webpack-dev-server": "^4.7.4"
+    "webpack-dev-server": "^5.0.0"
   },
   "sideEffects": [
     "es/index.js",
@@ -141,5 +144,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "2e82ab9625d65b607a7510b70d2cb4bacf209378"
+  "gitHead": "d706ffca254bad174fdfc88c05f620ba547cc369"
 }