@carbon/react 1.95.0-rc.0 → 1.95.1-rc.0

package/lib/components/ComboBox/ComboBox.js

@@ -279,17 +279,23 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
           // If custom values are allowed, treat whatever the user typed as
           // the value.
           if (allowCustomValue && highlightedIndex === -1) {
-            const {
-              inputValue
-            } = state;
-            changes.selectedItem = inputValue;
-            if (onChange) {
+            const inputValue = state.inputValue ?? '';
+            const currentSelectedItem = typeof changes.selectedItem === 'undefined' ? state.selectedItem : changes.selectedItem;
+            const isMatchingSelection = currentSelectedItem !== null && typeof currentSelectedItem !== 'undefined' && itemToString(currentSelectedItem) === inputValue && items.some(item => isEqual(item, currentSelectedItem));
+            if (isMatchingSelection) {
+              return changes;
+            }
+            const nextSelectedItem = items.find(item => itemToString(item) === inputValue) ?? inputValue;
+            if (!isEqual(currentSelectedItem, nextSelectedItem) && onChange) {
               onChange({
-                selectedItem: inputValue,
+                selectedItem: nextSelectedItem,
                 inputValue
               });
             }
-            return changes;
+            return {
+              ...changes,
+              selectedItem: nextSelectedItem
+            };
           }
 
           // If a new item was selected, keep its label in the input.
@@ -637,7 +643,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     title: textInput?.current?.value
   }, getInputProps({
     'aria-label': titleText ? undefined : deprecatedAriaLabel || ariaLabel,
-    'aria-controls': isOpen ? undefined : menuProps.id,
+    'aria-controls': menuProps.id,
     placeholder,
     value: inputValue,
     ...inputProps,
@@ -756,13 +762,13 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     } = itemProps;
     return /*#__PURE__*/React.createElement(index$2.default.MenuItem, _rollupPluginBabelHelpers.extends({
       key: itemProps.id,
-      isActive: selectedItem === item,
+      isActive: isEqual(selectedItem, item),
       isHighlighted: highlightedIndex === index,
       title: title,
       disabled: disabled
     }, modifiedItemProps), ItemToElement ? /*#__PURE__*/React.createElement(ItemToElement, _rollupPluginBabelHelpers.extends({
       key: itemProps.id
-    }, item)) : itemToString(item), selectedItem === item && /*#__PURE__*/React.createElement(iconsReact.Checkmark, {
+    }, item)) : itemToString(item), isEqual(selectedItem, item) && /*#__PURE__*/React.createElement(iconsReact.Checkmark, {
       className: `${prefix}--list-box__menu-item__selected-icon`
     }));
   }) : null)), helperText && !invalid && !warn && !isFluid && /*#__PURE__*/React.createElement(Text.Text, {

package/lib/components/Dropdown/Dropdown.js

@@ -21,7 +21,7 @@ var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
-var useId = require('../../internal/useId.js');
+var useNormalizedInputProps = require('../../internal/useNormalizedInputProps.js');
 var react = require('@floating-ui/react');
 var index = require('../FeatureFlags/index.js');
 var index$1 = require('../AILabel/index.js');
@@ -193,7 +193,6 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
   }),
   // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
   [items, itemToString, initialSelectedItem, onSelectedItemChange, stateReducer, isItemDisabled, onHighlightedIndexChange, downshiftProps]);
-  const dropdownInstanceId = useId.useId();
 
   // only set selectedItem if the prop is defined. Setting if it is undefined
   // will overwrite default selected items from useSelect
@@ -210,15 +209,23 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
     highlightedIndex
   } = Downshift.useSelect(selectProps);
   const inline = type === 'inline';
-  const showWarning = !invalid && warn;
+  const normalizedProps = useNormalizedInputProps.useNormalizedInputProps({
+    id,
+    readOnly,
+    disabled: disabled ?? false,
+    invalid: invalid ?? false,
+    invalidText,
+    warn: warn ?? false,
+    warnText
+  });
   const [isFocused, setIsFocused] = React.useState(false);
   const className = cx(`${prefix}--dropdown`, {
-    [`${prefix}--dropdown--invalid`]: invalid,
-    [`${prefix}--dropdown--warning`]: showWarning,
+    [`${prefix}--dropdown--invalid`]: normalizedProps.invalid,
+    [`${prefix}--dropdown--warning`]: normalizedProps.warn,
     [`${prefix}--dropdown--open`]: isOpen,
     [`${prefix}--dropdown--focus`]: isFocused,
     [`${prefix}--dropdown--inline`]: inline,
-    [`${prefix}--dropdown--disabled`]: disabled,
+    [`${prefix}--dropdown--disabled`]: normalizedProps.disabled,
     [`${prefix}--dropdown--light`]: light,
     [`${prefix}--dropdown--readonly`]: readOnly,
     [`${prefix}--dropdown--${size}`]: size,
@@ -226,22 +233,21 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
     [`${prefix}--autoalign`]: autoAlign
   });
   const titleClasses = cx(`${prefix}--label`, {
-    [`${prefix}--label--disabled`]: disabled,
+    [`${prefix}--label--disabled`]: normalizedProps.disabled,
     [`${prefix}--visually-hidden`]: hideLabel
   });
   const helperClasses = cx(`${prefix}--form__helper-text`, {
-    [`${prefix}--form__helper-text--disabled`]: disabled
+    [`${prefix}--form__helper-text--disabled`]: normalizedProps.disabled
   });
   const wrapperClasses = cx(`${prefix}--dropdown__wrapper`, `${prefix}--list-box__wrapper`, containerClassName, {
     [`${prefix}--dropdown__wrapper--inline`]: inline,
     [`${prefix}--list-box__wrapper--inline`]: inline,
-    [`${prefix}--dropdown__wrapper--inline--invalid`]: inline && invalid,
-    [`${prefix}--list-box__wrapper--inline--invalid`]: inline && invalid,
-    [`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && invalid,
+    [`${prefix}--dropdown__wrapper--inline--invalid`]: inline && normalizedProps.invalid,
+    [`${prefix}--list-box__wrapper--inline--invalid`]: inline && normalizedProps.invalid,
+    [`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && normalizedProps.invalid,
     [`${prefix}--list-box__wrapper--slug`]: slug,
     [`${prefix}--list-box__wrapper--decorator`]: decorator
   });
-  const helperId = !helperText ? undefined : `dropdown-helper-text-${dropdownInstanceId}`;
 
   // needs to be Capitalized for react to render it correctly
   const ItemToElement = itemToElement;
@@ -249,7 +255,7 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
     'aria-label': ariaLabel || deprecatedAriaLabel
   });
   const helper = helperText && !isFluid ? /*#__PURE__*/React.createElement("div", {
-    id: helperId,
+    id: normalizedProps.helperId,
     className: helperClasses
   }, helperText) : null;
   const handleFocus = evt => {
@@ -331,27 +337,25 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
     onBlur: handleFocus,
     size: size,
     className: className,
-    invalid: invalid,
-    invalidText: invalidText,
-    warn: warn,
-    warnText: warnText,
+    invalid: normalizedProps.invalid,
+    warn: normalizedProps.warn,
     light: light,
     isOpen: isOpen,
     ref: enableFloatingStyles || autoAlign ? refs.setReference : null,
     id: id
-  }, invalid && /*#__PURE__*/React.createElement(iconsReact.WarningFilled, {
+  }, normalizedProps.invalid && /*#__PURE__*/React.createElement(iconsReact.WarningFilled, {
     className: `${prefix}--list-box__invalid-icon`
-  }), showWarning && /*#__PURE__*/React.createElement(iconsReact.WarningAltFilled, {
+  }), normalizedProps.warn && /*#__PURE__*/React.createElement(iconsReact.WarningAltFilled, {
     className: `${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`
   }), /*#__PURE__*/React.createElement("button", _rollupPluginBabelHelpers.extends({
     type: "button"
     // aria-expanded is already being passed through {...toggleButtonProps}
     ,
     className: `${prefix}--list-box__field`,
-    disabled: disabled,
+    disabled: normalizedProps.disabled,
     "aria-disabled": readOnly ? true : undefined // aria-disabled to remain focusable
     ,
-    "aria-describedby": !inline && !invalid && !warn && helper ? helperId : undefined,
+    "aria-describedby": !inline && !normalizedProps.invalid && !normalizedProps.warn && helper ? normalizedProps.helperId : normalizedProps.invalid ? normalizedProps.invalidId : normalizedProps.warn ? normalizedProps.warnId : undefined,
     title: selectedItem && itemToString !== undefined ? itemToString(selectedItem) : defaultItemToString.defaultItemToString(label)
   }, toggleButtonProps, readOnlyEventHandlers, {
     ref: mergedRef
@@ -382,7 +386,7 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
     }, item)) : itemToString(item), selectedItem === item && /*#__PURE__*/React.createElement(iconsReact.Checkmark, {
       className: `${prefix}--list-box__menu-item__selected-icon`
     }));
-  }))), !inline && !invalid && !warn && helper);
+  }))), !inline && !isFluid && !normalizedProps.validation && helper, !inline && !isFluid && normalizedProps.validation);
 });
 
 // Workaround problems with forwardRef() and generics.  In the long term, should stop using forwardRef().

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -697,7 +697,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
     translateWithId: translateWithId
   }))), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--list-box__inner-wrapper--decorator`
-  }, normalizedDecorator) : '', /*#__PURE__*/React.createElement(index$1.default.Menu, menuProps, isOpen ? sortedItems.map((item, index) => {
+  }, candidateIsAILabel ? normalizedDecorator : /*#__PURE__*/React.createElement("span", null, normalizedDecorator)) : '', /*#__PURE__*/React.createElement(index$1.default.Menu, menuProps, isOpen ? sortedItems.map((item, index) => {
     let isChecked;
     let isIndeterminate = false;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452

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

@@ -71,6 +71,26 @@ export interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInp
      * `true` to specify if the input is required.
      */
     required?: boolean;
+    /**
+     * Specify whether the control is currently invalid
+     */
+    invalid?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in an invalid state
+     */
+    invalidText?: ReactNode;
+    /**
+     * Specify whether the control is currently in warning state
+     */
+    warn?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in warning state
+     */
+    warnText?: ReactNode;
+    /**
+     * Specify whether the RadioButton should be read-only
+     */
+    readOnly?: boolean;
 }
 declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<HTMLInputElement>>;
 export default RadioButton;

package/lib/components/RadioButton/RadioButton.js

@@ -21,12 +21,13 @@ var useId = require('../../internal/useId.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
 var index = require('../AILabel/index.js');
 var utils = require('../../internal/utils.js');
+var useNormalizedInputProps = require('../../internal/useNormalizedInputProps.js');
 
 const RadioButton = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     className,
     decorator,
-    disabled,
+    disabled = false,
     hideLabel,
     id,
     labelPosition = 'right',
@@ -36,11 +37,25 @@ const RadioButton = /*#__PURE__*/React.forwardRef((props, ref) => {
     value = '',
     slug,
     required,
+    invalid = false,
+    invalidText,
+    warn = false,
+    warnText,
+    readOnly,
     ...rest
   } = props;
   const prefix = usePrefix.usePrefix();
   const uid = useId.useId('radio-button');
   const uniqueId = id || uid;
+  const normalizedProps = useNormalizedInputProps.useNormalizedInputProps({
+    id: uniqueId,
+    readOnly,
+    disabled,
+    invalid,
+    invalidText,
+    warn,
+    warnText
+  });
   function handleOnChange(event) {
     onChange(value, name, event);
   }
@@ -50,7 +65,9 @@ const RadioButton = /*#__PURE__*/React.forwardRef((props, ref) => {
   const wrapperClasses = cx(className, `${prefix}--radio-button-wrapper`, {
     [`${prefix}--radio-button-wrapper--label-${labelPosition}`]: labelPosition !== 'right',
     [`${prefix}--radio-button-wrapper--slug`]: slug,
-    [`${prefix}--radio-button-wrapper--decorator`]: decorator
+    [`${prefix}--radio-button-wrapper--decorator`]: decorator,
+    [`${prefix}--radio-button-wrapper--invalid`]: normalizedProps.invalid,
+    [`${prefix}--radio-button-wrapper--warning`]: normalizedProps.warn
   });
   const inputRef = React.useRef(null);
   const candidate = slug ?? decorator;
@@ -66,10 +83,11 @@ const RadioButton = /*#__PURE__*/React.forwardRef((props, ref) => {
     onChange: handleOnChange,
     id: uniqueId,
     ref: mergeRefs.mergeRefs(inputRef, ref),
-    disabled: disabled,
+    disabled: normalizedProps.disabled,
     value: value,
     name: name,
-    required: required
+    required: required,
+    readOnly: readOnly
   })), /*#__PURE__*/React.createElement("label", {
     htmlFor: uniqueId,
     className: `${prefix}--radio-button__label`
@@ -79,7 +97,7 @@ const RadioButton = /*#__PURE__*/React.forwardRef((props, ref) => {
     className: innerLabelClasses
   }, labelText, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--radio-button-wrapper-inner--decorator`
-  }, normalizedDecorator) : '')));
+  }, normalizedDecorator) : '')), normalizedProps.validation);
 });
 RadioButton.displayName = 'RadioButton';
 RadioButton.propTypes = {
@@ -138,6 +156,26 @@ RadioButton.propTypes = {
    * `true` to specify if the control is required.
    */
   required: PropTypes.bool,
+  /**
+   * Specify whether the control is currently invalid
+   */
+  invalid: PropTypes.bool,
+  /**
+   * Provide the text that is displayed when the control is in an invalid state
+   */
+  invalidText: PropTypes.node,
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn: PropTypes.bool,
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  warnText: PropTypes.node,
+  /**
+   * Specify whether the RadioButton should be read-only
+   */
+  readOnly: PropTypes.bool,
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButton` component
    */

package/lib/components/RadioButtonGroup/RadioButtonGroup.js

@@ -86,14 +86,14 @@ const RadioButtonGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
       }
     }
   }
-  const showWarning = !readOnly && !invalid && warn;
+  const showWarning = !readOnly && !disabled && !invalid && warn;
   const showHelper = !invalid && !disabled && !warn;
   const wrapperClasses = cx(`${prefix}--form-item`, className);
   const fieldsetClasses = cx(`${prefix}--radio-button-group`, {
     [`${prefix}--radio-button-group--${orientation}`]: orientation === 'vertical',
     [`${prefix}--radio-button-group--label-${labelPosition}`]: labelPosition,
     [`${prefix}--radio-button-group--readonly`]: readOnly,
-    [`${prefix}--radio-button-group--invalid`]: !readOnly && invalid,
+    [`${prefix}--radio-button-group--invalid`]: !readOnly && !disabled && invalid,
     [`${prefix}--radio-button-group--warning`]: showWarning,
     [`${prefix}--radio-button-group--slug`]: slug,
     [`${prefix}--radio-button-group--decorator`]: decorator
@@ -129,7 +129,7 @@ const RadioButtonGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
     className: `${prefix}--radio-button-group-inner--decorator`
   }, normalizedDecorator) : ''), getRadioButtons()), /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--radio-button__validation-msg`
-  }, !readOnly && invalid && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(iconsReact.WarningFilled, {
+  }, !readOnly && !disabled && invalid && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(iconsReact.WarningFilled, {
     className: `${prefix}--radio-button__invalid-icon`
   }), /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--form-requirement`

package/lib/components/Slider/Slider.Skeleton.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 PropTypes from 'prop-types';
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 export interface SliderSkeletonProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * The `ariaLabel` for the handle icon.
@@ -28,30 +27,5 @@ export interface SliderSkeletonProps extends HTMLAttributes<HTMLDivElement> {
      */
     twoHandles?: boolean;
 }
-declare const SliderSkeleton: {
-    ({ ariaLabel, unstable_ariaLabelHandleUpper: ariaLabelHandleUpper, hideLabel, className, twoHandles, ...rest }: SliderSkeletonProps): import("react/jsx-runtime").JSX.Element;
-    propTypes: {
-        /**
-         * The `ariaLabel` for the handle icon.
-         */
-        ariaLabel: PropTypes.Requireable<string>;
-        /**
-         * The `ariaLabel` for the upper bound slider handle when there are two handles.
-         */
-        unstable_ariaLabelHandleUpper: PropTypes.Requireable<string>;
-        /**
-         * Specify an optional className to add to the form item wrapper.
-         */
-        className: PropTypes.Requireable<string>;
-        /**
-         * Specify whether the label should be hidden, or not
-         */
-        hideLabel: PropTypes.Requireable<boolean>;
-        /**
-         * Turn the slider into a range slider.
-         */
-        twoHandles: PropTypes.Requireable<boolean>;
-    };
-};
-export default SliderSkeleton;
-export { SliderSkeleton };
+declare const _default: (props: SliderSkeletonProps) => ReactNode;
+export default _default;

package/lib/components/Slider/Slider.Skeleton.js

@@ -103,5 +103,4 @@ SliderSkeleton.propTypes = {
   twoHandles: PropTypes.bool
 };
 
-exports.SliderSkeleton = SliderSkeleton;
 exports.default = SliderSkeleton;

package/lib/components/Slider/Slider.d.ts

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { type InputHTMLAttributes, type KeyboardEventHandler, type ReactNode } from 'react';
-import PropTypes from 'prop-types';
 import type { TranslateWithId } from '../../types/common';
 declare const translationIds: {
     readonly 'carbon.slider.auto-correct-announcement': "carbon.slider.auto-correct-announcement";
@@ -162,146 +161,5 @@ export interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
      */
     warnText?: ReactNode;
 }
-export declare const Slider: {
-    (props: SliderProps): import("react/jsx-runtime").JSX.Element;
-    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: Record<string, any>, propName: string, componentName: string, ...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>;
-    };
-};
-export {};
+declare const _default: (props: SliderProps) => ReactNode;
+export default _default;

package/lib/components/Slider/Slider.js

@@ -7,6 +7,8 @@
 
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var PropTypes = require('prop-types');
@@ -1356,4 +1358,4 @@ Slider.propTypes = {
   warnText: PropTypes.node
 };
 
-exports.Slider = Slider;
+exports.default = Slider;

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

@@ -4,7 +4,5 @@
  * 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 { Slider } from './Slider';
+export { default as Slider } from './Slider';
 export { default as SliderSkeleton } from './Slider.Skeleton';
-export default Slider;
-export { Slider };

package/lib/components/TimePicker/TimePicker.js

@@ -15,7 +15,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var usePrefix = require('../../internal/usePrefix.js');
 var deprecate = require('../../prop-types/deprecate.js');
-var iconsReact = require('@carbon/icons-react');
+var useNormalizedInputProps = require('../../internal/useNormalizedInputProps.js');
 
 const frFn = React.forwardRef;
 const TimePicker = frFn((props, ref) => {
@@ -74,15 +74,24 @@ const TimePicker = frFn((props, ref) => {
       onBlur(evt);
     }
   }
+  const normalizedProps = useNormalizedInputProps.useNormalizedInputProps({
+    id,
+    readOnly,
+    disabled,
+    invalid,
+    invalidText,
+    warn: warning,
+    warnText: warningText
+  });
   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
+    [`${prefix}--time-picker__input-field-error`]: normalizedProps.invalid || normalizedProps.warn
   });
   const timePickerClasses = cx({
     [`${prefix}--time-picker`]: true,
     [`${prefix}--time-picker--light`]: light,
-    [`${prefix}--time-picker--invalid`]: invalid,
-    [`${prefix}--time-picker--warning`]: warning,
+    [`${prefix}--time-picker--invalid`]: normalizedProps.invalid,
+    [`${prefix}--time-picker--warning`]: normalizedProps.warn,
     [`${prefix}--time-picker--readonly`]: readOnly,
     [`${prefix}--time-picker--${size}`]: size,
     ...(pickerClassName && {
@@ -140,8 +149,8 @@ const TimePicker = frFn((props, ref) => {
     className: `${prefix}--time-picker__input`
   }, /*#__PURE__*/React.createElement("input", _rollupPluginBabelHelpers.extends({
     className: timePickerInputClasses,
-    "data-invalid": invalid ? invalid : undefined,
-    disabled: disabled,
+    "data-invalid": normalizedProps.invalid ? true : undefined,
+    disabled: normalizedProps.disabled,
     id: id,
     maxLength: maxLength,
     onClick: handleOnClick,
@@ -152,17 +161,12 @@ const TimePicker = frFn((props, ref) => {
     ref: ref,
     type: type,
     value: value
-  }, rest, readOnlyProps)), (invalid || warning) && /*#__PURE__*/React.createElement("div", {
+  }, rest, readOnlyProps)), (normalizedProps.invalid || normalizedProps.warn) && normalizedProps.icon && /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--time-picker__error__icon`
-  }, invalid ? /*#__PURE__*/React.createElement(iconsReact.WarningFilled, {
-    className: `${prefix}--checkbox__invalid-icon`,
-    size: 16
-  }) : /*#__PURE__*/React.createElement(iconsReact.WarningAltFilled, {
-    className: `${prefix}--text-input__invalid-icon--warning`,
+  }, /*#__PURE__*/React.createElement(normalizedProps.icon, {
+    className: normalizedProps.invalid ? `${prefix}--checkbox__invalid-icon` : `${prefix}--text-input__invalid-icon--warning`,
     size: 16
-  }))), getInternalPickerSelects()), (invalid || warning) && /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--form-requirement`
-  }, invalid ? invalidText : warningText));
+  }))), getInternalPickerSelects()), normalizedProps.validation);
 });
 TimePicker.propTypes = {
   /**

package/lib/index.js

@@ -396,7 +396,7 @@ exports.SelectItemGroup = SelectItemGroup.default;
 exports.SkeletonIcon = SkeletonIcon.default;
 exports.SkeletonPlaceholder = SkeletonPlaceholder.default;
 exports.SkeletonText = SkeletonText.default;
-exports.Slider = Slider.Slider;
+exports.Slider = Slider.default;
 exports.SliderSkeleton = Slider_Skeleton.default;
 exports.HStack = HStack.HStack;
 exports.Stack = Stack.Stack;