@carbon/react 1.103.0-rc.0 → 1.103.0

package/es/components/DatePicker/DatePicker.d.ts

@@ -11,8 +11,10 @@ import { type SupportedLocale } from './DatePickerLocales';
 export type DatePickerTypes = 'simple' | 'single' | 'range';
 export interface DatePickerProps {
     /**
-     * Flatpickr prop passthrough enables direct date input, and when set to false,
-     * we must clear dates manually by resetting the value prop to to a falsy value (such as `""`, `null`, or `undefined`) or an array of all falsy values, making it a controlled input.
+     * Flatpickr prop passthrough enables direct date input, and when set to
+     * false, we must clear dates manually by resetting the value prop to an empty
+     * value (such as `""`, `null`, or `undefined`) or an array of all empty
+     * values, making it a controlled input.
      */
     allowInput?: boolean;
     /**

package/es/components/DatePicker/DatePicker.js

@@ -26,6 +26,7 @@ import { FormContext } from '../FluidForm/FormContext.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import { datePartsOrder } from '@carbon/utilities';
 import { SUPPORTED_LOCALES } from './DatePickerLocales.js';
+import { isEmptyDateValue } from './utils.js';
 
 // Weekdays shorthand for English locale
 // Ensure localization exists before trying to access it
@@ -591,9 +592,9 @@ const DatePicker = /*#__PURE__*/forwardRef((props, ref) => {
   useEffect(() => {
     // when value prop is manually reset, this clears the flatpickr calendar instance and text input
     // run if both:
-    // 1. value prop is set to a falsy value (`""`, `undefined`, `null`, etc) OR an array of all falsy values
+    // 1. value prop is set to an empty value (`""`, `undefined`, `null`, etc) OR an array of all empty values
     // 2. flatpickr instance contains values in its `selectedDates` property so it hasn't already been cleared
-    if ((!value || Array.isArray(value) && value.every(date => !date)) && calendarRef.current?.selectedDates.length) {
+    if ((isEmptyDateValue(value) || Array.isArray(value) && value.every(isEmptyDateValue)) && calendarRef.current?.selectedDates.length) {
       calendarRef.current?.clear();
       if (startInputField.current) {
         startInputField.current.value = '';
@@ -607,7 +608,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, ref) => {
     if (calendarRef.current?.set) {
       if (value !== undefined) {
         // 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))) {
+        if (value === '' || value === null || Array.isArray(value) && (value.length === 0 || value.every(isEmptyDateValue))) {
           // only clear if there are selected dates to avoid unnecessary operations
           if (calendarRef.current.selectedDates.length > 0) {
             calendarRef.current.clear();
@@ -618,7 +619,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, ref) => {
       }
       updateClassNames(calendarRef.current, prefix);
       //for simple date picker w/o calendar; initial mount may not have value
-    } else if (!calendarRef.current && value) {
+    } else if (!calendarRef.current && typeof value !== 'undefined' && value !== null) {
       startInputField.current.value = value;
     }
   }, [value, prefix, startInputField]);
@@ -652,8 +653,10 @@ const DatePicker = /*#__PURE__*/forwardRef((props, ref) => {
 });
 DatePicker.propTypes = {
   /**
-   * Flatpickr prop passthrough enables direct date input, and when set to false,
-   * we must clear dates manually by resetting the value prop to a falsy value (such as `""`, `null`, or `undefined`) or an array of all falsy values, making it a controlled input.
+   * Flatpickr prop passthrough enables direct date input, and when set to
+   * false, we must clear dates manually by resetting the value prop to an empty
+   * value (such as `""`, `null`, or `undefined`) or an array of all empty
+   * values, making it a controlled input.
    */
   allowInput: PropTypes.bool,
   /**

package/es/components/DatePicker/plugins/rangePlugin.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2019, 2025
+ * Copyright IBM Corp. 2019, 2026
  *
  * 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/DatePicker/plugins/rangePlugin.js

@@ -6,6 +6,7 @@
  */
 
 import baseRangePlugin from 'flatpickr/dist/plugins/rangePlugin';
+import { isEmptyDateValue } from '../utils.js';
 
 /**
  * @param config Plugin configuration.
@@ -38,7 +39,7 @@ const rangePlugin = (config = {}) => {
           const inputToElement = typeof inputTo === 'string' ? document.querySelector(inputTo) : inputTo;
           [inputFrom, inputToElement].forEach((input, i) => {
             if (input && input instanceof HTMLInputElement) {
-              input.value = !dates[i] ? '' : formatDate(new Date(dates[i]), fp.config.dateFormat);
+              input.value = isEmptyDateValue(dates[i]) ? '' : formatDate(new Date(dates[i]), fp.config.dateFormat);
             }
           });
         }

package/es/components/DatePicker/utils.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export declare const isEmptyDateValue: (date: unknown) => date is "" | null | undefined;

package/es/components/DatePicker/utils.js

@@ -0,0 +1,10 @@
+/**
+ * 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.
+ */
+
+const isEmptyDateValue = date => date === '' || date === null || typeof date === 'undefined';
+
+export { isEmptyDateValue };

package/es/components/Tabs/Tabs.js

@@ -288,6 +288,9 @@ function TabList({
   // VISIBLE IF:
   //   SCROLLABLE
   //   AND SCROLL_LEFT > 0
+  //
+  // TODO: Hoist `buttonWidth` to a module level constant like
+  // `verticalTabHeight`.
   const buttonWidth = 44;
   // Next Button
   // VISIBLE IF:
@@ -382,14 +385,13 @@ function TabList({
     // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
   }, []);
   useEffect(() => {
-    //adding 1 in calculation for firefox support
+    // adding 1 in calculation for firefox support
     setIsNextButtonVisible(ref.current ? scrollLeft + buttonWidth + ref.current.clientWidth + 1 < ref.current.scrollWidth : false);
-    if (dismissable) {
-      if (ref.current) {
-        setIsScrollable(ref.current.scrollWidth > ref.current.clientWidth);
-      }
+    if (dismissable && ref.current) {
+      // adding 1 in calculation for firefox support
+      setIsScrollable(ref.current.scrollWidth > ref.current.clientWidth + 1);
     }
-  }, [scrollLeft, children, dismissable, isScrollable]);
+  }, [children, dismissable, scrollLeft]);
   useEffect(() => {
     if (tabs.current[selectedIndex]?.disabled) {
       const activeTabs = tabs.current.filter(tab => {

package/es/components/Tile/Tile.d.ts

@@ -59,11 +59,11 @@ export interface ClickableTileProps extends HTMLAttributes<HTMLAnchorElement> {
     /**
      * Specify the function to run when the ClickableTile is clicked
      */
-    onClick?(event: MouseEvent): void;
+    onClick?(event: MouseEvent<HTMLAnchorElement> | KeyboardEvent<HTMLAnchorElement>): void;
     /**
      * Specify the function to run when the ClickableTile is interacted with via a keyboard
      */
-    onKeyDown?(event: KeyboardEvent): void;
+    onKeyDown?(event: KeyboardEvent<HTMLAnchorElement>): void;
     /**
      * The rel property for the link.
      */

package/es/components/Tile/Tile.js

@@ -106,6 +106,9 @@ const ClickableTile = /*#__PURE__*/React.forwardRef(({
     [`${prefix}--tile--decorator`]: decorator,
     [`${prefix}--tile--decorator-rounded`]: decorator && hasRoundedCorners
   }, className);
+
+  // TODO: Can this be removed? Or is cds--tile--is-clicked supposed to use this instead of `clicked`?
+  // This state is never used
   const [isSelected, setIsSelected] = useState(clicked);
   function handleOnClick(evt) {
     evt?.persist?.();
@@ -114,8 +117,10 @@ const ClickableTile = /*#__PURE__*/React.forwardRef(({
   }
   function handleOnKeyDown(evt) {
     evt?.persist?.();
-    if (matches(evt, [Enter, Space])) {
+    if (!href && matches(evt, [Enter, Space])) {
+      evt.preventDefault();
       setIsSelected(!isSelected);
+      onClick(evt);
     }
     onKeyDown(evt);
   }

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

@@ -11,8 +11,10 @@ import { type SupportedLocale } from './DatePickerLocales';
 export type DatePickerTypes = 'simple' | 'single' | 'range';
 export interface DatePickerProps {
     /**
-     * Flatpickr prop passthrough enables direct date input, and when set to false,
-     * we must clear dates manually by resetting the value prop to to a falsy value (such as `""`, `null`, or `undefined`) or an array of all falsy values, making it a controlled input.
+     * Flatpickr prop passthrough enables direct date input, and when set to
+     * false, we must clear dates manually by resetting the value prop to an empty
+     * value (such as `""`, `null`, or `undefined`) or an array of all empty
+     * values, making it a controlled input.
      */
     allowInput?: boolean;
     /**

package/lib/components/DatePicker/DatePicker.js

@@ -30,6 +30,7 @@ var FormContext = require('../FluidForm/FormContext.js');
 var iconsReact = require('@carbon/icons-react');
 var utilities = require('@carbon/utilities');
 var DatePickerLocales = require('./DatePickerLocales.js');
+var utils$1 = require('./utils.js');
 
 // Weekdays shorthand for English locale
 // Ensure localization exists before trying to access it
@@ -595,9 +596,9 @@ const DatePicker = /*#__PURE__*/React.forwardRef((props, ref) => {
   React.useEffect(() => {
     // when value prop is manually reset, this clears the flatpickr calendar instance and text input
     // run if both:
-    // 1. value prop is set to a falsy value (`""`, `undefined`, `null`, etc) OR an array of all falsy values
+    // 1. value prop is set to an empty value (`""`, `undefined`, `null`, etc) OR an array of all empty values
     // 2. flatpickr instance contains values in its `selectedDates` property so it hasn't already been cleared
-    if ((!value || Array.isArray(value) && value.every(date => !date)) && calendarRef.current?.selectedDates.length) {
+    if ((utils$1.isEmptyDateValue(value) || Array.isArray(value) && value.every(utils$1.isEmptyDateValue)) && calendarRef.current?.selectedDates.length) {
       calendarRef.current?.clear();
       if (startInputField.current) {
         startInputField.current.value = '';
@@ -611,7 +612,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((props, ref) => {
     if (calendarRef.current?.set) {
       if (value !== undefined) {
         // 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))) {
+        if (value === '' || value === null || Array.isArray(value) && (value.length === 0 || value.every(utils$1.isEmptyDateValue))) {
           // only clear if there are selected dates to avoid unnecessary operations
           if (calendarRef.current.selectedDates.length > 0) {
             calendarRef.current.clear();
@@ -622,7 +623,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((props, ref) => {
       }
       updateClassNames(calendarRef.current, prefix);
       //for simple date picker w/o calendar; initial mount may not have value
-    } else if (!calendarRef.current && value) {
+    } else if (!calendarRef.current && typeof value !== 'undefined' && value !== null) {
       startInputField.current.value = value;
     }
   }, [value, prefix, startInputField]);
@@ -656,8 +657,10 @@ const DatePicker = /*#__PURE__*/React.forwardRef((props, ref) => {
 });
 DatePicker.propTypes = {
   /**
-   * Flatpickr prop passthrough enables direct date input, and when set to false,
-   * we must clear dates manually by resetting the value prop to a falsy value (such as `""`, `null`, or `undefined`) or an array of all falsy values, making it a controlled input.
+   * Flatpickr prop passthrough enables direct date input, and when set to
+   * false, we must clear dates manually by resetting the value prop to an empty
+   * value (such as `""`, `null`, or `undefined`) or an array of all empty
+   * values, making it a controlled input.
    */
   allowInput: PropTypes.bool,
   /**

package/lib/components/DatePicker/plugins/rangePlugin.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2019, 2025
+ * Copyright IBM Corp. 2019, 2026
  *
  * 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/lib/components/DatePicker/plugins/rangePlugin.js

@@ -8,6 +8,7 @@
 'use strict';
 
 var baseRangePlugin = require('flatpickr/dist/plugins/rangePlugin');
+var utils = require('../utils.js');
 
 /**
  * @param config Plugin configuration.
@@ -40,7 +41,7 @@ const rangePlugin = (config = {}) => {
           const inputToElement = typeof inputTo === 'string' ? document.querySelector(inputTo) : inputTo;
           [inputFrom, inputToElement].forEach((input, i) => {
             if (input && input instanceof HTMLInputElement) {
-              input.value = !dates[i] ? '' : formatDate(new Date(dates[i]), fp.config.dateFormat);
+              input.value = utils.isEmptyDateValue(dates[i]) ? '' : formatDate(new Date(dates[i]), fp.config.dateFormat);
             }
           });
         }

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

@@ -0,0 +1,7 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export declare const isEmptyDateValue: (date: unknown) => date is "" | null | undefined;

package/lib/components/DatePicker/utils.js

@@ -0,0 +1,12 @@
+/**
+ * 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';
+
+const isEmptyDateValue = date => date === '' || date === null || typeof date === 'undefined';
+
+exports.isEmptyDateValue = isEmptyDateValue;

package/lib/components/Tabs/Tabs.js

@@ -290,6 +290,9 @@ function TabList({
   // VISIBLE IF:
   //   SCROLLABLE
   //   AND SCROLL_LEFT > 0
+  //
+  // TODO: Hoist `buttonWidth` to a module level constant like
+  // `verticalTabHeight`.
   const buttonWidth = 44;
   // Next Button
   // VISIBLE IF:
@@ -384,14 +387,13 @@ function TabList({
     // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
   }, []);
   React.useEffect(() => {
-    //adding 1 in calculation for firefox support
+    // adding 1 in calculation for firefox support
     setIsNextButtonVisible(ref.current ? scrollLeft + buttonWidth + ref.current.clientWidth + 1 < ref.current.scrollWidth : false);
-    if (dismissable) {
-      if (ref.current) {
-        setIsScrollable(ref.current.scrollWidth > ref.current.clientWidth);
-      }
+    if (dismissable && ref.current) {
+      // adding 1 in calculation for firefox support
+      setIsScrollable(ref.current.scrollWidth > ref.current.clientWidth + 1);
     }
-  }, [scrollLeft, children, dismissable, isScrollable]);
+  }, [children, dismissable, scrollLeft]);
   React.useEffect(() => {
     if (tabs.current[selectedIndex]?.disabled) {
       const activeTabs = tabs.current.filter(tab => {

package/lib/components/Tile/Tile.d.ts

@@ -59,11 +59,11 @@ export interface ClickableTileProps extends HTMLAttributes<HTMLAnchorElement> {
     /**
      * Specify the function to run when the ClickableTile is clicked
      */
-    onClick?(event: MouseEvent): void;
+    onClick?(event: MouseEvent<HTMLAnchorElement> | KeyboardEvent<HTMLAnchorElement>): void;
     /**
      * Specify the function to run when the ClickableTile is interacted with via a keyboard
      */
-    onKeyDown?(event: KeyboardEvent): void;
+    onKeyDown?(event: KeyboardEvent<HTMLAnchorElement>): void;
     /**
      * The rel property for the link.
      */

package/lib/components/Tile/Tile.js

@@ -108,6 +108,9 @@ const ClickableTile = /*#__PURE__*/React.forwardRef(({
     [`${prefix}--tile--decorator`]: decorator,
     [`${prefix}--tile--decorator-rounded`]: decorator && hasRoundedCorners
   }, className);
+
+  // TODO: Can this be removed? Or is cds--tile--is-clicked supposed to use this instead of `clicked`?
+  // This state is never used
   const [isSelected, setIsSelected] = React.useState(clicked);
   function handleOnClick(evt) {
     evt?.persist?.();
@@ -116,8 +119,10 @@ const ClickableTile = /*#__PURE__*/React.forwardRef(({
   }
   function handleOnKeyDown(evt) {
     evt?.persist?.();
-    if (match.matches(evt, [keys.Enter, keys.Space])) {
+    if (!href && match.matches(evt, [keys.Enter, keys.Space])) {
+      evt.preventDefault();
       setIsSelected(!isSelected);
+      onClick(evt);
     }
     onKeyDown(evt);
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.103.0-rc.0",
+  "version": "1.103.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -52,11 +52,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.27.3",
-    "@carbon/feature-flags": "^1.1.0-rc.0",
+    "@carbon/feature-flags": "^1.1.0",
     "@carbon/icons-react": "^11.76.0",
     "@carbon/layout": "^11.49.0",
-    "@carbon/styles": "^1.102.0-rc.0",
-    "@carbon/utilities": "^0.17.0-rc.0",
+    "@carbon/styles": "^1.102.0",
+    "@carbon/utilities": "^0.17.0",
     "@floating-ui/react": "^0.27.4",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
@@ -131,5 +131,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "f3e7c2811340637ead19b4a1a550a20820602cc4"
+  "gitHead": "443fbe43ff4bd1df327997b8b0b0ebeee634d002"
 }