@carbon/react 1.86.0 → 1.87.0-rc.0

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

@@ -191,6 +191,13 @@ export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSorting
      * Provide the text that is displayed when the control is in warning state
      */
     warnText?: ReactNode;
+    /**
+     * Specify native input attributes to place on the `<input>`, like maxLength.
+     * These are passed to downshift's getInputProps() and will override the
+     * internal input props.
+     * https://github.com/downshift-js/downshift?tab=readme-ov-file#getinputprops
+     */
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
 }
 export declare const FilterableMultiSelect: {
     <ItemType>(props: FilterableMultiSelectProps<ItemType>): ReactElement<any>;

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -114,7 +114,8 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
   useTitleInItem,
   warn,
   warnText,
-  slug
+  slug,
+  inputProps
 }, ref) {
   const {
     isFluid
@@ -350,7 +351,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
         }
         return {
           ...changes,
-          highlightedIndex: null
+          highlightedIndex: controlledSelectedItems.length > 0 ? 0 : -1
         };
       case InputChange:
         if (onInputValueChange) {
@@ -363,6 +364,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
           highlightedIndex: 0
         };
       case InputClick:
+        setIsOpen(changes.isOpen || false);
         validateHighlightFocus();
         if (changes.isOpen && !changes.selectedItem) {
           return {
@@ -372,7 +374,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
         return {
           ...changes,
           isOpen: false,
-          highlightedIndex: null
+          highlightedIndex: controlledSelectedItems.length > 0 ? 0 : -1
         };
       case MenuMouseLeave:
         return {
@@ -494,7 +496,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
       }
     }
   });
-  const inputProps = getInputProps(getDropdownProps({
+  const inputProp = getInputProps(getDropdownProps({
     'aria-controls': isOpen ? menuId : undefined,
     'aria-describedby': helperText ? helperId : undefined,
     'aria-haspopup': 'listbox',
@@ -504,6 +506,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
     disabled,
     placeholder,
     preventKeyAction: isOpen,
+    ...inputProps,
     onClick: () => handleMenuChange(true),
     onKeyDown(event) {
       const $input = event.target;
@@ -557,7 +560,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
       setIsFocused(evt?.type === 'focus' ? true : false);
     }
   };
-  const mergedRef = mergeRefs["default"](textInput, inputProps.ref);
+  const mergedRef = mergeRefs["default"](textInput, inputProp.ref);
   const readOnlyEventHandlers = readOnly ? {
     onClick: evt => {
       // NOTE: does not prevent click
@@ -612,7 +615,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
     disabled: disabled
   }), /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({
     className: inputClasses
-  }, inputProps, {
+  }, inputProp, {
     ref: mergedRef
   }, readOnlyEventHandlers, {
     readOnly: readOnly
@@ -827,7 +830,14 @@ FilterableMultiSelect.propTypes = {
   /**
    * Provide the text that is displayed when the control is in warning state
    */
-  warnText: PropTypes__default["default"].node
+  warnText: PropTypes__default["default"].node,
+  /**
+   * Specify native input attributes to place on the `<input>`, like maxLength.
+   * These are passed to downshift's getInputProps() and will override the
+   * internal input props.
+   * https://github.com/downshift-js/downshift?tab=readme-ov-file#getinputprops
+   */
+  inputProps: PropTypes__default["default"].object
 };
 
 exports.FilterableMultiSelect = FilterableMultiSelect;

package/lib/components/NumberInput/NumberInput.d.ts

@@ -72,8 +72,9 @@ export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
      */
     id: string;
     /**
-     * Instruct the browser which keyboard to display on mobile devices. Note that
-     * standard numeric keyboards vary across devices and operating systems.
+     * Instruct the browser which keyboard to display on mobile devices. Defaults
+     * to `decimal`, but note that standard numeric keyboards vary across devices
+     * and operating systems.
      * @see https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/
      */
     inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];

package/lib/components/NumberInput/NumberInput.js

@@ -64,7 +64,7 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
     hideSteppers,
     iconDescription,
     id,
-    inputMode,
+    inputMode = 'decimal',
     invalid = false,
     invalidText,
     label,
@@ -505,8 +505,9 @@ NumberInput.propTypes = {
    */
   id: PropTypes__default["default"].string.isRequired,
   /**
-   * Instruct the browser which keyboard to display on mobile devices. Note that
-   * standard numeric keyboards vary across devices and operating systems.
+   * Instruct the browser which keyboard to display on mobile devices. Defaults
+   * to `decimal`, but note that standard numeric keyboards vary across devices
+   * and operating systems.
    * @see https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/
    */
   inputMode: PropTypes__default["default"].oneOf(['none', 'text', 'tel', 'url', 'email', 'numeric', 'decimal', 'search']),

package/lib/components/Popover/index.js

@@ -69,9 +69,10 @@ forwardRef) {
   const enableFloatingStyles = index.useFeatureFlag('enable-v12-dynamic-floating-styles') || autoAlign;
   let align = mapPopoverAlign.mapPopoverAlign(initialAlign);
 
-  // If the `Popover` is the last focusable item in the tab order, it should also close when the browser window loses focus  (#12922)
-  useEvent.useWindowEvent('blur', () => {
-    if (open) {
+  // The `Popover` should close whenever it and its children loses focus
+  useEvent.useEvent(popover, 'focusout', event => {
+    const relatedTarget = event.relatedTarget;
+    if (!popover.current?.contains(relatedTarget)) {
       onRequestClose?.();
     }
   });

package/lib/components/Toggletip/index.d.ts

@@ -58,7 +58,7 @@ export declare namespace Toggletip {
          */
         align: PropTypes.Requireable<string>;
         /**
-         * Provide an offset value for alignment axis.
+         * **Experimental:** Provide an offset value for alignment axis. Only takes effect when `autoalign` is enabled.
          */
         alignmentAxisOffset: PropTypes.Requireable<number>;
         /**

package/lib/components/Toggletip/index.js

@@ -186,7 +186,7 @@ Toggletip.propTypes = {
   // new values to match floating-ui
   'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
   /**
-   * Provide an offset value for alignment axis.
+   * **Experimental:** Provide an offset value for alignment axis. Only takes effect when `autoalign` is enabled.
    */
   alignmentAxisOffset: PropTypes__default["default"].number,
   /**

package/lib/internal/useEvent.d.ts

@@ -4,6 +4,6 @@
  * 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 MutableRefObject } from 'react';
-export declare const useEvent: <E extends keyof GlobalEventHandlersEventMap>(elementOrRef: HTMLElement | MutableRefObject<HTMLElement | null>, eventName: E, callback: (event: GlobalEventHandlersEventMap[E]) => void) => void;
+import { RefObject } from 'react';
+export declare const useEvent: <E extends keyof GlobalEventHandlersEventMap>(elementOrRef: HTMLElement | RefObject<Element | null>, eventName: E, callback: (event: GlobalEventHandlersEventMap[E]) => void) => void;
 export declare const useWindowEvent: <E extends keyof WindowEventMap>(eventName: E, callback: (event: WindowEventMap[E]) => void) => void;

package/lib/internal/useEvent.js

@@ -17,15 +17,16 @@ const useEvent = (elementOrRef, eventName, callback) => {
     savedCallback.current = callback;
   }, [callback]);
   React.useEffect(() => {
+    const element = 'current' in elementOrRef ? elementOrRef.current : elementOrRef;
+    if (!element) return;
     const handler = event => {
       if (savedCallback.current) {
         savedCallback.current(event);
       }
     };
-    const element = 'current' in elementOrRef ? elementOrRef.current : elementOrRef;
-    element?.addEventListener(eventName, handler);
+    element.addEventListener(eventName, handler);
     return () => {
-      element?.removeEventListener(eventName, handler);
+      element.removeEventListener(eventName, handler);
     };
   }, [elementOrRef, eventName]);
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.86.0",
+  "version": "1.87.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -52,10 +52,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.27.3",
-    "@carbon/feature-flags": "^0.27.0",
+    "@carbon/feature-flags": "^0.28.0-rc.0",
     "@carbon/icons-react": "^11.62.0",
     "@carbon/layout": "^11.36.0",
-    "@carbon/styles": "^1.85.0",
+    "@carbon/styles": "^1.86.0-rc.0",
     "@carbon/utilities": "^0.7.0",
     "@floating-ui/react": "^0.27.4",
     "@ibm/telemetry-js": "^1.5.0",
@@ -94,7 +94,7 @@
     "@types/react-is": "^19.0.0",
     "@types/use-sync-external-store": "^1",
     "autoprefixer": "^10.4.0",
-    "babel-loader": "^9.0.0",
+    "babel-loader": "^10.0.0",
     "babel-plugin-dev-expression": "^0.2.3",
     "babel-preset-carbon": "^0.7.0",
     "browserify-zlib": "^0.2.0",
@@ -139,5 +139,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "62119bab35028f3935a28e7bb09d2c234f061302"
+  "gitHead": "ae3d208825a90cb5c4ee316fabaa3282679a0b59"
 }

package/telemetry.yml

@@ -95,6 +95,7 @@ collect:
         - inline
         - innerRef
         - inputMode
+        - inputProps
         - invalid
         - invalidText
         - isActive