@carbon/react 1.106.0 → 1.107.0

package/es/components/Accordion/AccordionItem.d.ts

@@ -38,12 +38,12 @@ export interface AccordionItemProps {
      * removed in the next major release of Carbon. Use the
      * `renderToggle` prop instead.
      */
-    renderExpando?: (props: PropsWithChildren<AccordionToggleProps>) => ReactElement<any>;
+    renderExpando?: (props: PropsWithChildren<AccordionToggleProps>) => ReactElement;
     /**
      * The callback function to render the expand button.
      * Can be a React component class.
      */
-    renderToggle?: (props: PropsWithChildren<AccordionToggleProps>) => ReactElement<any>;
+    renderToggle?: (props: PropsWithChildren<AccordionToggleProps>) => ReactElement;
     /**
      * The accordion title.
      */

package/es/components/Button/Button.d.ts

@@ -4,7 +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 from 'react';
+import React, { type ReactNode } from 'react';
 import { IconButtonKind } from '../IconButton';
 import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
 export declare const ButtonKinds: readonly ["primary", "secondary", "danger", "ghost", "danger--primary", "danger--ghost", "danger--tertiary", "tertiary"];
@@ -82,6 +82,6 @@ export interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonEl
     tooltipPosition?: ButtonTooltipPosition;
 }
 export type ButtonProps<T extends React.ElementType> = PolymorphicComponentPropWithRef<T, ButtonBaseProps>;
-export type ButtonComponent = <T extends React.ElementType = 'button'>(props: ButtonProps<T>, context?: any) => React.ReactElement | any;
+export type ButtonComponent = <T extends React.ElementType = 'button'>(props: ButtonProps<T>) => ReactNode;
 declare const _default: ButtonComponent;
 export default _default;

package/es/components/Button/Button.js

@@ -46,7 +46,7 @@ const ButtonTooltipPositions = [
 	"bottom",
 	"left"
 ];
-function isIconOnlyButton(hasIconOnly, _kind) {
+function isIconOnlyButton(hasIconOnly) {
 	if (hasIconOnly === true) return true;
 	return false;
 }

package/es/components/Checkbox/Checkbox.js

@@ -11,6 +11,7 @@ import { useId } from "../../internal/useId.js";
 import { noopFn } from "../../internal/noopFn.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { isComponentElement } from "../../internal/utils.js";
+import { hasHelperText } from "../../internal/hasHelperText.js";
 import { useNormalizedInputProps } from "../../internal/useNormalizedInputProps.js";
 import { AILabel } from "../AILabel/index.js";
 import classNames from "classnames";
@@ -39,7 +40,7 @@ const Checkbox$1 = React.forwardRef(({ className, decorator, helperText, id, lab
 	const showWarning = normalizedProps.warn;
 	const showHelper = !normalizedProps.invalid && !normalizedProps.warn;
 	const checkboxGroupInstanceId = useId();
-	const hasHelper = typeof helperText !== "undefined" && helperText !== null;
+	const hasHelper = hasHelperText(helperText);
 	const helperId = !hasHelper ? void 0 : `checkbox-helper-text-${checkboxGroupInstanceId}`;
 	const helper = hasHelper && /* @__PURE__ */ jsx("div", {
 		id: helperId,

package/es/components/CheckboxGroup/CheckboxGroup.js

@@ -9,6 +9,7 @@ import { usePrefix } from "../../internal/usePrefix.js";
 import { useId } from "../../internal/useId.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { isComponentElement } from "../../internal/utils.js";
+import { hasHelperText } from "../../internal/hasHelperText.js";
 import { useNormalizedInputProps } from "../../internal/useNormalizedInputProps.js";
 import { AILabel } from "../AILabel/index.js";
 import Checkbox$1 from "../Checkbox/Checkbox.js";
@@ -38,7 +39,7 @@ const CheckboxGroup = ({ children, className, decorator, helperText, invalid, in
 	});
 	const showWarning = normalizedProps.warn;
 	const showHelper = !normalizedProps.invalid && !normalizedProps.warn;
-	const hasHelper = typeof helperText !== "undefined" && helperText !== null;
+	const hasHelper = hasHelperText(helperText);
 	const helperId = !hasHelper ? void 0 : `checkbox-group-helper-text-${checkboxGroupInstanceId}`;
 	const helper = hasHelper && /* @__PURE__ */ jsx("div", {
 		id: helperId,

package/es/components/ComboBox/ComboBox.d.ts

@@ -197,7 +197,7 @@ export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLIn
 }
 type ComboboxComponentProps<ItemType> = PropsWithChildren<ComboBoxProps<ItemType>> & RefAttributes<HTMLInputElement>;
 export interface ComboBoxComponent {
-    <ItemType>(props: ComboboxComponentProps<ItemType>): ReactElement<any> | null;
+    <ItemType>(props: ComboboxComponentProps<ItemType>): ReactElement | null;
 }
 declare const _default: ComboBoxComponent;
 export default _default;

package/es/components/ComboBox/ComboBox.js

@@ -351,7 +351,7 @@ const ComboBox = forwardRef((props, ref) => {
 				selectedItem: newSelectedItem
 			});
 			if (isManualClearingRef.current) return;
-			if ((type === ItemClick || type === FunctionSelectItem || type === InputKeyDownEnter) && typeof newSelectedItem !== "undefined" && !isEqual(selectedItemProp, newSelectedItem)) {
+			if ((type === ItemClick || type === FunctionSelectItem || type === InputKeyDownEnter || !allowCustomValue && type === InputBlur) && typeof newSelectedItem !== "undefined" && !isEqual(currentSelectedItem, newSelectedItem)) {
 				if (items.some((item) => isEqual(item, newSelectedItem))) committedCustomValueRef.current = "";
 				onChange({ selectedItem: newSelectedItem });
 			}

package/es/components/ComboButton/index.js

@@ -38,8 +38,8 @@ const ComboButton = React.forwardRef(function ComboButton({ children, className,
 	const id = useId("combobutton");
 	const prefix = usePrefix();
 	const containerRef = useRef(null);
-	let middlewares = [];
-	if (!enableOnlyFloatingStyles) middlewares = [flip({ crossAxis: false }), hide()];
+	const middlewares = [];
+	if (!enableOnlyFloatingStyles) middlewares.push(flip({ crossAxis: false }), hide());
 	if (menuAlignment === "bottom" || menuAlignment === "top") middlewares.push(size({ apply({ rects, elements }) {
 		Object.assign(elements.floating.style, { width: `${rects.reference.width}px` });
 	} }));

package/es/components/ContentSwitcher/ContentSwitcher.d.ts

@@ -11,7 +11,7 @@ export interface ContentSwitcherProps extends Omit<HTMLAttributes<HTMLElement>,
     /**
      * Pass in Switch components to be rendered in the ContentSwitcher
      */
-    children?: ReactElement<any>[];
+    children?: ReactElement | ReactElement[];
     /**
      * Specify an optional className to be added to the container node
      */

package/es/components/ContentSwitcher/ContentSwitcher.js

@@ -7,15 +7,15 @@
 
 import { PrefixContext } from "../../internal/usePrefix.js";
 import { ArrowLeft, ArrowRight, Enter, Space } from "../../internal/keyboard/keys.js";
-import { matches } from "../../internal/keyboard/match.js";
+import { match } from "../../internal/keyboard/match.js";
 import { getNextIndex } from "../../internal/keyboard/navigation.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { isComponentElement } from "../../internal/utils.js";
-import { composeEventHandlers } from "../../tools/events.js";
 import { LayoutConstraint } from "../Layout/index.js";
+import Switch from "../Switch/Switch.js";
 import IconSwitch from "../Switch/IconSwitch.js";
 import classNames from "classnames";
-import { Children, cloneElement, isValidElement, useContext, useEffect, useRef, useState } from "react";
+import { Children, cloneElement, useContext, useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/ContentSwitcher/ContentSwitcher.tsx
@@ -44,25 +44,25 @@ const ContentSwitcher = ({ children, className, light, lowContrast, selectedInde
 		const ref = switchRefs.current[index];
 		if (ref) ref.focus();
 	};
-	const isKeyboardEvent = (event) => event && typeof event === "object" && "key" in event;
+	const hasKey = (event) => typeof event === "object" && event !== null && "key" in event;
 	const handleChildChange = (event) => {
 		if (typeof event.index === "undefined") return;
 		const { index } = event;
-		if (isKeyboardEvent(event) && matches(event, [ArrowRight, ArrowLeft])) {
+		if (hasKey(event) && (match(event.key, ArrowRight) || match(event.key, ArrowLeft))) {
 			const nextIndex = getNextIndex(event.key, index, childrenArray.length);
 			if (typeof nextIndex !== "number") return;
 			focusSwitch(nextIndex);
 			if (selectionMode !== "manual") {
 				const child = childrenArray[nextIndex];
 				setSelectedIndex(nextIndex);
-				if (isValidElement(child)) onChange({
+				if (isComponentElement(child, Switch) || isComponentElement(child, IconSwitch)) onChange({
 					...event,
 					index: nextIndex,
 					name: child.props.name,
 					text: child.props.text
 				});
 			}
-		} else if (selectedIndex !== index && (isKeyboardEvent(event) ? matches(event, [Enter, Space]) : true)) {
+		} else if (selectedIndex !== index && (hasKey(event) ? match(event.key, Enter) || match(event.key, Space) : true)) {
 			setSelectedIndex(index);
 			focusSwitch(index);
 			onChange(event);
@@ -88,14 +88,23 @@ const ContentSwitcher = ({ children, className, light, lowContrast, selectedInde
 		className: classes,
 		role: "tablist",
 		onChange: void 0,
-		children: children && Children.map(children, (child, index) => cloneElement(child, {
-			index,
-			onClick: composeEventHandlers([handleChildChange, child.props.onClick]),
-			onKeyDown: composeEventHandlers([handleChildChange, child.props.onKeyDown]),
-			selected: index === selectedIndex,
-			ref: handleItemRef(index),
-			size
-		}))
+		children: Children.map(children, (child, index) => {
+			if (!isComponentElement(child, Switch) && !isComponentElement(child, IconSwitch)) return child;
+			return cloneElement(child, {
+				index,
+				onClick: (event) => {
+					handleChildChange(event);
+					child.props.onClick?.(event);
+				},
+				onKeyDown: (event) => {
+					handleChildChange(event);
+					child.props.onKeyDown?.(event);
+				},
+				selected: index === selectedIndex,
+				ref: handleItemRef(index),
+				...isComponentElement(child, IconSwitch) ? { size } : {}
+			});
+		})
 	});
 };
 ContentSwitcher.displayName = "ContentSwitcher";

package/es/components/DataTable/DataTable.d.ts

@@ -255,7 +255,7 @@ export declare const DataTable: {
             tabIndex: PropTypes.Requireable<number>;
         };
     };
-    TableActionList: (props: import("react").HTMLAttributes<"div">) => React.ReactElement<any>;
+    TableActionList: (props: import("react").HTMLAttributes<"div">) => ReactElement;
     TableBatchAction: {
         ({ renderIcon, iconDescription, ...props }: import("./TableBatchAction").TableBatchActionProps): import("react/jsx-runtime").JSX.Element;
         propTypes: {
@@ -332,7 +332,7 @@ export declare const DataTable: {
             colSpan: PropTypes.Validator<number>;
         };
     };
-    TableHead: (props: import("react").HTMLAttributes<"thead">) => React.ReactElement<any>;
+    TableHead: (props: import("react").HTMLAttributes<"thead">) => ReactElement;
     TableHeader: import("react").ForwardRefExoticComponent<import("./TableHeader").TableHeaderProps & import("react").RefAttributes<HTMLTableCellElement>>;
     TableRow: import("react").ForwardRefExoticComponent<import("./TableRow").TableRowProps & import("react").RefAttributes<HTMLTableRowElement>>;
     TableSelectAll: {
@@ -382,7 +382,7 @@ export declare const DataTable: {
         };
     };
     TableToolbarAction: import("react").ForwardRefExoticComponent<import("./TableToolbarAction").TableToolbarActionProps & import("react").RefAttributes<HTMLDivElement>>;
-    TableToolbarContent: (props: import("react").HTMLAttributes<"div">) => React.ReactElement<any>;
+    TableToolbarContent: (props: import("react").HTMLAttributes<"div">) => ReactElement;
     TableToolbarSearch: {
         ({ className, searchContainerClass, onChange: onChangeProp, onClear, translateWithId: t, placeholder, labelText, expanded: expandedProp, defaultExpanded, defaultValue, disabled, onExpand, persistent, id, onBlur, onFocus, size, tabIndex, ...rest }: import("./TableToolbarSearch").TableToolbarSearchProps): import("react/jsx-runtime").JSX.Element;
         propTypes: {

package/es/components/DataTable/TableActionList.d.ts

@@ -4,5 +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.
  */
-declare const TableActionList: (props: import("react").HTMLAttributes<"div">) => React.ReactElement<any>;
+declare const TableActionList: (props: import("react").HTMLAttributes<"div">) => import("react").ReactElement;
 export default TableActionList;

package/es/components/DataTable/TableHead.d.ts

@@ -6,5 +6,5 @@
  */
 import { ThHTMLAttributes } from 'react';
 export type TableHeadProps = ThHTMLAttributes<HTMLTableSectionElement>;
-declare const TableHead: (props: import("react").HTMLAttributes<"thead">) => React.ReactElement<any>;
+declare const TableHead: (props: import("react").HTMLAttributes<"thead">) => import("react").ReactElement;
 export default TableHead;

package/es/components/DataTable/TableSlugRow.d.ts

@@ -1,11 +1,11 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 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.
  */
 import PropTypes from 'prop-types';
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 export interface TableSlugRowProps {
     /**
      * The CSS class names of the cell that wraps the underlying input control

package/es/components/DataTable/TableSlugRow.js

@@ -8,12 +8,12 @@
 import { usePrefix } from "../../internal/usePrefix.js";
 import { deprecateComponent } from "../../prop-types/deprecateComponent.js";
 import classNames from "classnames";
-import React, { useEffect } from "react";
+import { cloneElement, isValidElement, useEffect } from "react";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/DataTable/TableSlugRow.tsx
 /**
-* Copyright IBM Corp. 2016, 2025
+* Copyright IBM Corp. 2016, 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.
@@ -23,16 +23,13 @@ const TableSlugRow = ({ className, slug }) => {
 		deprecateComponent("TableSlugRow", "The `TableSlugRow` component has been deprecated and will be removed in the next major version. Use the TableDecoratorRow component instead.");
 	}, []);
 	const prefix = usePrefix();
-	const TableSlugRowClasses = classNames({
-		...className && { [className]: true },
-		[`${prefix}--table-column-slug`]: true,
-		[`${prefix}--table-column-slug--active`]: slug
-	});
-	let normalizedSlug;
-	if (slug) normalizedSlug = React.cloneElement(slug, { size: "mini" });
 	return /* @__PURE__ */ jsx("td", {
-		className: TableSlugRowClasses,
-		children: normalizedSlug
+		className: classNames({
+			...className && { [className]: true },
+			[`${prefix}--table-column-slug`]: true,
+			[`${prefix}--table-column-slug--active`]: slug
+		}),
+		children: isValidElement(slug) ? cloneElement(slug, { size: "mini" }) : void 0
 	});
 };
 TableSlugRow.displayName = "TableSlugRow";

package/es/components/DataTable/TableToolbarContent.d.ts

@@ -4,5 +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.
  */
-declare const TableToolbarContent: (props: import("react").HTMLAttributes<"div">) => React.ReactElement<any>;
+declare const TableToolbarContent: (props: import("react").HTMLAttributes<"div">) => import("react").ReactElement;
 export default TableToolbarContent;

package/es/components/DataTable/TableToolbarSearch.d.ts

@@ -13,7 +13,7 @@ declare const translationIds: {
     readonly 'carbon.table.toolbar.search.placeholder': "carbon.table.toolbar.search.placeholder";
 };
 type TranslationKey = keyof typeof translationIds;
-type ExcludedInheritedProps = 'defaultValue' | 'labelText' | 'onBlur' | 'onChange' | 'onExpand' | 'onFocus' | 'tabIndex';
+type ExcludedInheritedProps = 'defaultValue' | 'labelText' | 'onBlur' | 'onChange' | 'onExpand' | 'onFocus' | 'tabIndex' | 'size';
 export type TableToolbarSearchHandleExpand = (event: FocusEvent<HTMLInputElement>, newValue?: boolean) => void;
 /**
  * @deprecated Passing `''` as the event sentinel is legacy compatibility
@@ -69,6 +69,10 @@ export interface TableToolbarSearchProps extends Omit<SearchProps, ExcludedInher
      * Provide an optional className for the overall container of the Search
      */
     searchContainerClass?: string;
+    /**
+     * Specify the size of the Search
+     */
+    size?: 'sm' | 'md' | 'lg';
     tabIndex?: number | string;
 }
 declare const TableToolbarSearch: {

package/es/components/DatePicker/DatePicker.js

@@ -39,6 +39,7 @@ function initializeWeekdayShorthand() {
 	});
 }
 const forEach = Array.prototype.forEach;
+const defaultAriaDateFormat = "l, F j, Y";
 /**
 * @param {number} monthNumber The month number.
 * @param {boolean} shorthand `true` to use shorthand month.
@@ -164,7 +165,6 @@ const DatePicker = forwardRef((props, ref) => {
 	const lastFocusedField = useRef(null);
 	const savedOnChange = useSavedCallback(onChange);
 	const savedOnOpen = useSavedCallback(onOpen);
-	const effectiveWarn = warn && !invalid;
 	const wrapperRef = useRef(null);
 	const datePickerClasses = classNames(`${prefix}--date-picker`, {
 		[`${prefix}--date-picker--short`]: short,
@@ -176,31 +176,35 @@ const DatePicker = forwardRef((props, ref) => {
 	});
 	const wrapperClasses = classNames(`${prefix}--form-item`, { [String(className)]: className });
 	const childrenWithProps = React.Children.toArray(children).map((child, index) => {
+		const childInvalid = child.props?.invalid;
+		const childWarn = child.props?.warn;
+		const mergedInvalid = invalid ?? childInvalid;
+		const mergedWarn = mergedInvalid ? false : warn ?? childWarn;
 		if (index === 0 && isComponentElement(child, DatePickerInput_default)) return React.cloneElement(child, {
 			datePickerType,
 			ref: startInputField,
 			readOnly,
-			invalid,
-			warn: effectiveWarn
+			invalid: mergedInvalid,
+			warn: mergedWarn
 		});
 		if (index === 1 && isComponentElement(child, DatePickerInput_default)) return React.cloneElement(child, {
 			datePickerType,
 			ref: endInputField,
 			readOnly,
-			invalid,
-			warn: effectiveWarn
+			invalid: mergedInvalid,
+			warn: mergedWarn
 		});
 		if (index === 0) return React.cloneElement(child, {
 			ref: startInputField,
 			readOnly,
-			invalid,
-			warn: effectiveWarn
+			invalid: mergedInvalid,
+			warn: mergedWarn
 		});
 		if (index === 1) return React.cloneElement(child, {
 			ref: endInputField,
 			readOnly,
-			invalid,
-			warn: effectiveWarn
+			invalid: mergedInvalid,
+			warn: mergedWarn
 		});
 	});
 	useEffect(() => {
@@ -255,6 +259,7 @@ const DatePicker = forwardRef((props, ref) => {
 			inline: inline ?? false,
 			onClose: onCalendarClose,
 			disableMobile: true,
+			ariaDateFormat: defaultAriaDateFormat,
 			defaultDate: value,
 			closeOnSelect,
 			mode: datePickerType,
@@ -339,7 +344,6 @@ const DatePicker = forwardRef((props, ref) => {
 			const { target } = event;
 			if (target === start) lastStartValue.current = start.value;
 			if (start.value !== "") return;
-			if (!calendar.selectedDates) return;
 			if (calendar.selectedDates.length === 0) return;
 		}
 		function handleKeyPress(event) {
@@ -421,9 +425,7 @@ const DatePicker = forwardRef((props, ref) => {
 	}, [value, startInputField]);
 	useEffect(() => {
 		if (calendarRef.current?.set) {
-			if (value !== void 0) if (value === "" || value === null || Array.isArray(value) && (value.length === 0 || value.every(isEmptyDateValue))) {
-				if (calendarRef.current.selectedDates.length > 0) calendarRef.current.clear();
-			} else calendarRef.current.setDate(value);
+			if (!isEmptyDateValue(value) && (!Array.isArray(value) || value.length > 0 && !value.every(isEmptyDateValue))) calendarRef.current.setDate(value);
 			updateClassNames(calendarRef.current, prefix);
 		} else if (!calendarRef.current && typeof value !== "undefined" && value !== null) startInputField.current.value = value;
 	}, [

package/es/components/DatePicker/plugins/fixEventsPlugin.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { ArrowDown, ArrowLeft, ArrowRight, Enter } from "../../../internal/keyboard/keys.js";
+import { ArrowDown, Enter } from "../../../internal/keyboard/keys.js";
 import { match } from "../../../internal/keyboard/match.js";
 //#region src/components/DatePicker/plugins/fixEventsPlugin.ts
 const fixEventsPlugin = (config) => (fp) => {
@@ -52,8 +52,7 @@ const fixEventsPlugin = (config) => (fp) => {
 				if (inputTo === target && fp.config.closeOnSelect) requestAnimationFrame(() => {
 					fp.close();
 				});
-			} else if (match(event, ArrowLeft) || match(event, ArrowRight)) event.stopPropagation();
-			else if (match(event, ArrowDown)) {
+			} else if (match(event, ArrowDown)) {
 				event.preventDefault();
 				fp.open();
 			} else if (!fp.config.allowInput) {

package/es/components/Dropdown/Dropdown.d.ts

@@ -152,7 +152,7 @@ export type DropdownTranslationKey = ListBoxMenuIconTranslationKey;
 interface DropdownComponent {
     <ItemType>(props: DropdownProps<ItemType> & {
         ref?: Ref<HTMLButtonElement>;
-    }): React.ReactElement<any> | null;
+    }): React.ReactElement | null;
 }
 declare const _default: DropdownComponent;
 export default _default;

package/es/components/FluidTimePicker/FluidTimePicker.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2022
+ * Copyright IBM Corp. 2022, 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/FluidTimePicker/FluidTimePicker.js

@@ -6,15 +6,17 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.js";
+import { isComponentElement } from "../../internal/utils.js";
 import FluidTextInput_default from "../FluidTextInput/index.js";
+import FluidTimePickerSelect_default from "../FluidTimePickerSelect/index.js";
 import classNames from "classnames";
-import React from "react";
+import React, { cloneElement } from "react";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { WarningAltFilled, WarningFilled } from "@carbon/icons-react";
 //#region src/components/FluidTimePicker/FluidTimePicker.tsx
 /**
-* Copyright IBM Corp. 2022
+* Copyright IBM Corp. 2022, 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.
@@ -34,8 +36,8 @@ const FluidTimePicker = React.forwardRef(({ className, children, disabled, inval
 	};
 	const error = invalid || warn;
 	const childrenWithProps = () => {
-		if (disabled) return React.Children.toArray(children).map((child) => React.cloneElement(child, { disabled: true }));
-		if (readOnly) return React.Children.toArray(children).map((child) => React.cloneElement(child, { readOnly: true }));
+		if (disabled) return React.Children.toArray(children).map((child) => isComponentElement(child, FluidTimePickerSelect_default) ? cloneElement(child, { disabled: true }) : child);
+		if (readOnly) return React.Children.toArray(children).map((child) => isComponentElement(child, FluidTimePickerSelect_default) ? cloneElement(child, { readOnly: true }) : child);
 		return children;
 	};
 	return /* @__PURE__ */ jsxs("div", {

package/es/components/FluidTimePickerSelect/FluidTimePickerSelect.d.ts

@@ -36,6 +36,10 @@ export interface FluidTimePickerSelectProps {
      * the underlying `<input>` changes
      */
     onChange?: React.ChangeEventHandler<HTMLSelectElement>;
+    /**
+     * Whether the component is read-only.
+     */
+    readOnly?: boolean;
 }
 declare const FluidTimePickerSelect: React.ForwardRefExoticComponent<FluidTimePickerSelectProps & React.RefAttributes<HTMLSelectElement>>;
 export default FluidTimePickerSelect;

package/es/components/FluidTimePickerSelect/FluidTimePickerSelect.js

@@ -31,7 +31,8 @@ FluidTimePickerSelect.propTypes = {
 	disabled: PropTypes.bool,
 	id: PropTypes.string.isRequired,
 	labelText: PropTypes.node,
-	onChange: PropTypes.func
+	onChange: PropTypes.func,
+	readOnly: PropTypes.bool
 };
 //#endregion
 export { FluidTimePickerSelect as default };

package/es/components/FluidTimePickerSelect/index.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+
+import FluidTimePickerSelect from "./FluidTimePickerSelect.js";
+//#region src/components/FluidTimePickerSelect/index.tsx
+/**
+* Copyright IBM Corp. 2022
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+var FluidTimePickerSelect_default = FluidTimePickerSelect;
+//#endregion
+export { FluidTimePickerSelect_default as default };

package/es/components/Grid/CSSGrid.js

@@ -18,7 +18,7 @@ import { jsx } from "react/jsx-runtime";
 * 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 CSSGrid = React.forwardRef(({ align, as, children, className: customClassName, condensed = false, fullWidth = false, narrow = false, ...rest }, ref) => {
+const CSSGrid = React.forwardRef(({ align, as, children, className: customClassName, condensed = false, fullWidth = false, narrow = false, withRowGap, ...rest }, ref) => {
 	const prefix = usePrefix();
 	const { subgrid } = useGridSettings();
 	let mode = "wide";
@@ -32,6 +32,7 @@ const CSSGrid = React.forwardRef(({ align, as, children, className: customClassN
 			as,
 			className: customClassName,
 			mode,
+			withRowGap,
 			...rest,
 			children
 		})
@@ -42,7 +43,8 @@ const CSSGrid = React.forwardRef(({ align, as, children, className: customClassN
 		[`${prefix}--css-grid--narrow`]: mode === "narrow",
 		[`${prefix}--css-grid--full-width`]: fullWidth,
 		[`${prefix}--css-grid--start`]: align === "start",
-		[`${prefix}--css-grid--end`]: align === "end"
+		[`${prefix}--css-grid--end`]: align === "end",
+		[`${prefix}--css-grid--with-row-gap`]: withRowGap
 	});
 	return /* @__PURE__ */ jsx(GridSettings, {
 		mode: "css-grid",
@@ -66,15 +68,17 @@ CSSGrid.propTypes = {
 	className: PropTypes.string,
 	condensed: PropTypes.bool,
 	fullWidth: PropTypes.bool,
-	narrow: PropTypes.bool
+	narrow: PropTypes.bool,
+	withRowGap: PropTypes.bool
 };
-const Subgrid = React.forwardRef(({ as, className: customClassName, children, mode, ...rest }, ref) => {
+const Subgrid = React.forwardRef(({ as, className: customClassName, children, mode, withRowGap, ...rest }, ref) => {
 	const prefix = usePrefix();
 	const className = classNames(customClassName, {
 		[`${prefix}--subgrid`]: true,
 		[`${prefix}--subgrid--condensed`]: mode === "condensed",
 		[`${prefix}--subgrid--narrow`]: mode === "narrow",
-		[`${prefix}--subgrid--wide`]: mode === "wide"
+		[`${prefix}--subgrid--wide`]: mode === "wide",
+		[`${prefix}--subgrid--with-row-gap`]: withRowGap
 	});
 	return /* @__PURE__ */ jsx(as || "div", {
 		...rest,
@@ -91,7 +95,8 @@ Subgrid.propTypes = {
 		"wide",
 		"narrow",
 		"condensed"
-	])
+	]),
+	withRowGap: PropTypes.bool
 };
 const CSSGridComponent = CSSGrid;
 //#endregion

package/es/components/Grid/Column.d.ts

@@ -4,7 +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 from 'react';
+import React, { type ReactElement } from 'react';
 import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
 type ColumnSpanPercent = '25%' | '50%' | '75%' | '100%';
 type ColumnSpanSimple = boolean | number | ColumnSpanPercent;
@@ -67,7 +67,7 @@ export interface ColumnBaseProps {
 }
 export type ColumnProps<T extends React.ElementType> = PolymorphicComponentPropWithRef<T, ColumnBaseProps>;
 export interface ColumnComponent {
-    <T extends React.ElementType>(props: ColumnProps<T>, context?: any): React.ReactElement<any, any> | null;
+    <T extends React.ElementType>(props: ColumnProps<T>, context?: any): ReactElement | null;
 }
 declare const _default: ColumnComponent;
 export default _default;

package/es/components/Grid/ColumnHang.d.ts

@@ -1,10 +1,10 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 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.
  */
-import React from 'react';
+import React, { type ReactElement } from 'react';
 import { PolymorphicProps } from '../../types/common';
 interface ColumnHangBaseProps {
     /**
@@ -18,7 +18,7 @@ interface ColumnHangBaseProps {
 }
 export type ColumnHangProps<T extends React.ElementType> = PolymorphicProps<T, ColumnHangBaseProps>;
 export interface ColumnHangComponent {
-    <T extends React.ElementType>(props: ColumnHangProps<T>, context?: any): React.ReactElement<any, any> | null;
+    <T extends React.ElementType>(props: ColumnHangProps<T>, context?: any): ReactElement | null;
 }
 declare const ColumnHangComponent: ColumnHangComponent;
 export { ColumnHangComponent as ColumnHang };

package/es/components/Grid/ColumnHang.js

@@ -12,7 +12,7 @@ import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Grid/ColumnHang.tsx
 /**
-* Copyright IBM Corp. 2016, 2023
+* Copyright IBM Corp. 2016, 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.