@carbon/react 1.56.0-rc.0 → 1.56.0-rc.1

package/es/components/Button/Button.js

@@ -49,9 +49,14 @@ const Button = /*#__PURE__*/React__default.forwardRef(function Button(props, ref
   };
   const iconOnlyImage = !ButtonImageElement ? null : /*#__PURE__*/React__default.createElement(ButtonImageElement, null);
   if (!isIconOnlyButton(hasIconOnly)) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const {
+      tooltipAlignment,
+      ...propsWithoutTooltipAlignment
+    } = props;
     return /*#__PURE__*/React__default.createElement(ButtonBase, _extends({
       ref: ref
-    }, props));
+    }, propsWithoutTooltipAlignment));
   } else {
     let align = undefined;
     if (tooltipPosition === 'top' || tooltipPosition === 'bottom') {

package/es/components/MultiSelect/MultiSelect.js

@@ -11,7 +11,7 @@ import cx from 'classnames';
 import { useSelect } from 'downshift';
 import isEqual from 'lodash.isequal';
 import PropTypes from 'prop-types';
-import React__default, { useContext, useRef, useState } from 'react';
+import React__default, { useContext, useRef, useState, useMemo } from 'react';
 import ListBox from '../ListBox/index.js';
 import { sortingPropTypes } from './MultiSelectPropTypes.js';
 import { defaultSortItems, defaultCompareItems } from './tools/sorting.js';
@@ -116,17 +116,32 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     onChange,
     selectedItems: selected
   });
+
+  // Filter out items with an object having undefined values
+  const filteredItems = useMemo(() => {
+    return items.filter(item => {
+      if (typeof item === 'object' && item !== null) {
+        for (const key in item) {
+          if (Object.hasOwn(item, key) && item[key] === undefined) {
+            return false; // Return false if any property has an undefined value
+          }
+        }
+      }
+
+      return true; // Return true if item is not an object with undefined values
+    });
+  }, [items]);
   const selectProps = {
     ...downshiftProps,
     stateReducer,
     isOpen,
-    itemToString: items => {
-      return Array.isArray(items) && items.map(function (item) {
+    itemToString: filteredItems => {
+      return Array.isArray(filteredItems) && filteredItems.map(function (item) {
         return itemToString(item);
       }).join(', ') || '';
     },
     selectedItem: controlledSelectedItems,
-    items,
+    items: filteredItems,
     isItemDisabled(item, _index) {
       return item.disabled;
     }
@@ -342,7 +357,7 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       size: 'mini'
     });
   }
-  const itemsSelectedText = selectedItems.length > 0 && selectedItems.map(item => item.text);
+  const itemsSelectedText = selectedItems.length > 0 && selectedItems.map(item => item?.text);
   return /*#__PURE__*/React__default.createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React__default.createElement("label", _extends({
@@ -393,7 +408,7 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     translateWithId: translateWithId
   })), normalizedSlug), /*#__PURE__*/React__default.createElement(ListBox.Menu, getMenuProps(), isOpen &&
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  sortItems(items, sortOptions).map((item, index) => {
+  sortItems(filteredItems, sortOptions).map((item, index) => {
     const isChecked = selectedItems.filter(selected => isEqual(selected, item)).length > 0;
     const itemProps = getItemProps({
       item,

package/es/components/NumberInput/NumberInput.js

@@ -71,6 +71,9 @@ const NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(
     if (defaultValue !== undefined) {
       return defaultValue;
     }
+    if (allowEmpty) {
+      return '';
+    }
     return 0;
   });
   const [prevControlledValue, setPrevControlledValue] = useState(controlledValue);
@@ -130,7 +133,7 @@ const NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(
       return;
     }
     const state = {
-      value: Number(event.target.value),
+      value: allowEmpty && event.target.value === '' ? '' : Number(event.target.value),
       direction: value < event.target.value ? 'up' : 'down'
     };
     setValue(state.value);
@@ -157,7 +160,7 @@ const NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(
     if (inputRef.current) {
       direction === 'up' ? inputRef.current.stepUp() : inputRef.current.stepDown();
       const state = {
-        value: Number(inputRef.current.value),
+        value: allowEmpty && inputRef.current.value === '' ? '' : Number(inputRef.current.value),
         direction: direction
       };
       setValue(state.value);

package/es/components/RadioButton/RadioButton.d.ts

@@ -50,7 +50,7 @@ export interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInp
      * Provide an optional `onChange` hook that is called each time the value of
      * the underlying `<input>` changes
      */
-    onChange?: (value: string | number, name: string | undefined, event: any) => void;
+    onChange?: (value: string | number, name: string | undefined, event: React.ChangeEvent<HTMLInputElement>) => void;
     /**
      * Provide a handler that is invoked when a user clicks on the control
      */

package/es/components/RadioButtonGroup/RadioButtonGroup.d.ts

@@ -54,7 +54,7 @@ export interface RadioButtonGroupProps extends Omit<React.InputHTMLAttributes<HT
      * Provide an optional `onChange` hook that is called whenever the value of
      * the group changes
      */
-    onChange?: (selection: unknown, name: string, evt: unknown) => void;
+    onChange?: (selection: React.ReactNode, name: string, event: React.ChangeEvent<HTMLInputElement>) => void;
     /**
      * Provide where radio buttons should be placed
      */

package/es/components/Tile/Tile.d.ts

@@ -88,7 +88,7 @@ export interface SelectableTileProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * The empty handler of the `<input>`.
      */
-    onChange?(event: ChangeEvent<HTMLDivElement>): void;
+    onChange?(event: ChangeEvent<HTMLDivElement>, selected?: boolean, id?: string): void;
     /**
      * Specify the function to run when the SelectableTile is clicked
      */

package/es/components/Tile/Tile.js

@@ -244,7 +244,7 @@ const SelectableTile = /*#__PURE__*/React__default.forwardRef(function Selectabl
     }
     setIsSelected(!isSelected);
     clickHandler(evt);
-    onChange(evt);
+    onChange(evt, isSelected, id);
   }
 
   // TODO: rename to handleKeyDown when handleKeyDown prop is deprecated
@@ -253,13 +253,13 @@ const SelectableTile = /*#__PURE__*/React__default.forwardRef(function Selectabl
     if (matches(evt, [Enter, Space])) {
       evt.preventDefault();
       setIsSelected(!isSelected);
-      onChange(evt);
+      onChange(evt, isSelected, id);
     }
     keyDownHandler(evt);
   }
   function handleChange(event) {
     setIsSelected(event.target.checked);
-    onChange(event);
+    onChange(event, isSelected, id);
   }
   if (selected !== prevSelected) {
     setIsSelected(selected);

package/es/components/UIShell/HeaderMenu.d.ts

@@ -214,6 +214,6 @@ declare class HeaderMenu extends React.Component<HeaderMenuProps, HeaderMenuStat
      */
     _renderMenuItem: (item: React.ReactNode, index: number) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
 }
-declare const HeaderMenuForwardRef: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;
+declare const HeaderMenuForwardRef: React.ForwardRefExoticComponent<HeaderMenuProps & React.RefAttributes<unknown>>;
 export { HeaderMenu };
 export default HeaderMenuForwardRef;

package/es/components/UIShell/HeaderMenu.js

@@ -259,9 +259,7 @@ _defineProperty(HeaderMenu, "propTypes", {
 });
 _defineProperty(HeaderMenu, "contextType", PrefixContext);
 const HeaderMenuForwardRef = /*#__PURE__*/React__default.forwardRef((props, ref) => {
-  return /*#__PURE__*/React__default.createElement(HeaderMenu, _extends({
-    menuLinkName: "link"
-  }, props, {
+  return /*#__PURE__*/React__default.createElement(HeaderMenu, _extends({}, props, {
     focusRef: ref
   }));
 });

package/lib/components/Button/Button.js

@@ -58,9 +58,14 @@ const Button = /*#__PURE__*/React__default["default"].forwardRef(function Button
   };
   const iconOnlyImage = !ButtonImageElement ? null : /*#__PURE__*/React__default["default"].createElement(ButtonImageElement, null);
   if (!isIconOnlyButton(hasIconOnly)) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const {
+      tooltipAlignment,
+      ...propsWithoutTooltipAlignment
+    } = props;
     return /*#__PURE__*/React__default["default"].createElement(ButtonBase["default"], _rollupPluginBabelHelpers["extends"]({
       ref: ref
-    }, props));
+    }, propsWithoutTooltipAlignment));
   } else {
     let align = undefined;
     if (tooltipPosition === 'top' || tooltipPosition === 'bottom') {

package/lib/components/MultiSelect/MultiSelect.js

@@ -127,17 +127,32 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
     onChange,
     selectedItems: selected
   });
+
+  // Filter out items with an object having undefined values
+  const filteredItems = React.useMemo(() => {
+    return items.filter(item => {
+      if (typeof item === 'object' && item !== null) {
+        for (const key in item) {
+          if (Object.hasOwn(item, key) && item[key] === undefined) {
+            return false; // Return false if any property has an undefined value
+          }
+        }
+      }
+
+      return true; // Return true if item is not an object with undefined values
+    });
+  }, [items]);
   const selectProps = {
     ...downshiftProps,
     stateReducer,
     isOpen,
-    itemToString: items => {
-      return Array.isArray(items) && items.map(function (item) {
+    itemToString: filteredItems => {
+      return Array.isArray(filteredItems) && filteredItems.map(function (item) {
         return itemToString(item);
       }).join(', ') || '';
     },
     selectedItem: controlledSelectedItems,
-    items,
+    items: filteredItems,
     isItemDisabled(item, _index) {
       return item.disabled;
     }
@@ -353,7 +368,7 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
       size: 'mini'
     });
   }
-  const itemsSelectedText = selectedItems.length > 0 && selectedItems.map(item => item.text);
+  const itemsSelectedText = selectedItems.length > 0 && selectedItems.map(item => item?.text);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
@@ -404,7 +419,7 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
     translateWithId: translateWithId
   })), normalizedSlug), /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, getMenuProps(), isOpen &&
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  sortItems(items, sortOptions).map((item, index$1) => {
+  sortItems(filteredItems, sortOptions).map((item, index$1) => {
     const isChecked = selectedItems.filter(selected => isEqual__default["default"](selected, item)).length > 0;
     const itemProps = getItemProps({
       item,

package/lib/components/NumberInput/NumberInput.js

@@ -81,6 +81,9 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
     if (defaultValue !== undefined) {
       return defaultValue;
     }
+    if (allowEmpty) {
+      return '';
+    }
     return 0;
   });
   const [prevControlledValue, setPrevControlledValue] = React.useState(controlledValue);
@@ -140,7 +143,7 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
       return;
     }
     const state = {
-      value: Number(event.target.value),
+      value: allowEmpty && event.target.value === '' ? '' : Number(event.target.value),
       direction: value < event.target.value ? 'up' : 'down'
     };
     setValue(state.value);
@@ -167,7 +170,7 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
     if (inputRef.current) {
       direction === 'up' ? inputRef.current.stepUp() : inputRef.current.stepDown();
       const state = {
-        value: Number(inputRef.current.value),
+        value: allowEmpty && inputRef.current.value === '' ? '' : Number(inputRef.current.value),
         direction: direction
       };
       setValue(state.value);

package/lib/components/RadioButton/RadioButton.d.ts

@@ -50,7 +50,7 @@ export interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInp
      * Provide an optional `onChange` hook that is called each time the value of
      * the underlying `<input>` changes
      */
-    onChange?: (value: string | number, name: string | undefined, event: any) => void;
+    onChange?: (value: string | number, name: string | undefined, event: React.ChangeEvent<HTMLInputElement>) => void;
     /**
      * Provide a handler that is invoked when a user clicks on the control
      */

package/lib/components/RadioButtonGroup/RadioButtonGroup.d.ts

@@ -54,7 +54,7 @@ export interface RadioButtonGroupProps extends Omit<React.InputHTMLAttributes<HT
      * Provide an optional `onChange` hook that is called whenever the value of
      * the group changes
      */
-    onChange?: (selection: unknown, name: string, evt: unknown) => void;
+    onChange?: (selection: React.ReactNode, name: string, event: React.ChangeEvent<HTMLInputElement>) => void;
     /**
      * Provide where radio buttons should be placed
      */

package/lib/components/Tile/Tile.d.ts

@@ -88,7 +88,7 @@ export interface SelectableTileProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * The empty handler of the `<input>`.
      */
-    onChange?(event: ChangeEvent<HTMLDivElement>): void;
+    onChange?(event: ChangeEvent<HTMLDivElement>, selected?: boolean, id?: string): void;
     /**
      * Specify the function to run when the SelectableTile is clicked
      */

package/lib/components/Tile/Tile.js

@@ -254,7 +254,7 @@ const SelectableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
     }
     setIsSelected(!isSelected);
     clickHandler(evt);
-    onChange(evt);
+    onChange(evt, isSelected, id);
   }
 
   // TODO: rename to handleKeyDown when handleKeyDown prop is deprecated
@@ -263,13 +263,13 @@ const SelectableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
     if (match.matches(evt, [keys.Enter, keys.Space])) {
       evt.preventDefault();
       setIsSelected(!isSelected);
-      onChange(evt);
+      onChange(evt, isSelected, id);
     }
     keyDownHandler(evt);
   }
   function handleChange(event) {
     setIsSelected(event.target.checked);
-    onChange(event);
+    onChange(event, isSelected, id);
   }
   if (selected !== prevSelected) {
     setIsSelected(selected);

package/lib/components/UIShell/HeaderMenu.d.ts

@@ -214,6 +214,6 @@ declare class HeaderMenu extends React.Component<HeaderMenuProps, HeaderMenuStat
      */
     _renderMenuItem: (item: React.ReactNode, index: number) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
 }
-declare const HeaderMenuForwardRef: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;
+declare const HeaderMenuForwardRef: React.ForwardRefExoticComponent<HeaderMenuProps & React.RefAttributes<unknown>>;
 export { HeaderMenu };
 export default HeaderMenuForwardRef;

package/lib/components/UIShell/HeaderMenu.js

@@ -269,9 +269,7 @@ _rollupPluginBabelHelpers.defineProperty(HeaderMenu, "propTypes", {
 });
 _rollupPluginBabelHelpers.defineProperty(HeaderMenu, "contextType", usePrefix.PrefixContext);
 const HeaderMenuForwardRef = /*#__PURE__*/React__default["default"].forwardRef((props, ref) => {
-  return /*#__PURE__*/React__default["default"].createElement(HeaderMenu, _rollupPluginBabelHelpers["extends"]({
-    menuLinkName: "link"
-  }, props, {
+  return /*#__PURE__*/React__default["default"].createElement(HeaderMenu, _rollupPluginBabelHelpers["extends"]({}, props, {
     focusRef: ref
   }));
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.56.0-rc.0",
+  "version": "1.56.0-rc.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -49,11 +49,11 @@
   "dependencies": {
     "@babel/runtime": "^7.18.3",
     "@carbon/feature-flags": "^0.19.0",
-    "@carbon/icons-react": "^11.40.0-rc.0",
+    "@carbon/icons-react": "^11.40.0-rc.1",
     "@carbon/layout": "^11.21.0",
-    "@carbon/styles": "^1.55.0",
+    "@carbon/styles": "^1.55.1-rc.0",
     "@floating-ui/react": "^0.26.0",
-    "@ibm/telemetry-js": "^1.2.1",
+    "@ibm/telemetry-js": "^1.4.0",
     "classnames": "2.5.1",
     "copy-to-clipboard": "^3.3.1",
     "downshift": "8.5.0",
@@ -141,5 +141,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "ecf1b3cc2c2e9ed4908bab90938120e0d4b2aea4"
+  "gitHead": "c6ef02eb0fa5b2dcaccbbe60d45f26884a167948"
 }

package/telemetry.yml

@@ -813,4 +813,7 @@ collect:
       - 'normal' 
       # unstable__Slug - dotType 
       - 'default' 
-      - 'hollow'
+      - 'hollow'
+  js:
+    tokens: null
+    functions: {}