@carbon/react 1.106.0 → 1.107.0

package/lib/components/OverflowMenu/OverflowMenu.js

@@ -13,9 +13,11 @@ const require_setupGetInstanceId = require("../../tools/setupGetInstanceId.js");
 const require_noopFn = require("../../internal/noopFn.js");
 const require_deprecate = require("../../prop-types/deprecate.js");
 const require_deprecateValuesWithin = require("../../prop-types/deprecateValuesWithin.js");
+const require_utils = require("../../internal/utils.js");
 const require_mapPopoverAlign = require("../../tools/mapPopoverAlign.js");
 const require_index = require("../IconButton/index.js");
 const require_mergeRefs = require("../../tools/mergeRefs.js");
+const require_OverflowMenuItem = require("../OverflowMenuItem/OverflowMenuItem.js");
 const require_FloatingMenu = require("../../internal/FloatingMenu.js");
 const require_useOutsideClick = require("../../internal/useOutsideClick.js");
 let classnames = require("classnames");
@@ -227,17 +229,14 @@ const OverflowMenu = (0, react.forwardRef)(({ align, ["aria-label"]: ariaLabel =
 	});
 	const overflowMenuIconClasses = (0, classnames.default)(`${prefix}--overflow-menu__icon`, iconClass);
 	const childrenWithProps = react.Children.toArray(children).map((child, index) => {
-		if ((0, react.isValidElement)(child)) {
-			const childElement = child;
-			return (0, react.cloneElement)(childElement, {
-				closeMenu: childElement.props.closeMenu || closeMenuAndFocus,
-				handleOverflowMenuItemFocus,
-				ref: (el) => {
-					menuItemRefs.current[index] = el;
-				},
-				index
-			});
-		}
+		if (require_utils.isComponentElement(child, require_OverflowMenuItem.default)) return (0, react.cloneElement)(child, {
+			closeMenu: child.props.closeMenu || closeMenuAndFocus,
+			handleOverflowMenuItemFocus,
+			ref: (el) => {
+				menuItemRefs.current[index] = el;
+			},
+			index
+		});
 		return null;
 	});
 	const wrappedMenuBody = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FloatingMenu.FloatingMenu, {

package/lib/components/Pagination/Pagination.d.ts

@@ -96,7 +96,7 @@ export interface PaginationProps extends Omit<React.HTMLAttributes<HTMLDivElemen
     /**
      * Specify the size of the Pagination.
      */
-    size?: 'sm' | 'md' | 'lg';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
     /**
      * The total number of items.
      */

package/lib/components/Pagination/Pagination.js

@@ -75,6 +75,7 @@ const Pagination = react.default.forwardRef(({ backwardText = "Previous page", c
 	const className = (0, classnames.default)({
 		[`${prefix}--pagination`]: true,
 		[`${prefix}--pagination--${size}`]: size,
+		[`${prefix}--layout--size-${size}`]: size,
 		[customClassName]: !!customClassName
 	});
 	const totalPages = totalItems ? Math.max(Math.ceil(totalItems / pageSize), 1) : 1;
@@ -292,6 +293,7 @@ Pagination.propTypes = {
 	pageText: prop_types.default.func,
 	pagesUnknown: prop_types.default.bool,
 	size: prop_types.default.oneOf([
+		"xs",
 		"sm",
 		"md",
 		"lg"

package/lib/components/Popover/index.js

@@ -41,6 +41,18 @@ const Popover = react.default.forwardRef(function PopoverRenderFunction({ isTabT
 	const popover = (0, react.useRef)(null);
 	const enableFloatingStyles = require_index.useFeatureFlag("enable-v12-dynamic-floating-styles") || autoAlign;
 	const lastClickWasInsidePopoverContent = (0, react.useRef)(false);
+	const isTargetInDatePickerInsidePopover = (target) => {
+		if (!popover.current) return false;
+		const calendar = target instanceof Element && target.closest(".flatpickr-calendar");
+		if (!calendar) return false;
+		const inputs = popover.current.querySelectorAll("input");
+		for (const input of inputs) {
+			if (!("_flatpickr" in input)) continue;
+			const fp = input._flatpickr;
+			if (fp && typeof fp === "object" && "calendarContainer" in fp && fp.calendarContainer === calendar) return true;
+		}
+		return false;
+	};
 	let align = require_mapPopoverAlign.mapPopoverAlign(initialAlign);
 	require_useEvent.useEvent(popover, "mousedown", (event) => {
 		const target = event.target;
@@ -58,13 +70,14 @@ const Popover = react.default.forwardRef(function PopoverRenderFunction({ isTabT
 			}
 			onRequestClose?.();
 		} else if (relatedTarget && !popover.current?.contains(relatedTarget)) {
+			if (isTargetInDatePickerInsidePopover(relatedTarget)) return;
 			const isOutsideFloating = enableFloatingStyles && refs.floating.current ? !refs.floating.current.contains(relatedTarget) : true;
 			const isFocusableWrapper = relatedTarget && popover.current && relatedTarget.contains(popover.current);
 			if (isOutsideFloating && !isFocusableWrapper) onRequestClose?.();
 		}
 	});
 	require_useEvent.useWindowEvent("click", ({ target }) => {
-		if (open && target instanceof Node && !popover.current?.contains(target)) onRequestClose?.();
+		if (open && target instanceof Node && !popover.current?.contains(target) && !isTargetInDatePickerInsidePopover(target)) onRequestClose?.();
 	});
 	const popoverDimensions = (0, react.useRef)({
 		offset: 10,

package/lib/components/RadioButtonGroup/RadioButtonGroup.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { type ReactNode } from 'react';
-import type { RadioButtonProps } from '../RadioButton';
+import { type RadioButtonProps } from '../RadioButton';
 export declare const RadioButtonGroupContext: React.Context<null>;
 type ExcludedAttributes = 'onChange';
 export interface RadioButtonGroupProps extends Omit<React.InputHTMLAttributes<HTMLFieldSetElement>, ExcludedAttributes> {

package/lib/components/RadioButtonGroup/RadioButtonGroup.js

@@ -10,8 +10,10 @@ const require_usePrefix = require("../../internal/usePrefix.js");
 const require_useId = require("../../internal/useId.js");
 const require_deprecate = require("../../prop-types/deprecate.js");
 const require_utils = require("../../internal/utils.js");
+const require_hasHelperText = require("../../internal/hasHelperText.js");
 const require_index = require("../AILabel/index.js");
 const require_mergeRefs = require("../../tools/mergeRefs.js");
+const require_index$1 = require("../RadioButton/index.js");
 const require_createTextComponent = require("../Text/createTextComponent.js");
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
@@ -35,8 +37,8 @@ const RadioButtonGroup = react.default.forwardRef((props, ref) => {
 		}
 	}, [valueSelected]);
 	function getRadioButtons() {
-		return react.default.Children.map(children, (radioButton) => {
-			if (!radioButton) return;
+		return react.Children.map(children, (radioButton) => {
+			if (!require_utils.isComponentElement(radioButton, require_index$1.default)) return radioButton;
 			const newProps = {
 				name,
 				key: radioButton.props.value,
@@ -46,7 +48,7 @@ const RadioButtonGroup = react.default.forwardRef((props, ref) => {
 				required
 			};
 			if (!selected && radioButton.props.checked) newProps.checked = true;
-			return react.default.cloneElement(radioButton, newProps);
+			return (0, react.cloneElement)(radioButton, newProps);
 		});
 	}
 	function handleOnChange(newSelection, value, evt) {
@@ -70,7 +72,7 @@ const RadioButtonGroup = react.default.forwardRef((props, ref) => {
 		[`${prefix}--radio-button-group--decorator`]: decorator
 	});
 	const helperClasses = (0, classnames.default)(`${prefix}--form__helper-text`, { [`${prefix}--form__helper-text--disabled`]: disabled });
-	const hasHelper = typeof helperText !== "undefined" && helperText !== null;
+	const hasHelper = require_hasHelperText.hasHelperText(helperText);
 	const helperId = !hasHelper ? void 0 : `radio-button-group-helper-text-${radioButtonGroupInstanceId}`;
 	const helper = hasHelper && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		id: helperId,
@@ -91,7 +93,7 @@ const RadioButtonGroup = react.default.forwardRef((props, ref) => {
 				className: fieldsetClasses,
 				disabled,
 				"data-invalid": invalid ? true : void 0,
-				"aria-describedby": showHelper && helperText ? helperId : void 0,
+				"aria-describedby": showHelper && hasHelper ? helperId : void 0,
 				...rest,
 				children: [legendText && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_createTextComponent.Legend, {
 					className: `${prefix}--label`,

package/lib/components/Search/Search.Skeleton.d.ts

@@ -1,5 +1,5 @@
 /**
- * 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.
@@ -11,22 +11,31 @@ export interface SearchSkeletonProps extends React.HTMLAttributes<HTMLDivElement
      * Specify an optional className to add.
      */
     className?: string;
+    /**
+     * Specify the size of the SearchSkeleton
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg';
     /**
      * Specify whether the Search should be a small variant.
+     * @deprecated Use `size` prop instead. This prop will be removed in the next major release.
      */
     small?: boolean;
 }
 declare const SearchSkeleton: {
-    ({ small, className, ...rest }: SearchSkeletonProps): import("react/jsx-runtime").JSX.Element;
+    ({ small, size, className, ...rest }: SearchSkeletonProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Specify an optional className to add.
          */
         className: PropTypes.Requireable<string>;
+        /**
+         * Specify the size of the SearchSkeleton
+         */
+        size: PropTypes.Requireable<string>;
         /**
          * Specify whether the Search should be a small variant
          */
-        small: PropTypes.Requireable<boolean>;
+        small: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any;
     };
 };
 export default SearchSkeleton;

package/lib/components/Search/Search.Skeleton.js

@@ -7,6 +7,7 @@
 
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
+const require_deprecate = require("../../prop-types/deprecate.js");
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
 let react = require("react");
@@ -16,26 +17,33 @@ prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/Search/Search.Skeleton.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.
 */
-const SearchSkeleton = ({ small = false, className, ...rest }) => {
+const SearchSkeleton = ({ small = false, size, className, ...rest }) => {
 	const prefix = require_usePrefix.usePrefix();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	const normalizedSize = small ? "sm" : size;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: (0, classnames.default)(className, {
 			[`${prefix}--skeleton`]: true,
-			[`${prefix}--search--xl`]: !small,
-			[`${prefix}--search--sm`]: small
+			[`${prefix}--search--sm`]: small,
+			[`${prefix}--layout--size-${normalizedSize}`]: normalizedSize
 		}),
 		...rest,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: `${prefix}--label` }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: `${prefix}--search-input` })]
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: `${prefix}--search-input` })
 	});
 };
 SearchSkeleton.propTypes = {
 	className: prop_types.default.string,
-	small: prop_types.default.bool
+	size: prop_types.default.oneOf([
+		"xs",
+		"sm",
+		"md",
+		"lg"
+	]),
+	small: require_deprecate.deprecate(prop_types.default.bool, "The `small` prop has been deprecated and will be removed in the next major release. Please use the `size` prop instead.")
 };
 //#endregion
 exports.default = SearchSkeleton;

package/lib/components/Search/Search.d.ts

@@ -71,7 +71,7 @@ export interface SearchProps extends InputPropsBase {
     /**
      * Specify the size of the Search
      */
-    size?: 'sm' | 'md' | 'lg';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
     /**
      * Specify the type of the `<input>`
      */

package/lib/components/Search/Search.js

@@ -32,7 +32,7 @@ let _carbon_icons_react = require("@carbon/icons-react");
 * 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 Search = react.default.forwardRef(({ autoComplete = "off", className, closeButtonLabelText = "Clear search input", defaultValue, disabled, isExpanded = true, id, labelText, light, onChange = () => {}, onClear = () => {}, onKeyDown, onExpand, placeholder = "Search", renderIcon, role, size = "md", type = "search", value, ...rest }, forwardRef) => {
+const Search = react.default.forwardRef(({ autoComplete = "off", className, closeButtonLabelText = "Clear search input", defaultValue, disabled, isExpanded = true, id, labelText, light, onChange = () => {}, onClear = () => {}, onKeyDown, onExpand, placeholder = "Search", renderIcon, role, size, type = "search", value, ...rest }, forwardRef) => {
 	const hasPropValue = require_utils.isSearchValuePresent(value) || require_utils.isSearchValuePresent(defaultValue);
 	const prefix = require_usePrefix.usePrefix();
 	const { isFluid } = (0, react.useContext)(require_FormContext.FormContext);
@@ -45,9 +45,8 @@ const Search = react.default.forwardRef(({ autoComplete = "off", className, clos
 	const [hasContent, setHasContent] = (0, react.useState)(hasPropValue || false);
 	const searchClasses = (0, classnames.default)({
 		[`${prefix}--search`]: true,
-		[`${prefix}--search--sm`]: size === "sm",
-		[`${prefix}--search--md`]: size === "md",
-		[`${prefix}--search--lg`]: size === "lg",
+		[`${prefix}--search--${size}`]: size,
+		[`${prefix}--layout--size-${size}`]: size,
 		[`${prefix}--search--light`]: light,
 		[`${prefix}--search--disabled`]: disabled,
 		[`${prefix}--search--fluid`]: isFluid
@@ -177,6 +176,7 @@ Search.propTypes = {
 	renderIcon: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.object]),
 	role: require_deprecate.deprecate(prop_types.default.string, "The `role` prop has been deprecated since <input type=\"search\"> already provides correct semantics. It will be removed in the next major release of Carbon."),
 	size: prop_types.default.oneOf([
+		"xs",
 		"sm",
 		"md",
 		"lg"

package/lib/components/Select/Select.d.ts

@@ -79,7 +79,7 @@ export interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, Exclu
     /**
      * Specify the size of the Select Input.
      */
-    size?: 'sm' | 'md' | 'lg';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
     /**
      * @deprecated please use decorator instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `Dropdown` component

package/lib/components/Select/Select.js

@@ -10,6 +10,7 @@ const require_usePrefix = require("../../internal/usePrefix.js");
 const require_Text = require("../Text/Text.js");
 const require_deprecate = require("../../prop-types/deprecate.js");
 const require_utils = require("../../internal/utils.js");
+const require_hasHelperText = require("../../internal/hasHelperText.js");
 const require_useNormalizedInputProps = require("../../internal/useNormalizedInputProps.js");
 const require_index = require("../AILabel/index.js");
 const require_events = require("../../tools/events.js");
@@ -57,19 +58,18 @@ const Select = (0, react.forwardRef)(({ className, decorator, id, inline = false
 		[`${prefix}--select--fluid--invalid`]: isFluid && normalizedProps.invalid,
 		[`${prefix}--select--fluid--focus`]: isFluid && isFocused,
 		[`${prefix}--select--slug`]: slug,
-		[`${prefix}--select--decorator`]: decorator
+		[`${prefix}--select--decorator`]: decorator,
+		[`${prefix}--select--${size}`]: size,
+		[`${prefix}--layout--size-${size}`]: size
 	});
 	const labelClasses = (0, classnames.default)(`${prefix}--label`, {
 		[`${prefix}--visually-hidden`]: hideLabel,
 		[`${prefix}--label--disabled`]: normalizedProps.disabled
 	});
-	const inputClasses = (0, classnames.default)({
-		[`${prefix}--select-input`]: true,
-		[`${prefix}--select-input--${size}`]: size
-	});
+	const inputClasses = (0, classnames.default)({ [`${prefix}--select-input`]: true });
 	const error = normalizedProps.validation;
 	const helperTextClasses = (0, classnames.default)(`${prefix}--form__helper-text`, { [`${prefix}--form__helper-text--disabled`]: normalizedProps.disabled });
-	const helper = typeof helperText !== "undefined" && helperText !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
+	const helper = require_hasHelperText.hasHelperText(helperText) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
 		as: "div",
 		id: normalizedProps.helperId,
 		className: helperTextClasses,
@@ -179,6 +179,7 @@ Select.propTypes = {
 	onChange: prop_types.default.func,
 	readOnly: prop_types.default.bool,
 	size: prop_types.default.oneOf([
+		"xs",
 		"sm",
 		"md",
 		"lg"