@carbon/react 1.85.1 → 1.86.0-rc.0

package/es/components/NumberInput/NumberInput.js

@@ -13,7 +13,7 @@ import React, { useContext, useState, useMemo, useCallback, useRef, useEffect, c
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps.js';
 import { usePrefix } from '../../internal/usePrefix.js';
-import deprecate from '../../prop-types/deprecate.js';
+import { deprecate } from '../../prop-types/deprecate.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import '../Text/index.js';
@@ -48,7 +48,6 @@ const NumberInput = /*#__PURE__*/React.forwardRef(function NumberInput(props, fo
     decorator,
     disabled = false,
     disableWheel: disableWheelProp = false,
-    defaultValue = 0,
     formatOptions,
     helperText = '',
     hideLabel = false,
@@ -63,6 +62,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef(function NumberInput(props, fo
     locale = 'en-US',
     max,
     min,
+    onBlur,
     onChange,
     onClick,
     onKeyUp,
@@ -73,6 +73,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef(function NumberInput(props, fo
     step = 1,
     translateWithId: t = id => defaultTranslations[id],
     type = 'number',
+    defaultValue = type === 'number' ? 0 : NaN,
     warn = false,
     warnText = '',
     value: controlledValue,
@@ -112,6 +113,12 @@ const NumberInput = /*#__PURE__*/React.forwardRef(function NumberInput(props, fo
     value: typeof controlledValue === 'string' ? numberParser.parse(controlledValue) : controlledValue
   });
 
+  /**
+   * The number value that was previously "committed" to the input on blur
+   * Only used when type="text"
+   */
+  const [previousNumberValue, setPreviousNumberValue] = useState(numberValue);
+
   /**
    * The current text value of the input.
    * Only used when type=text
@@ -124,6 +131,10 @@ const NumberInput = /*#__PURE__*/React.forwardRef(function NumberInput(props, fo
     numberingSystem
   }), [locale, formatOptions, numberingSystem]);
   const format = useCallback(value => isNaN(value) || value === null ? '' : numberFormatter.format(value), [numberFormatter]);
+  if (isControlled && !(isNaN(previousNumberValue) && isNaN(numberValue)) && previousNumberValue !== numberValue) {
+    setInputValue(format(numberValue));
+    setPreviousNumberValue(numberValue);
+  }
   const inputRef = useRef(null);
   const ref = useMergedRefs([forwardRef, inputRef]);
   const numberInputClasses = cx({
@@ -161,7 +172,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef(function NumberInput(props, fo
     [`${prefix}--number__invalid`]: normalizedProps.invalid || normalizedProps.warn,
     [`${prefix}--number__invalid--warning`]: normalizedProps.warn
   });
-  if (controlledValue !== prevControlledValue) {
+  if (controlledValue !== prevControlledValue && !(isNaN(Number(controlledValue)) === isNaN(Number(prevControlledValue)))) {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     setValue(controlledValue);
     setPrevControlledValue(controlledValue);
@@ -193,6 +204,8 @@ const NumberInput = /*#__PURE__*/React.forwardRef(function NumberInput(props, fo
     }
     if (type === 'text') {
       const _value = allowEmpty && event.target.value === '' ? '' : event.target.value;
+
+      // When isControlled, setNumberValue will not update numberValue in useControllableState.
       setNumberValue(numberParser.parse(_value));
       setInputValue(_value);
       // The onChange prop isn't called here because it will be called on blur
@@ -221,30 +234,46 @@ const NumberInput = /*#__PURE__*/React.forwardRef(function NumberInput(props, fo
   };
   const handleStep = (event, direction) => {
     if (inputRef.current) {
-      const currentValue = type === 'number' ? Number(inputRef.current.value) : numberParser.parse(inputRef.current.value);
-      const rawValue = direction === 'up' ? currentValue + step : currentValue - step;
+      const currentValue = type === 'number' ? Number(inputRef.current.value) : numberValue;
+      let rawValue;
+      if (Number.isNaN(currentValue)) {
+        // When the field is empty (NaN), incrementing begins at min,
+        // decrementing begins at max.
+        // When there's no min or max to use, it begins at 0.
+        if (direction === `up` && min) {
+          rawValue = min;
+        } else if (direction === `down` && max) {
+          rawValue = max;
+        } else {
+          rawValue = 0;
+        }
+      } else if (direction === 'up') {
+        rawValue = currentValue + step;
+      } else {
+        rawValue = currentValue - step;
+      }
       const precision = Math.max(getDecimalPlaces(currentValue), getDecimalPlaces(step));
       const floatValue = parseFloat(rawValue.toFixed(precision));
       const newValue = clamp(floatValue, min ?? -Infinity, max ?? Infinity);
-      let state;
+      const state = {
+        value: newValue,
+        direction
+      };
       if (type === 'number') {
-        state = {
-          value: allowEmpty && inputRef.current.value === '' && step === 0 ? '' : newValue,
-          direction
-        };
         setValue(state.value);
       }
       if (type === 'text') {
+        // Calling format() can alter the number (such as rounding it) causing
+        // the numberValue to mismatch the formatted value in the input.
+        // To avoid this, the newValue is re-parsed after formatting.
         const formattedNewValue = format(newValue);
-        state = {
-          value: allowEmpty && inputRef.current.value === '' && step === 0 ? '' : formattedNewValue,
-          direction
-        };
+        const parsedFormattedNewValue = numberParser.parse(formattedNewValue);
 
-        // newValue does not need to be parsed because it is derived from
-        // currentValue, which is parsed at the beginning of this function
-        setNumberValue(newValue);
+        // When isControlled, setNumberValue will not actually update
+        // numberValue in useControllableState.
+        setNumberValue(parsedFormattedNewValue);
         setInputValue(formattedNewValue);
+        setPreviousNumberValue(parsedFormattedNewValue);
       }
       if (onChange) {
         onChange(event, state);
@@ -254,9 +283,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef(function NumberInput(props, fo
   };
   const handleStepperClick = (event, direction) => {
     if (inputRef.current) {
-      const {
-        state
-      } = handleStep(event, direction);
+      const state = handleStep(event, direction);
       if (onClick) {
         onClick(event, state);
       }
@@ -336,16 +363,37 @@ const NumberInput = /*#__PURE__*/React.forwardRef(function NumberInput(props, fo
         const _numberValue = isControlled ? numberParser.parse(inputValue) : numberValue;
         const formattedValue = isNaN(_numberValue) ? '' : format(_numberValue);
         setInputValue(formattedValue);
+
+        // Calling format() can alter the number (such as rounding it)
+        // causing the _numberValue to mismatch the formatted value in
+        // the input. To avoid this, formattedValue is re-parsed.
+        const parsedFormattedNewValue = numberParser.parse(formattedValue);
         if (onChange) {
           const state = {
-            value: formattedValue,
-            direction: value < e.target.value ? 'up' : 'down'
+            value: parsedFormattedNewValue,
+            direction: previousNumberValue < parsedFormattedNewValue ? 'up' : 'down'
           };
-          onChange(e, state);
+
+          // If the old and new values are NaN, don't call onChange
+          // to avoid an unecessary re-render and potential infinite
+          // loop when isControlled.
+          if (!(isNaN(previousNumberValue) && isNaN(parsedFormattedNewValue))) {
+            onChange(e, state);
+          }
+        }
+
+        // If the old and new values are NaN, don't set state to avoid
+        // an unecessary re-render and potential infinite loop when
+        // isControlled.
+        if (!(isNaN(previousNumberValue) && isNaN(numberValue))) {
+          setPreviousNumberValue(numberValue);
+        }
+        if (!(isNaN(numberValue) && isNaN(parsedFormattedNewValue))) {
+          setNumberValue(parsedFormattedNewValue);
         }
       }
-      if (rest.onBlur) {
-        rest.onBlur(e);
+      if (onBlur) {
+        onBlur(e);
       }
     },
     pattern: pattern,
@@ -365,6 +413,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef(function NumberInput(props, fo
     className: `${prefix}--number__control-btn down-icon`,
     disabled: disabled || readOnly,
     onClick: event => handleStepperClick(event, 'down'),
+    onBlur: onBlur,
     tabIndex: -1,
     title: decrementNumLabel || iconDescription,
     type: "button"
@@ -377,6 +426,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef(function NumberInput(props, fo
     className: `${prefix}--number__control-btn up-icon`,
     disabled: disabled || readOnly,
     onClick: event => handleStepperClick(event, 'up'),
+    onBlur: onBlur,
     tabIndex: -1,
     title: incrementNumLabel || iconDescription,
     type: "button"
@@ -481,6 +531,11 @@ NumberInput.propTypes = {
    * The minimum value.
    */
   min: PropTypes.number,
+  /**
+   * Provide an optional handler that is called when the input or stepper
+   * buttons are blurred.
+   */
+  onBlur: PropTypes.func,
   /**
    * Provide an optional handler that is called when the internal state of
    * NumberInput changes. This handler is called with event and state info.

package/es/components/OverflowMenu/OverflowMenu.d.ts

@@ -6,7 +6,7 @@
  */
 import React, { type ElementType, type ReactNode, type Ref } from 'react';
 import { type MenuDirection, type MenuOffset } from '../../internal/FloatingMenu';
-import { PopoverAlignment } from '../Popover';
+import { IconButtonProps } from '../IconButton';
 /**
  * Calculates the offset for the floating menu.
  *
@@ -16,11 +16,7 @@ import { PopoverAlignment } from '../Popover';
  *          the menu arrow.
  */
 export declare const getMenuOffset: MenuOffset;
-export interface OverflowMenuProps {
-    /**
-     * Specify how the trigger tooltip should be aligned.
-     */
-    align?: PopoverAlignment;
+export interface OverflowMenuProps extends Omit<IconButtonProps, 'type' | 'aria-haspopup' | 'aria-expanded' | 'aria-controls' | 'className' | 'onClick' | 'id' | 'ref' | 'size' | 'label' | 'kind'> {
     /**
      * Specify a label to be read by screen readers on the container node
      */

package/es/components/OverflowMenu/OverflowMenu.js

@@ -16,7 +16,7 @@ import { ArrowUp, ArrowRight, ArrowDown, ArrowLeft, Escape } from '../../interna
 import { matches } from '../../internal/keyboard/match.js';
 import { noopFn } from '../../internal/noopFn.js';
 import { PrefixContext } from '../../internal/usePrefix.js';
-import deprecate from '../../prop-types/deprecate.js';
+import { deprecate } from '../../prop-types/deprecate.js';
 import mergeRefs from '../../tools/mergeRefs.js';
 import { setupGetInstanceId } from '../../tools/setupGetInstanceId.js';
 import { IconButton } from '../IconButton/index.js';

package/es/components/Pagination/Pagination.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import { CaretLeft, CaretRight } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import Select from '../Select/Select.js';
 import '../Select/Select.Skeleton.js';
 import SelectItem from '../SelectItem/SelectItem.js';
@@ -83,6 +83,7 @@ const Pagination = /*#__PURE__*/React.forwardRef(function Pagination({
   const [prevPageSizes, setPrevPageSizes] = useState(controlledPageSizes);
   const [page, setPage] = useState(controlledPage);
   const [prevControlledPage, setPrevControlledPage] = useState(controlledPage);
+  const [focusTarget, setFocusTarget] = useState(null);
   const [pageSize, setPageSize] = useState(() => {
     return getPageSize(pageSizes, controlledPageSize);
   });
@@ -106,6 +107,22 @@ const Pagination = /*#__PURE__*/React.forwardRef(function Pagination({
     [`${prefix}--pagination__button--no-index`]: forwardButtonDisabled
   });
   const selectItems = renderSelectItems(totalPages);
+  const focusMap = {
+    backward: backBtnRef,
+    forward: forwardBtnRef
+  };
+  const handleFocus = target => {
+    const targetRef = focusMap[target];
+    if (targetRef?.current && !targetRef.current.disabled) {
+      targetRef.current.focus();
+    }
+  };
+  useEffect(() => {
+    if (focusTarget) {
+      handleFocus(focusTarget);
+      setFocusTarget(null);
+    }
+  }, [focusTarget]);
 
   // Sync state with props
   if (controlledPage !== prevControlledPage) {
@@ -162,8 +179,8 @@ const Pagination = /*#__PURE__*/React.forwardRef(function Pagination({
     // the icon button becomes disabled and the focus shifts to `main`
     // this presents an a11y problem for keyboard & screen reader users
     // instead, we want the focus to shift to the other pagination btn
-    if (nextPage === totalPages && backBtnRef?.current) {
-      backBtnRef.current.focus();
+    if (nextPage === totalPages) {
+      setFocusTarget('backward');
     }
     if (onChange) {
       onChange({
@@ -181,8 +198,8 @@ const Pagination = /*#__PURE__*/React.forwardRef(function Pagination({
     // the icon button becomes disabled and the focus shifts to `main`
     // this presents an a11y problem for keyboard & screen reader users
     // instead, we want the focus to shift to the other pagination btn
-    if (nextPage === 1 && forwardBtnRef?.current) {
-      forwardBtnRef.current.focus();
+    if (nextPage === 1) {
+      setFocusTarget('forward');
     }
     if (onChange) {
       onChange({

package/es/components/RadioButton/RadioButton.js

@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 import React, { useRef, cloneElement } from 'react';
 import cx from 'classnames';
 import '../Text/index.js';
-import deprecate from '../../prop-types/deprecate.js';
+import { deprecate } from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useId } from '../../internal/useId.js';
 import mergeRefs from '../../tools/mergeRefs.js';

package/es/components/RadioButtonGroup/RadioButtonGroup.js

@@ -12,7 +12,7 @@ import cx from 'classnames';
 import { Legend } from '../Text/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
-import deprecate from '../../prop-types/deprecate.js';
+import { deprecate } from '../../prop-types/deprecate.js';
 import mergeRefs from '../../tools/mergeRefs.js';
 import { useId } from '../../internal/useId.js';
 import { AILabel } from '../AILabel/index.js';

package/es/components/RadioTile/RadioTile.js

@@ -14,7 +14,7 @@ import { Enter, Space } from '../../internal/keyboard/keys.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { useFallbackId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
-import deprecate from '../../prop-types/deprecate.js';
+import { deprecate } from '../../prop-types/deprecate.js';
 import { noopFn } from '../../internal/noopFn.js';
 import '../Text/index.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';

package/es/components/Search/Search.js

@@ -16,7 +16,7 @@ import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { composeEventHandlers } from '../../tools/events.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
-import deprecate from '../../prop-types/deprecate.js';
+import { deprecate } from '../../prop-types/deprecate.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { noopFn } from '../../internal/noopFn.js';

package/es/components/Select/Select.js

@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 import React, { useContext, useState, cloneElement } from 'react';
 import cx from 'classnames';
 import { ChevronDown, WarningFilled, WarningAltFilled } from '@carbon/icons-react';
-import deprecate from '../../prop-types/deprecate.js';
+import { deprecate } from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';

package/es/components/Slider/Slider.js

@@ -12,7 +12,7 @@ import cx from 'classnames';
 import { ArrowDown, ArrowLeft, ArrowUp, ArrowRight, Enter } from '../../internal/keyboard/keys.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { PrefixContext } from '../../internal/usePrefix.js';
-import deprecate from '../../prop-types/deprecate.js';
+import { deprecate } from '../../prop-types/deprecate.js';
 import { FeatureFlagContext } from '../FeatureFlags/index.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import '../Text/index.js';

package/es/components/StructuredList/StructuredList.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * 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.
@@ -44,7 +44,7 @@ export declare namespace StructuredListWrapper {
          * Deprecated, please use `aria-label` instead.
          * Specify a label to be read by screen readers on the container note.
          */
-        ariaLabel: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        ariaLabel: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any;
         /**
          * Provide the contents of your StructuredListWrapper
          */
@@ -167,7 +167,7 @@ export declare namespace StructuredListRow {
         /**
          * Specify whether a `<label>` should be used
          */
-        label: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        label: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any;
         /**
          * Provide a handler that is invoked on the click
          */
@@ -214,7 +214,7 @@ export declare namespace StructuredListInput {
         /**
          * Specify whether the underlying input should be checked by default
          */
-        defaultChecked: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        defaultChecked: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any;
         /**
          * Specify a custom `id` for the input
          */
@@ -234,7 +234,7 @@ export declare namespace StructuredListInput {
         /**
          * Specify the value of the input
          */
-        value: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        value: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any;
     };
 }
 export interface StructuredListCellProps extends DivAttrs {

package/es/components/StructuredList/StructuredList.js

@@ -10,7 +10,7 @@ import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { useId } from '../../internal/useId.js';
-import deprecate from '../../prop-types/deprecate.js';
+import { deprecate } from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../Text/index.js';
 import { RadioButtonChecked, RadioButton } from '@carbon/icons-react';

package/es/components/Tabs/Tabs.d.ts

@@ -234,7 +234,7 @@ declare namespace TabList {
         /**
          * Specify whether to use the light component variant
          */
-        light: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        light: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any;
         /**
          * Provide the props that describe the right overflow button
          */

package/es/components/Tabs/Tabs.js

@@ -29,7 +29,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import { ArrowRight, ArrowLeft, Home, End, ArrowDown, ArrowUp, Delete } from '../../internal/keyboard/keys.js';
 import { matches, match } from '../../internal/keyboard/match.js';
 import { usePressable } from './usePressable.js';
-import deprecate from '../../prop-types/deprecate.js';
+import { deprecate } from '../../prop-types/deprecate.js';
 import { useEvent } from '../../internal/useEvent.js';
 import { useMatchMedia } from '../../internal/useMatchMedia.js';
 import '../Text/index.js';

package/es/components/Tag/DismissibleTag.js

@@ -11,7 +11,7 @@ import React, { forwardRef, useRef, useState, useLayoutEffect, cloneElement } fr
 import cx from 'classnames';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
-import deprecate from '../../prop-types/deprecate.js';
+import { deprecate } from '../../prop-types/deprecate.js';
 import Tag, { SIZES, TYPES } from './Tag.js';
 import { Close } from '@carbon/icons-react';
 import '../Tooltip/DefinitionTooltip.js';

package/es/components/Tag/Tag.js

@@ -13,7 +13,7 @@ import { Close } from '@carbon/icons-react';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../Text/index.js';
-import deprecate from '../../prop-types/deprecate.js';
+import { deprecate } from '../../prop-types/deprecate.js';
 import { DefinitionTooltip } from '../Tooltip/DefinitionTooltip.js';
 import '../Tooltip/Tooltip.js';
 import { isEllipsisActive } from './isEllipsisActive.js';

package/es/components/TextArea/TextArea.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import PropTypes from 'prop-types';
 import React, { useContext, useRef, useState, useEffect, forwardRef, cloneElement } from 'react';
 import cx from 'classnames';
-import deprecate from '../../prop-types/deprecate.js';
+import { deprecate } from '../../prop-types/deprecate.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';

package/es/components/TextInput/ControlledPasswordInput.js

@@ -11,7 +11,7 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { WarningFilled, ViewOff, View } from '@carbon/icons-react';
 import { textInputProps } from './util.js';
-import deprecate from '../../prop-types/deprecate.js';
+import { deprecate } from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useId } from '../../internal/useId.js';
 import { noopFn } from '../../internal/noopFn.js';

package/es/components/TextInput/PasswordInput.js

@@ -16,7 +16,7 @@ import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import '../Tooltip/DefinitionTooltip.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
-import deprecate from '../../prop-types/deprecate.js';
+import { deprecate } from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 const PasswordInput = /*#__PURE__*/React.forwardRef(function PasswordInput({

package/es/components/TextInput/TextInput.js

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import React, { useRef, useState, useEffect, useContext, cloneElement } from 'react';
 import cx from 'classnames';
 import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps.js';
-import deprecate from '../../prop-types/deprecate.js';
+import { deprecate } from '../../prop-types/deprecate.js';
 import { textInputProps } from './util.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';

package/es/components/Tile/Tile.js

@@ -13,7 +13,7 @@ import { AiLabel, CheckboxCheckedFilled, Checkbox, ChevronDown, ArrowRight, Erro
 import Link from '../Link/Link.js';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 import { matches } from '../../internal/keyboard/match.js';
-import deprecate from '../../prop-types/deprecate.js';
+import { deprecate } from '../../prop-types/deprecate.js';
 import { composeEventHandlers } from '../../tools/events.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';

package/es/components/TileGroup/TileGroup.d.ts

@@ -7,7 +7,7 @@
 import PropTypes from 'prop-types';
 import { type HTMLAttributes, type ReactNode } from 'react';
 type ExcludedAttributes = 'onChange';
-export interface TileGroupProps extends Omit<HTMLAttributes<HTMLFieldSetElement>, ExcludedAttributes> {
+export interface TileGroupProps<T = string | number> extends Omit<HTMLAttributes<HTMLFieldSetElement>, ExcludedAttributes> {
     /**
      * Provide a collection of <RadioTile> components to render in the group
      */
@@ -19,7 +19,7 @@ export interface TileGroupProps extends Omit<HTMLAttributes<HTMLFieldSetElement>
     /**
      * Specify the the value of <RadioTile> to be selected by default
      */
-    defaultSelected?: string | number;
+    defaultSelected?: T;
     /**
      * Specify whether the group is disabled
      */
@@ -35,18 +35,18 @@ export interface TileGroupProps extends Omit<HTMLAttributes<HTMLFieldSetElement>
     /**
      * 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: T, name: string, evt: unknown) => void;
     /**
      * Specify the value that is currently selected in the group
      */
-    valueSelected?: string | number;
+    valueSelected?: T;
     /**
      * `true` to specify if input selection in group is required.
      */
     required?: boolean;
 }
 export declare const TileGroup: {
-    ({ children, className, defaultSelected, disabled, legend, name, onChange, valueSelected, required, }: TileGroupProps): import("react/jsx-runtime").JSX.Element;
+    <T extends string | number = string>({ children, className, defaultSelected, disabled, legend, name, onChange, valueSelected, required, }: TileGroupProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
     propTypes: {
         /**

package/es/components/TimePicker/TimePicker.d.ts

@@ -15,6 +15,14 @@ export interface TimePickerProps extends Omit<HTMLAttributes<HTMLInputElement>,
      * Specify an optional className to be applied to the container node
      */
     className?: string;
+    /**
+     * Specify an optional className to be applied to the `<input>` node
+     */
+    inputClassName?: string;
+    /**
+     * Specify an optional className to be applied to the container that wraps the `<input>` and select option
+     */
+    pickerClassName?: string;
     /**
      * Specify whether the `<input>` should be disabled
      */

package/es/components/TimePicker/TimePicker.js

@@ -10,7 +10,7 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { forwardRef } from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
-import deprecate from '../../prop-types/deprecate.js';
+import { deprecate } from '../../prop-types/deprecate.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 
 const frFn = forwardRef;
@@ -18,6 +18,8 @@ const TimePicker = frFn((props, ref) => {
   const {
     children,
     className,
+    inputClassName,
+    pickerClassName,
     disabled = false,
     hideLabel,
     id,
@@ -68,7 +70,7 @@ const TimePicker = frFn((props, ref) => {
       onBlur(evt);
     }
   }
-  const timePickerInputClasses = cx(`${prefix}--time-picker__input-field`, `${prefix}--text-input`, [className], {
+  const timePickerInputClasses = cx(`${prefix}--time-picker__input-field`, `${prefix}--text-input`, [inputClassName], {
     [`${prefix}--text-input--light`]: light,
     [`${prefix}--time-picker__input-field-error`]: invalid || warning
   });
@@ -79,8 +81,8 @@ const TimePicker = frFn((props, ref) => {
     [`${prefix}--time-picker--warning`]: warning,
     [`${prefix}--time-picker--readonly`]: readOnly,
     [`${prefix}--time-picker--${size}`]: size,
-    ...(className && {
-      [className]: true
+    ...(pickerClassName && {
+      [pickerClassName]: true
     })
   });
   const labelClasses = cx(`${prefix}--label`, {

package/es/components/Tooltip/DefinitionTooltip.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * 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.

package/es/components/Tooltip/DefinitionTooltip.js

@@ -14,7 +14,7 @@ import { Escape } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
 import { useFallbackId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
-import deprecate from '../../prop-types/deprecate.js';
+import { deprecate } from '../../prop-types/deprecate.js';
 
 const DefinitionTooltip = ({
   align = 'bottom',