@carbon/react 1.97.0 → 1.98.0

package/lib/components/DatePicker/DatePicker.js

@@ -28,6 +28,7 @@ require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
 var iconsReact = require('@carbon/icons-react');
 var utilities = require('@carbon/utilities');
+var DatePickerLocales = require('./DatePickerLocales.js');
 
 // Weekdays shorthand for English locale
 // Ensure localization exists before trying to access it
@@ -366,7 +367,6 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
     const {
       current: end
     } = endInputField;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
     const flatpickerConfig = {
       inline: inline ?? false,
       onClose: onCalendarClose,
@@ -515,12 +515,11 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
 
       // prevent a duplicate date selection when a default value is set
       if (value) {
-        if (startInputField?.current) {
-          startInputField.current.value = '';
+        if (start) {
+          start.value = '';
         }
-        if (endInputField?.current) {
-          // eslint-disable-next-line react-hooks/exhaustive-deps
-          endInputField.current.value = '';
+        if (end) {
+          end.value = '';
         }
       }
       if (start) {
@@ -600,8 +599,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
         endInputField.current.value = '';
       }
     }
-    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
-  }, [value]);
+  }, [value, startInputField]);
   React.useEffect(() => {
     const handleMouseDown = event => {
       if (calendarRef.current && calendarRef.current.isOpen && !calendarRef.current.calendarContainer.contains(event.target) && !startInputField.current.contains(event.target) && !endInputField.current?.contains(event.target)) {
@@ -609,8 +607,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
         closeCalendar();
       }
     };
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
-    const closeCalendar = event => {
+    const closeCalendar = () => {
       calendarRef.current?.close();
       // Remove focus from endDate calendar input
       onCalendarClose(calendarRef.current?.selectedDates, '', calendarRef.current, {
@@ -625,15 +622,22 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
   React.useEffect(() => {
     if (calendarRef.current?.set) {
       if (value !== undefined) {
-        calendarRef.current.setDate(value);
+        // To make up for calendarRef.current.setDate not making provision for an empty string or array
+        if (value === '' || value === null || Array.isArray(value) && (value.length === 0 || value.every(element => !element))) {
+          // only clear if there are selected dates to avoid unnecessary operations
+          if (calendarRef.current.selectedDates.length > 0) {
+            calendarRef.current.clear();
+          }
+        } else {
+          calendarRef.current.setDate(value);
+        }
       }
       updateClassNames(calendarRef.current, prefix);
       //for simple date picker w/o calendar; initial mount may not have value
     } else if (!calendarRef.current && value) {
       startInputField.current.value = value;
     }
-  }, [value, prefix]); //eslint-disable-line react-hooks/exhaustive-deps
-
+  }, [value, prefix, startInputField]);
   let fluidError;
   if (isFluid) {
     if (invalid) {
@@ -722,128 +726,7 @@ DatePicker.propTypes = {
   /**
    *  The language locale used to format the days of the week, months, and numbers. The full list of supported locales can be found here https://github.com/flatpickr/flatpickr/tree/master/src/l10n
    */
-  locale: PropTypes.oneOfType([PropTypes.object, PropTypes.oneOf(['ar',
-  // Arabic
-  'at',
-  // Austria
-  'az',
-  // Azerbaijan
-  'be',
-  // Belarusian
-  'bg',
-  // Bulgarian
-  'bn',
-  // Bangla
-  'bs',
-  // Bosnia
-  'cat',
-  // Catalan
-  'cs',
-  // Czech
-  'cy',
-  // Welsh
-  'da',
-  // Danish
-  'de',
-  // German
-  'en',
-  // English
-  'eo',
-  // Esperanto
-  'es',
-  // Spanish
-  'et',
-  // Estonian
-  'fa',
-  // Persian
-  'fi',
-  // Finnish
-  'fo',
-  // Faroese
-  'fr',
-  // French
-  'ga',
-  // Gaelic
-  'gr',
-  // Greek
-  'he',
-  // Hebrew
-  'hi',
-  // Hindi
-  'hr',
-  // Croatian
-  'hu',
-  // Hungarian
-  'id',
-  // Indonesian
-  'is',
-  // Icelandic
-  'it',
-  // Italian
-  'ja',
-  // Japanese
-  'ka',
-  // Georgian
-  'km',
-  // Khmer
-  'ko',
-  // Korean
-  'kz',
-  // Kazakh
-  'lt',
-  // Lithuanian
-  'lv',
-  // Latvian
-  'mk',
-  // Macedonian
-  'mn',
-  // Mongolian
-  'ms',
-  // Malaysian
-  'my',
-  // Burmese
-  'nl',
-  // Dutch
-  'no',
-  // Norwegian
-  'pa',
-  // Punjabi
-  'pl',
-  // Polish
-  'pt',
-  // Portuguese
-  'ro',
-  // Romanian
-  'ru',
-  // Russian
-  'si',
-  // Sinhala
-  'sk',
-  // Slovak
-  'sl',
-  // Slovenian
-  'sq',
-  // Albanian
-  'sr',
-  // Serbian
-  'sv',
-  // Swedish
-  'th',
-  // Thai
-  'tr',
-  // Turkish
-  'uk',
-  // Ukrainian
-  'uz',
-  // Uzbek
-  'uz_latn',
-  // Uzbek Latin
-  'vn',
-  // Vietnamese
-  'zh_tw',
-  // Mandarin Traditional
-  'zh' // Mandarin
-  ])]),
+  locale: PropTypes.oneOfType([PropTypes.object, PropTypes.oneOf(DatePickerLocales.SUPPORTED_LOCALES)]),
   /**
    * The maximum date that a user can pick to.
    */

package/lib/components/DatePicker/DatePickerLocales.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ */
+/**
+ * The full list of supported locales can be found here:
+ * https://github.com/flatpickr/flatpickr/tree/master/src/l10n
+ */
+export declare const SUPPORTED_LOCALES: readonly ["ar", "at", "az", "be", "bg", "bn", "bs", "cat", "cs", "cy", "da", "de", "en", "eo", "es", "et", "fa", "fi", "fo", "fr", "ga", "gr", "he", "hi", "hr", "hu", "id", "is", "it", "ja", "ka", "km", "ko", "kz", "lt", "lv", "mk", "mn", "ms", "my", "nl", "no", "pa", "pl", "pt", "ro", "ru", "si", "sk", "sl", "sq", "sr", "sv", "th", "tr", "uk", "uz", "uz_latn", "vn", "zh_tw", "zh"];
+export type SupportedLocale = (typeof SUPPORTED_LOCALES)[number];

package/lib/components/DatePicker/DatePickerLocales.js

@@ -0,0 +1,137 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+/**
+ * The full list of supported locales can be found here:
+ * https://github.com/flatpickr/flatpickr/tree/master/src/l10n
+ */
+const SUPPORTED_LOCALES = ['ar',
+// Arabic
+'at',
+// Austria
+'az',
+// Azerbaijan
+'be',
+// Belarusian
+'bg',
+// Bulgarian
+'bn',
+// Bangla
+'bs',
+// Bosnia
+'cat',
+// Catalan
+'cs',
+// Czech
+'cy',
+// Welsh
+'da',
+// Danish
+'de',
+// German
+'en',
+// English
+'eo',
+// Esperanto
+'es',
+// Spanish
+'et',
+// Estonian
+'fa',
+// Persian
+'fi',
+// Finnish
+'fo',
+// Faroese
+'fr',
+// French
+'ga',
+// Gaelic
+'gr',
+// Greek
+'he',
+// Hebrew
+'hi',
+// Hindi
+'hr',
+// Croatian
+'hu',
+// Hungarian
+'id',
+// Indonesian
+'is',
+// Icelandic
+'it',
+// Italian
+'ja',
+// Japanese
+'ka',
+// Georgian
+'km',
+// Khmer
+'ko',
+// Korean
+'kz',
+// Kazakh
+'lt',
+// Lithuanian
+'lv',
+// Latvian
+'mk',
+// Macedonian
+'mn',
+// Mongolian
+'ms',
+// Malaysian
+'my',
+// Burmese
+'nl',
+// Dutch
+'no',
+// Norwegian
+'pa',
+// Punjabi
+'pl',
+// Polish
+'pt',
+// Portuguese
+'ro',
+// Romanian
+'ru',
+// Russian
+'si',
+// Sinhala
+'sk',
+// Slovak
+'sl',
+// Slovenian
+'sq',
+// Albanian
+'sr',
+// Serbian
+'sv',
+// Swedish
+'th',
+// Thai
+'tr',
+// Turkish
+'uk',
+// Ukrainian
+'uz',
+// Uzbek
+'uz_latn',
+// Uzbek Latin
+'vn',
+// Vietnamese
+'zh_tw',
+// Mandarin Traditional
+'zh' // Mandarin
+];
+
+exports.SUPPORTED_LOCALES = SUPPORTED_LOCALES;

package/lib/components/DatePickerInput/DatePickerInput.js

@@ -23,6 +23,7 @@ require('../Text/TextDirection.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var index = require('../AILabel/index.js');
 var utils = require('../../internal/utils.js');
+var useNormalizedInputProps = require('../../internal/useNormalizedInputProps.js');
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
 
@@ -45,8 +46,9 @@ const DatePickerInput = /*#__PURE__*/React.forwardRef(function DatePickerInput(p
     size = 'md',
     slug,
     type = 'text',
-    warn,
+    warn = false,
     warnText,
+    readOnly,
     ...rest
   } = props;
   const prefix = usePrefix.usePrefix();
@@ -54,6 +56,15 @@ const DatePickerInput = /*#__PURE__*/React.forwardRef(function DatePickerInput(p
     isFluid
   } = React.useContext(FormContext.FormContext);
   const datePickerInputInstanceId = useId.useId();
+  const normalizedProps = useNormalizedInputProps.useNormalizedInputProps({
+    id,
+    readOnly,
+    disabled,
+    invalid,
+    invalidText,
+    warn,
+    warnText
+  });
   const datePickerInputProps = {
     id,
     onChange: event => {
@@ -75,28 +86,28 @@ const DatePickerInput = /*#__PURE__*/React.forwardRef(function DatePickerInput(p
     didWarnAboutDatePickerInputValue = true;
   }
   const wrapperClasses = cx(`${prefix}--date-picker-input__wrapper`, {
-    [`${prefix}--date-picker-input__wrapper--invalid`]: invalid,
-    [`${prefix}--date-picker-input__wrapper--warn`]: warn,
+    [`${prefix}--date-picker-input__wrapper--invalid`]: normalizedProps.invalid,
+    [`${prefix}--date-picker-input__wrapper--warn`]: normalizedProps.warn,
     [`${prefix}--date-picker-input__wrapper--slug`]: slug,
     [`${prefix}--date-picker-input__wrapper--decorator`]: decorator
   });
   const labelClasses = cx(`${prefix}--label`, {
     [`${prefix}--visually-hidden`]: hideLabel,
-    [`${prefix}--label--disabled`]: disabled,
-    [`${prefix}--label--readonly`]: rest.readOnly
+    [`${prefix}--label--disabled`]: normalizedProps.disabled,
+    [`${prefix}--label--readonly`]: readOnly
   });
   const helperTextClasses = cx(`${prefix}--form__helper-text`, {
-    [`${prefix}--form__helper-text--disabled`]: disabled
+    [`${prefix}--form__helper-text--disabled`]: normalizedProps.disabled
   });
   const inputClasses = cx(`${prefix}--date-picker__input`, {
     [`${prefix}--date-picker__input--${size}`]: size,
-    [`${prefix}--date-picker__input--invalid`]: invalid,
-    [`${prefix}--date-picker__input--warn`]: warn
+    [`${prefix}--date-picker__input--invalid`]: normalizedProps.invalid,
+    [`${prefix}--date-picker__input--warn`]: normalizedProps.warn
   });
   const containerClasses = cx(`${prefix}--date-picker-container`, {
     [`${prefix}--date-picker--nolabel`]: !labelText,
-    [`${prefix}--date-picker--fluid--invalid`]: isFluid && invalid,
-    [`${prefix}--date-picker--fluid--warn`]: isFluid && warn
+    [`${prefix}--date-picker--fluid--invalid`]: isFluid && normalizedProps.invalid,
+    [`${prefix}--date-picker--fluid--warn`]: isFluid && normalizedProps.warn
   });
   const datePickerInputHelperId = !helperText ? undefined : `datepicker-input-helper-text-${datePickerInputInstanceId}`;
 
@@ -105,11 +116,11 @@ const DatePickerInput = /*#__PURE__*/React.forwardRef(function DatePickerInput(p
     ...rest,
     ...datePickerInputProps,
     className: inputClasses,
-    disabled,
+    disabled: normalizedProps.disabled,
     ref,
     ['aria-describedby']: helperText ? datePickerInputHelperId : undefined
   };
-  if (invalid) {
+  if (normalizedProps.invalid) {
     inputProps['data-invalid'] = true;
   }
   const input = /*#__PURE__*/React.createElement("input", inputProps);
@@ -134,19 +145,11 @@ const DatePickerInput = /*#__PURE__*/React.forwardRef(function DatePickerInput(p
     datePickerType: datePickerType
   }), /*#__PURE__*/React.createElement(DatePickerIcon, {
     datePickerType: datePickerType,
-    invalid: invalid,
-    warn: warn
-  }))), invalid && /*#__PURE__*/React.createElement(React.Fragment, null, isFluid && /*#__PURE__*/React.createElement("hr", {
-    className: `${prefix}--date-picker__divider`
-  }), /*#__PURE__*/React.createElement(Text.Text, {
-    as: "div",
-    className: `${prefix}--form-requirement`
-  }, invalidText)), warn && !invalid && /*#__PURE__*/React.createElement(React.Fragment, null, isFluid && /*#__PURE__*/React.createElement("hr", {
-    className: `${prefix}--date-picker__divider`
-  }), /*#__PURE__*/React.createElement(Text.Text, {
-    as: "div",
-    className: `${prefix}--form-requirement`
-  }, warnText)), helperText && !invalid && /*#__PURE__*/React.createElement(Text.Text, {
+    invalid: normalizedProps.invalid,
+    warn: normalizedProps.warn,
+    disabled: normalizedProps.disabled,
+    readOnly: readOnly
+  }))), normalizedProps.validation, helperText && !normalizedProps.invalid && !normalizedProps.warn && /*#__PURE__*/React.createElement(Text.Text, {
     as: "div",
     id: datePickerInputHelperId,
     className: helperTextClasses
@@ -247,7 +250,9 @@ DatePickerInput.propTypes = {
 function DatePickerIcon({
   datePickerType,
   invalid,
-  warn
+  warn,
+  disabled,
+  readOnly
 }) {
   const prefix = usePrefix.usePrefix();
   const {
@@ -258,6 +263,15 @@ function DatePickerIcon({
       return null;
     }
   }
+
+  // Don't show invalid/warn icons when disabled or readonly
+  if (disabled || readOnly) {
+    return /*#__PURE__*/React.createElement(iconsReact.Calendar, {
+      className: `${prefix}--date-picker__icon`,
+      role: "img",
+      "aria-hidden": "true"
+    });
+  }
   if (invalid) {
     return /*#__PURE__*/React.createElement(iconsReact.WarningFilled, {
       className: `${prefix}--date-picker__icon ${prefix}--date-picker__icon--invalid`
@@ -290,7 +304,15 @@ DatePickerIcon.propTypes = {
   /**
    * Specify whether the control is currently in warning state
    */
-  warn: PropTypes.bool
+  warn: PropTypes.bool,
+  /**
+   * Specify whether or not the input should be disabled
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Specify whether the input is readonly
+   */
+  readOnly: PropTypes.bool
 };
 
 exports.default = DatePickerInput;

package/lib/components/Dropdown/Dropdown.js

@@ -31,7 +31,9 @@ var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
 
 const {
   ItemMouseMove,
-  MenuMouseLeave
+  MenuMouseLeave,
+  ToggleButtonBlur,
+  FunctionCloseMenu
 } = Downshift.useSelect.stateChangeTypes;
 /**
  * Custom state reducer for `useSelect` in Downshift, providing control over
@@ -65,6 +67,12 @@ function stateReducer(state, actionAndChanges) {
         return state;
       }
       return changes;
+    case ToggleButtonBlur:
+    case FunctionCloseMenu:
+      return {
+        ...changes,
+        selectedItem: state.selectedItem
+      };
     default:
       return changes;
   }

package/lib/components/FileUploader/FileUploader.d.ts

@@ -8,7 +8,9 @@ import React, { type HTMLAttributes } from 'react';
 interface FileItem {
     name: string;
     uuid: string;
-    file: File;
+    file: File & {
+        invalidFileType?: boolean;
+    };
 }
 export interface FileChangeData {
     addedFiles: FileItem[];
@@ -58,6 +60,10 @@ export interface FileUploaderProps extends HTMLAttributes<HTMLSpanElement> {
      * Specify the title text of this `<FileUploader>`
      */
     labelTitle?: string;
+    /**
+     * Maximum file size allowed in bytes. Files larger than this will be marked invalid
+     */
+    maxFileSize?: number;
     /**
      * Specify if the component should accept multiple files to upload
      */
@@ -66,24 +72,32 @@ export interface FileUploaderProps extends HTMLAttributes<HTMLSpanElement> {
      * Provide a name for the underlying `<input>` node
      */
     name?: string;
+    /**
+     * Event handler that is called after files are added to the uploader
+     */
+    onAddFiles?: (event: React.SyntheticEvent<HTMLElement>, content: {
+        addedFiles: Array<File & {
+            invalidFileType?: boolean;
+        }>;
+    }) => void;
     /**
      * Provide an optional `onChange` hook that is called each time the input is changed.
      * When 'enable-enhanced-file-uploader' feature flag is enabled:
      * - Also fires for file deletions and clearFiles operations
      * - Event includes enhanced file information in event.target
      */
-    onChange?: (event: any, data?: FileChangeData) => void;
+    onChange?: (event: React.SyntheticEvent<HTMLElement>, data?: FileChangeData) => void;
     /**
      * Provide an optional `onClick` hook that is called each time the
      * FileUploader is clicked
      */
-    onClick?: (event: any) => void;
+    onClick?: (event: React.SyntheticEvent<HTMLElement>) => void;
     /**
      * Provide an optional `onDelete` hook that is called when an uploaded item is removed.
      * When 'enable-enhanced-file-uploader' feature flag is enabled:
      * - Event includes deleted file information in event.target
      */
-    onDelete?: (event: any, data?: FileDeleteData) => void;
+    onDelete?: (event: React.SyntheticEvent<HTMLElement>, data?: FileDeleteData) => void;
     /**
      * Specify the size of the FileUploaderButton, from a list of available
      * sizes.
@@ -101,9 +115,10 @@ export interface FileUploaderHandle {
     getCurrentFiles?: () => FileItem[];
 }
 declare const FileUploader: {
-    <ItemType>(props: FileUploaderProps): React.ReactElement<any>;
-    propTypes?: any;
-    contextTypes?: any;
-    defaultProps?: any;
+    (props: FileUploaderProps): React.ReactElement;
+    displayName?: string;
+    propTypes?: unknown;
+    contextTypes?: unknown;
+    defaultProps?: unknown;
 };
 export default FileUploader;