@carbon/react 1.84.0 → 1.85.0

package/es/components/RadioButton/RadioButton.js

@@ -7,13 +7,15 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React, { useRef } from 'react';
+import React, { useRef, cloneElement } from 'react';
 import cx from 'classnames';
 import '../Text/index.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';
+import { AILabel } from '../AILabel/index.js';
+import { isComponentElement } from '../../internal/utils.js';
 import { Text } from '../Text/Text.js';
 
 const RadioButton = /*#__PURE__*/React.forwardRef((props, ref) => {
@@ -47,13 +49,11 @@ const RadioButton = /*#__PURE__*/React.forwardRef((props, ref) => {
     [`${prefix}--radio-button-wrapper--decorator`]: decorator
   });
   const inputRef = useRef(null);
-  let normalizedDecorator = /*#__PURE__*/React.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
-  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
-    const size = normalizedDecorator.props?.['kind'] === 'inline' ? 'md' : 'mini';
-    normalizedDecorator = /*#__PURE__*/React.cloneElement(normalizedDecorator, {
-      size
-    });
-  }
+  const candidate = slug ?? decorator;
+  const candidateIsAILabel = isComponentElement(candidate, AILabel);
+  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/cloneElement(candidate, {
+    size: candidate.props?.['kind'] === 'inline' ? 'md' : 'mini'
+  }) : null;
   return /*#__PURE__*/React.createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React.createElement("input", _extends({}, rest, {

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

@@ -1,10 +1,10 @@
 /**
- * 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.
  */
-import React, { ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 import type { RadioButtonProps } from '../RadioButton';
 export declare const RadioButtonGroupContext: React.Context<null>;
 type ExcludedAttributes = 'onChange';

package/es/components/RadioButtonGroup/RadioButtonGroup.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, cloneElement } from 'react';
 import cx from 'classnames';
 import { Legend } from '../Text/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -15,6 +15,8 @@ import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 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';
+import { isComponentElement } from '../../internal/utils.js';
 
 const RadioButtonGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
@@ -103,13 +105,12 @@ const RadioButtonGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
   const divRef = useRef(null);
 
   // AILabel is always size `mini`
-  let normalizedDecorator = /*#__PURE__*/React.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
-  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
-    normalizedDecorator = /*#__PURE__*/React.cloneElement(normalizedDecorator, {
-      size: 'mini',
-      kind: 'default'
-    });
-  }
+  const candidate = slug ?? decorator;
+  const candidateIsAILabel = isComponentElement(candidate, AILabel);
+  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/cloneElement(candidate, {
+    size: 'mini',
+    kind: 'default'
+  }) : null;
   return /*#__PURE__*/React.createElement("div", {
     className: wrapperClasses,
     ref: mergeRefs(divRef, ref)

package/es/components/RadioTile/RadioTile.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/RadioTile/RadioTile.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import { RadioButtonChecked, RadioButton, CheckmarkFilled } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { cloneElement } from 'react';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { useFallbackId } from '../../internal/useId.js';
@@ -18,6 +18,8 @@ import deprecate from '../../prop-types/deprecate.js';
 import { noopFn } from '../../internal/noopFn.js';
 import '../Text/index.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
+import { AILabel } from '../AILabel/index.js';
+import { isComponentElement } from '../../internal/utils.js';
 import { Text } from '../Text/Text.js';
 
 var _RadioButtonChecked, _RadioButton, _CheckmarkFilled;
@@ -72,12 +74,11 @@ const RadioTile = /*#__PURE__*/React.forwardRef(function RadioTile({
   }
 
   // AILabel is always size `xs`
-  let normalizedDecorator = /*#__PURE__*/React.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
-  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
-    normalizedDecorator = /*#__PURE__*/React.cloneElement(normalizedDecorator, {
-      size: 'xs'
-    });
-  }
+  const candidate = slug ?? decorator;
+  const candidateIsAILabel = isComponentElement(candidate, AILabel);
+  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/cloneElement(candidate, {
+    size: 'xs'
+  }) : null;
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
     checked: checked,
     className: `${prefix}--tile-input`,

package/es/components/Select/Select.d.ts

@@ -1,10 +1,10 @@
 /**
- * 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.
  */
-import React, { ChangeEventHandler, ComponentPropsWithRef, ReactNode } from 'react';
+import React, { type ChangeEventHandler, type ComponentPropsWithRef, type ReactNode } from 'react';
 type ExcludedAttributes = 'size';
 export interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, ExcludedAttributes> {
     /**

package/es/components/Select/Select.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React, { useContext, useState } from 'react';
+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';
@@ -17,6 +17,8 @@ import { FormContext } from '../FluidForm/FormContext.js';
 import { useId } from '../../internal/useId.js';
 import { composeEventHandlers } from '../../tools/events.js';
 import '../Text/index.js';
+import { AILabel } from '../AILabel/index.js';
+import { isComponentElement } from '../../internal/utils.js';
 import { Text } from '../Text/Text.js';
 
 const Select = /*#__PURE__*/React.forwardRef(function Select({
@@ -134,12 +136,11 @@ const Select = /*#__PURE__*/React.forwardRef(function Select({
   };
 
   // AILabel always size `mini`
-  let normalizedDecorator = /*#__PURE__*/React.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
-  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
-    normalizedDecorator = /*#__PURE__*/React.cloneElement(normalizedDecorator, {
-      size: 'mini'
-    });
-  }
+  const candidate = slug ?? decorator;
+  const candidateIsAILabel = isComponentElement(candidate, AILabel);
+  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/cloneElement(candidate, {
+    size: 'mini'
+  }) : null;
   const input = (() => {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("select", _extends({}, other, ariaProps, {
       id: id,

package/es/components/Slider/Slider.d.ts

@@ -4,8 +4,7 @@
  * 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 React, { type KeyboardEventHandler, PureComponent, ReactNode } from 'react';
-import PropTypes from 'prop-types';
+import React, { PureComponent, ReactNode, type ChangeEvent, type FocusEvent, type InputHTMLAttributes, type KeyboardEvent, type KeyboardEventHandler, type MouseEvent, type RefObject, type TouchEvent } from 'react';
 import { TranslateWithId } from '../../types/common';
 declare const translationIds: {
     readonly autoCorrectAnnouncement: "carbon.slider.auto-correct-announcement";
@@ -14,15 +13,12 @@ declare const translationIds: {
  * Message ids that will be passed to translateWithId().
  */
 type TranslationKey = (typeof translationIds)[keyof typeof translationIds];
-/**
- * Distinguish two handles by lower and upper positions.
- */
 declare enum HandlePosition {
     LOWER = "lower",
     UPPER = "upper"
 }
 type ExcludedAttributes = 'onChange' | 'onBlur';
-export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes>, TranslateWithId<TranslationKey, {
+export interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes>, TranslateWithId<TranslationKey, {
     correctedValue?: string;
 }> {
     /**
@@ -116,14 +112,13 @@ export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
     }) => void;
     /**
      * The callback to get notified of change in value.
-     * `({ value: number, valueUpper?: number }) => void`
      */
     onChange?: (data: {
         value: SliderProps['value'];
         valueUpper: SliderProps['unstable_valueUpper'];
     }) => void;
     /**
-     * Provide an optional function to be called when a key is pressed in the number input. When there are two handles, you can obtain the relevant handle position by using `event.target.dataset.handlePosition`.
+     * Provide an optional function to be called when a key is pressed in the number input.
      */
     onInputKeyUp?: KeyboardEventHandler<HTMLInputElement>;
     /**
@@ -166,7 +161,7 @@ export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
     /**
      * Provide the text that is displayed when the control is in warning state
      */
-    warnText?: React.ReactNode;
+    warnText?: ReactNode;
 }
 interface CalcLeftPercentProps {
     clientX?: number;
@@ -174,146 +169,8 @@ interface CalcLeftPercentProps {
     range?: number;
 }
 declare class Slider extends PureComponent<SliderProps> {
-    static propTypes: {
-        /**
-         * The `ariaLabel` for the `<input>`.
-         */
-        ariaLabelInput: PropTypes.Requireable<string>;
-        /**
-         * The child nodes.
-         */
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * The CSS class name for the slider.
-         */
-        className: PropTypes.Requireable<string>;
-        /**
-         * `true` to disable this slider.
-         */
-        disabled: PropTypes.Requireable<boolean>;
-        /**
-         * The callback to format the label associated with the minimum/maximum value.
-         */
-        formatLabel: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * `true` to hide the number input box.
-         */
-        hideTextInput: PropTypes.Requireable<boolean>;
-        /**
-         * The ID of the `<input>`.
-         */
-        id: PropTypes.Requireable<string>;
-        /**
-         * The `type` attribute of the `<input>`.
-         */
-        inputType: PropTypes.Requireable<string>;
-        /**
-         * `Specify whether the Slider is currently invalid
-         */
-        invalid: PropTypes.Requireable<boolean>;
-        /**
-         * Provide the text that is displayed when the Slider is in an invalid state
-         */
-        invalidText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * The label for the slider.
-         */
-        labelText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * Specify whether you want the underlying label to be visually hidden
-         */
-        hideLabel: PropTypes.Requireable<boolean>;
-        /**
-         * `true` to use the light version.
-         */
-        light: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
-        /**
-         * The maximum value.
-         */
-        max: PropTypes.Validator<number>;
-        /**
-         * The label associated with the maximum value.
-         */
-        maxLabel: PropTypes.Requireable<string>;
-        /**
-         * The minimum value.
-         */
-        min: PropTypes.Validator<number>;
-        /**
-         * The label associated with the minimum value.
-         */
-        minLabel: PropTypes.Requireable<string>;
-        /**
-         * The `name` attribute of the `<input>`.
-         */
-        name: PropTypes.Requireable<string>;
-        /**
-         * Provide an optional function to be called when the input element
-         * loses focus
-         */
-        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * The callback to get notified of change in value.
-         */
-        onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * Provide an optional function to be called when a key is pressed in the number input
-         */
-        onInputKeyUp: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * The callback to get notified of value on handle release.
-         */
-        onRelease: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * Whether the slider should be read-only
-         */
-        readOnly: PropTypes.Requireable<boolean>;
-        /**
-         * `true` to specify if the control is required.
-         */
-        required: PropTypes.Requireable<boolean>;
-        /**
-         * A value determining how much the value should increase/decrease by moving the thumb by mouse. If a value other than 1 is provided and the input is *not* hidden, the new step requirement should be added to a visible label. Values outside the `step` increment will be considered invalid.
-         */
-        step: PropTypes.Requireable<number>;
-        /**
-         * A value determining how much the value should increase/decrease by Shift+arrow keys,
-         * which will be `(max - min) / stepMultiplier`.
-         */
-        stepMultiplier: PropTypes.Requireable<number>;
-        /**
-         * Supply a method to translate internal strings with your i18n tool of
-         * choice. Translation keys are available on the `translationIds` field for
-         * this component.
-         */
-        translateWithId: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * The `ariaLabel` for the upper bound `<input>` when there are two handles.
-         */
-        unstable_ariaLabelInputUpper: PropTypes.Requireable<string>;
-        /**
-         * The `name` attribute of the upper bound `<input>` when there are two handles.
-         */
-        unstable_nameUpper: PropTypes.Requireable<string>;
-        /**
-         * The upper bound when there are two handles.
-         */
-        unstable_valueUpper: PropTypes.Requireable<number>;
-        /**
-         * The value of the slider. When there are two handles, value is the lower
-         * bound.
-         */
-        value: PropTypes.Validator<number>;
-        /**
-         * `Specify whether the Slider is in a warn state
-         */
-        warn: PropTypes.Requireable<boolean>;
-        /**
-         * Provide the text that is displayed when the Slider is in a warn state
-         */
-        warnText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    };
     static contextType: React.Context<any>;
+    static translationIds: "carbon.slider.auto-correct-announcement"[];
     state: {
         value: number;
         valueUpper: number | undefined;
@@ -322,14 +179,14 @@ declare class Slider extends PureComponent<SliderProps> {
         needsOnRelease: boolean;
         isValid: boolean;
         isValidUpper: boolean;
-        activeHandle: null;
+        activeHandle: undefined;
         correctedValue: null;
         correctedPosition: null;
         isRtl: boolean;
     };
-    thumbRef: React.RefObject<HTMLDivElement | null>;
-    thumbRefUpper: React.RefObject<HTMLDivElement | null>;
-    filledTrackRef: React.RefObject<HTMLDivElement | null>;
+    thumbRef: RefObject<HTMLDivElement | null>;
+    thumbRefUpper: RefObject<HTMLDivElement | null>;
+    filledTrackRef: RefObject<HTMLDivElement | null>;
     element: HTMLDivElement | null;
     inputId: string;
     track: HTMLDivElement | null | undefined;
@@ -355,16 +212,15 @@ declare class Slider extends PureComponent<SliderProps> {
      * @returns The value rounded to the precision determined by the step.
      */
     nearestStepValue(value?: number): number;
+    handleDrag: (event: Event) => void;
     /**
      * Sets up "drag" event handlers and calls `this.onDrag` in case dragging
      * started on somewhere other than the thumb without a corresponding "move"
      * event.
-     *
-     * @param {Event} evt The event.
      */
-    onDragStart: (evt: any) => void;
+    onDragStart: (evt: MouseEvent<HTMLDivElement> | TouchEvent<HTMLDivElement>) => void;
     /**
-     * Unregisters "drag" and "drag stop" event handlers and calls sets the flag
+     * Removes "drag" and "drag stop" event handlers and calls sets the flag
      * indicating that the `onRelease` callback should be called.
      */
     onDragStop: () => void;
@@ -372,40 +228,33 @@ declare class Slider extends PureComponent<SliderProps> {
      * Handles a "drag" event by recalculating the value/thumb and setting state
      * accordingly.
      *
-     * @param {Event} evt The event.
-     * @param activeHandle
-     *   The first drag event call, we may have an explicit activeHandle value,
-     *   which is to be used before state is used.
+     * @param evt The event.
+     * @param activeHandle The first drag event call, we may have an explicit
+     * activeHandle value, which is to be used before state is used.
      */
-    _onDrag: (evt: any, activeHandle?: HandlePosition | null) => void;
+    _onDrag: (evt: globalThis.MouseEvent | globalThis.TouchEvent, activeHandle?: HandlePosition) => void;
     /**
      * Throttles calls to `this._onDrag` by limiting events to being processed at
      * most once every `EVENT_THROTTLE` milliseconds.
      */
-    onDrag: import("es-toolkit/compat").DebouncedFunc<(evt: any, activeHandle?: HandlePosition | null) => void>;
+    onDrag: import("es-toolkit/compat").DebouncedFunc<(evt: globalThis.MouseEvent | globalThis.TouchEvent, activeHandle?: HandlePosition) => void>;
     /**
      * Handles a `keydown` event by recalculating the value/thumb and setting
      * state accordingly.
-     *
-     * @param {Event} evt The event.
      */
-    onKeyDown: (evt: any) => void;
+    onKeyDown: (evt: KeyboardEvent<HTMLDivElement>) => void;
     /**
      * Provides the two-way binding for the input field of the Slider. It also
      * Handles a change to the input field by recalculating the value/thumb and
      * setting state accordingly.
-     *
-     * @param {Event} evt The event.
      */
-    onChange: (evt: any) => void;
+    onChange: (evt: ChangeEvent<HTMLInputElement>) => void;
     /**
      * Checks for validity of input value after clicking out of the input. It also
      * Handles state change to isValid state.
-     *
-     * @param {Event} evt The event.
      */
-    onBlur: (evt: React.FocusEvent<HTMLInputElement>) => void;
-    onInputKeyDown: (evt: any) => void;
+    onBlur: (evt: FocusEvent<HTMLInputElement>) => void;
+    onInputKeyDown: (evt: KeyboardEvent<HTMLInputElement>) => void;
     processNewInputValue: (input: HTMLInputElement) => void;
     calcLeftPercent: ({ clientX, value, range }: CalcLeftPercentProps) => number;
     /**
@@ -434,7 +283,7 @@ declare class Slider extends PureComponent<SliderProps> {
         value: number | undefined;
         left: number;
     };
-    calcDistanceToHandle: (handle: HandlePosition, clientX: any) => number;
+    calcDistanceToHandle: (handle: HandlePosition, clientX: number) => number;
     /**
      * Calculates a new slider value based on the current value, a change delta,
      * and a step.
@@ -452,41 +301,53 @@ declare class Slider extends PureComponent<SliderProps> {
      * Guards against setting either lower or upper values beyond its counterpart.
      */
     setValueLeftForHandle: (handle: HandlePosition, { value: newValue, left: newLeft }: {
-        value: any;
-        left: any;
+        value: number;
+        left: number;
     }) => void;
-    setValueForHandle: (handle: HandlePosition, value: any) => void;
-    isValidValueForPosition: ({ handle, value: newValue, min, max }: {
-        handle: any;
-        value: any;
-        min: any;
-        max: any;
+    setValueForHandle: (handle: HandlePosition, value: number | string) => void;
+    isValidValueForPosition: ({ handle, value: newValue, min, max, }: {
+        handle: HandlePosition;
+        value: number;
+        min: number;
+        max: number;
     }) => boolean;
-    isValidValue: ({ value, min, max }: {
-        value: any;
-        min: any;
-        max: any;
+    isValidValue: ({ value, min, max, }: {
+        value: number;
+        min: number;
+        max: number;
     }) => boolean;
-    getAdjustedValueForPosition: ({ handle, value: newValue, min, max }: {
-        handle: any;
-        value: any;
-        min: any;
-        max: any;
-    }) => any;
-    getAdjustedValue: ({ value, min, max }: {
-        value: any;
-        min: any;
-        max: any;
-    }) => any;
+    getAdjustedValueForPosition: ({ handle, value: newValue, min, max, }: {
+        handle: HandlePosition;
+        value: number;
+        min: number;
+        max: number;
+    }) => number;
+    getAdjustedValue: ({ value, min, max, }: {
+        value: number;
+        min: number;
+        max: number;
+    }) => number;
     /**
      * Get the bounding rect for the requested handles' DOM element.
      *
      * If the bounding rect is not available, a new, empty DOMRect is returned.
      */
     getHandleBoundingRect: (handle: HandlePosition) => DOMRect;
-    getClientXFromEvent(event: MouseEvent | TouchEvent): any;
+    getClientXFromEvent(event: globalThis.MouseEvent | globalThis.TouchEvent): number | undefined;
     hasTwoHandles(): boolean;
-    static getDerivedStateFromProps(props: any, state: any): {} | null;
+    static getDerivedStateFromProps(props: SliderProps, state: Slider['state']): Partial<{
+        value: number;
+        valueUpper: number | undefined;
+        left: number;
+        leftUpper: number;
+        needsOnRelease: boolean;
+        isValid: boolean;
+        isValidUpper: boolean;
+        activeHandle: undefined;
+        correctedValue: null;
+        correctedPosition: null;
+        isRtl: boolean;
+    }> | null;
     render(): import("react/jsx-runtime").JSX.Element;
 }
 export default Slider;