@carbon/react 1.103.0-rc.0 → 1.104.0-rc.0

package/es/components/TileGroup/TileGroup.js

@@ -1,122 +1,81 @@
 /**
- * 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 { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import PropTypes from 'prop-types';
-import React, { useState, useEffect, Children, isValidElement, cloneElement } from 'react';
-import RadioTile from '../RadioTile/RadioTile.js';
-import { isComponentElement } from '../../internal/utils.js';
-import { usePrefix } from '../../internal/usePrefix.js';
-import { noopFn } from '../../internal/noopFn.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import { noopFn } from "../../internal/noopFn.js";
+import { isComponentElement } from "../../internal/utils.js";
+import RadioTile_default from "../RadioTile/index.js";
+import React, { Children, cloneElement, createElement, isValidElement, useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
-const TileGroup = ({
-  children,
-  className,
-  defaultSelected,
-  disabled,
-  legend,
-  name,
-  onChange = noopFn,
-  valueSelected,
-  required
-}) => {
-  const prefix = usePrefix();
-  const [selected, setSelected] = useState(valueSelected ?? defaultSelected);
-  useEffect(() => {
-    if (typeof valueSelected !== 'undefined' && valueSelected !== selected) {
-      setSelected(valueSelected);
-    }
-  }, [valueSelected, selected]);
-  const handleChange = (value, name, evt) => {
-    if (value !== selected) {
-      setSelected(value);
-      onChange(value, name ?? '', evt);
-    }
-  };
-  const getRadioTilesWithWrappers = elements => {
-    const traverseAndModifyChildren = elements => {
-      return Children.map(elements, child => {
-        if (! /*#__PURE__*/isValidElement(child)) return child;
-
-        // If a `RadioTile` is found, return it with necessary props,
-        if (isComponentElement(child, RadioTile)) {
-          const {
-            value,
-            ...otherProps
-          } = child.props;
-          return /*#__PURE__*/React.createElement(RadioTile, _extends({}, otherProps, {
-            required: required,
-            name: name,
-            key: value,
-            value: value,
-            onChange: handleChange,
-            checked: value === selected
-          }));
-        }
-
-        // If the child is not RadioTile and has children, recheck the children
-        const children = child.props.children;
-        const hasChildren = Children.count(children) > 0;
-        if (hasChildren) {
-          return /*#__PURE__*/cloneElement(child, undefined, traverseAndModifyChildren(children));
-        }
-
-        // If the child is neither a RadioTile nor has children, return it as is
-        return child;
-      });
-    };
-    return /*#__PURE__*/React.createElement(React.Fragment, null, traverseAndModifyChildren(elements));
-  };
-  return /*#__PURE__*/React.createElement("fieldset", {
-    className: className ?? `${prefix}--tile-group`,
-    disabled: disabled
-  }, legend && /*#__PURE__*/React.createElement("legend", {
-    className: `${prefix}--label`
-  }, legend), /*#__PURE__*/React.createElement("div", null, getRadioTilesWithWrappers(children)));
+//#region src/components/TileGroup/TileGroup.tsx
+/**
+* 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 TileGroup = ({ children, className, defaultSelected, disabled, legend, name, onChange = noopFn, valueSelected, required }) => {
+	const prefix = usePrefix();
+	const [selected, setSelected] = useState(valueSelected ?? defaultSelected);
+	useEffect(() => {
+		if (typeof valueSelected !== "undefined" && valueSelected !== selected) setSelected(valueSelected);
+	}, [valueSelected, selected]);
+	const handleChange = (value, name, evt) => {
+		if (value !== selected) {
+			setSelected(value);
+			onChange(value, name ?? "", evt);
+		}
+	};
+	const getRadioTilesWithWrappers = (elements) => {
+		const traverseAndModifyChildren = (elements) => {
+			return Children.map(elements, (child) => {
+				if (!isValidElement(child)) return child;
+				if (isComponentElement(child, RadioTile_default)) {
+					const { value, ...otherProps } = child.props;
+					return /* @__PURE__ */ createElement(RadioTile_default, {
+						...otherProps,
+						required,
+						name,
+						key: value,
+						value,
+						onChange: handleChange,
+						checked: value === selected
+					});
+				}
+				const children = child.props.children;
+				if (Children.count(children) > 0) return cloneElement(child, void 0, traverseAndModifyChildren(children));
+				return child;
+			});
+		};
+		return /* @__PURE__ */ jsx(Fragment, { children: traverseAndModifyChildren(elements) });
+	};
+	return /* @__PURE__ */ jsxs("fieldset", {
+		className: className ?? `${prefix}--tile-group`,
+		disabled,
+		children: [legend && /* @__PURE__ */ jsx("legend", {
+			className: `${prefix}--label`,
+			children: legend
+		}), /* @__PURE__ */ jsx("div", { children: getRadioTilesWithWrappers(children) })]
+	});
 };
-TileGroup.displayName = 'TileGroup';
+TileGroup.displayName = "TileGroup";
 TileGroup.propTypes = {
-  /**
-   * Provide a collection of <RadioTile> components to render in the group
-   */
-  children: PropTypes.node,
-  /**
-   * Provide an optional className to be applied to the container node
-   */
-  className: PropTypes.string,
-  /**
-   * Specify the the value of <RadioTile> to be selected by default
-   */
-  defaultSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /**
-   * Specify whether the group is disabled
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Provide an optional legend for this group
-   */
-  legend: PropTypes.string,
-  /**
-   * Specify the name of the underlying `<input>` nodes
-   */
-  name: PropTypes.string.isRequired,
-  /**
-   * Provide an optional `onChange` hook that is called whenever the value of
-   * the group changes
-   */
-  onChange: PropTypes.func,
-  /**
-   * `true` to specify if input selection in group is required.
-   */
-  required: PropTypes.bool,
-  /**
-   * Specify the value that is currently selected in the group
-   */
-  valueSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+	children: PropTypes.node,
+	className: PropTypes.string,
+	defaultSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+	disabled: PropTypes.bool,
+	legend: PropTypes.string,
+	name: PropTypes.string.isRequired,
+	onChange: PropTypes.func,
+	required: PropTypes.bool,
+	valueSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
 
-export { TileGroup };
+//#endregion
+export { TileGroup };

package/es/components/TimePicker/TimePicker.d.ts

@@ -1,5 +1,5 @@
 /**
- * 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.

package/es/components/TimePicker/TimePicker.js

@@ -1,258 +1,159 @@
 /**
- * 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 { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import cx from 'classnames';
-import PropTypes from 'prop-types';
-import React, { forwardRef } from 'react';
-import { usePrefix } from '../../internal/usePrefix.js';
-import { deprecate } from '../../prop-types/deprecate.js';
-import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import { deprecate } from "../../prop-types/deprecate.js";
+import { useNormalizedInputProps } from "../../internal/useNormalizedInputProps.js";
+import classNames from "classnames";
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+import { jsx, jsxs } from "react/jsx-runtime";
 
-const frFn = forwardRef;
-const TimePicker = frFn((props, ref) => {
-  const {
-    children,
-    className,
-    inputClassName,
-    pickerClassName,
-    disabled = false,
-    hideLabel,
-    id,
-    invalidText = 'Invalid time format.',
-    invalid = false,
-    warningText = 'Warning message.',
-    warning = false,
-    labelText,
-    light = false,
-    maxLength = 5,
-    onChange = () => {},
-    onClick = () => {},
-    onBlur = () => {},
-    pattern = '(1[012]|[1-9]):[0-5][0-9](\\s)?',
-    placeholder = 'hh:mm',
-    readOnly,
-    size = 'md',
-    type = 'text',
-    value,
-    ...rest
-  } = props;
-  const prefix = usePrefix();
-  const [isValue, setValue] = React.useState(value);
-  const [prevValue, setPrevValue] = React.useState(value);
-  if (value !== prevValue) {
-    setValue(value);
-    setPrevValue(value);
-  }
-  function handleOnClick(evt) {
-    if (!disabled) {
-      if (!readOnly) {
-        setValue(isValue);
-      }
-      onClick(evt);
-    }
-  }
-  function handleOnChange(evt) {
-    if (!disabled && !readOnly) {
-      setValue(isValue);
-      onChange(evt);
-    }
-  }
-  function handleOnBlur(evt) {
-    if (!disabled) {
-      if (!readOnly) {
-        setValue(isValue);
-      }
-      onBlur(evt);
-    }
-  }
-  const normalizedProps = 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`]: normalizedProps.invalid || normalizedProps.warn
-  });
-  const timePickerClasses = cx({
-    [`${prefix}--time-picker`]: true,
-    [`${prefix}--time-picker--light`]: light,
-    [`${prefix}--time-picker--invalid`]: normalizedProps.invalid,
-    [`${prefix}--time-picker--warning`]: normalizedProps.warn,
-    [`${prefix}--time-picker--readonly`]: readOnly,
-    [`${prefix}--time-picker--${size}`]: size,
-    ...(pickerClassName && {
-      [pickerClassName]: true
-    })
-  });
-  const labelClasses = cx(`${prefix}--label`, {
-    [`${prefix}--visually-hidden`]: hideLabel,
-    [`${prefix}--label--disabled`]: disabled
-  });
-  const label = typeof labelText !== 'undefined' && labelText !== null && /*#__PURE__*/React.createElement("label", {
-    htmlFor: id,
-    className: labelClasses
-  }, labelText);
-  function getInternalPickerSelects() {
-    const readOnlyEventHandlers = {
-      onMouseDown: evt => {
-        // NOTE: does not prevent click
-        if (readOnly) {
-          evt.preventDefault();
-          // focus on the element as per readonly input behavior
-          evt.target.focus();
-        }
-      },
-      onKeyDown: evt => {
-        const selectAccessKeys = ['ArrowDown', 'ArrowUp', ' '];
-        // This prevents the select from opening for the above keys
-        if (readOnly && selectAccessKeys.includes(evt.key)) {
-          evt.preventDefault();
-        }
-      }
-    };
-    const mappedChildren = React.Children.map(children, pickerSelect => {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
-      const item = pickerSelect;
-      if (item) {
-        return /*#__PURE__*/React.cloneElement(item, {
-          ...item.props,
-          disabled: item.props.disabled ?? disabled,
-          readOnly: readOnly,
-          ...readOnlyEventHandlers
-        });
-      }
-    });
-    return mappedChildren;
-  }
-  const readOnlyProps = {
-    readOnly: readOnly
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: cx(`${prefix}--form-item`, className)
-  }, label, /*#__PURE__*/React.createElement("div", {
-    className: timePickerClasses
-  }, /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--time-picker__input`
-  }, /*#__PURE__*/React.createElement("input", _extends({
-    className: timePickerInputClasses,
-    "data-invalid": normalizedProps.invalid ? true : undefined,
-    disabled: normalizedProps.disabled,
-    id: id,
-    maxLength: maxLength,
-    onClick: handleOnClick,
-    onChange: handleOnChange,
-    onBlur: handleOnBlur,
-    placeholder: placeholder,
-    pattern: pattern,
-    ref: ref,
-    type: type,
-    value: value
-  }, rest, readOnlyProps)), (normalizedProps.invalid || normalizedProps.warn) && normalizedProps.icon && /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--time-picker__error__icon`
-  }, /*#__PURE__*/React.createElement(normalizedProps.icon, {
-    className: normalizedProps.invalid ? `${prefix}--checkbox__invalid-icon` : `${prefix}--text-input__invalid-icon--warning`,
-    size: 16
-  }))), getInternalPickerSelects()), normalizedProps.validation);
+//#region src/components/TimePicker/TimePicker.tsx
+/**
+* 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 TimePicker = forwardRef((props, ref) => {
+	const { children, className, inputClassName, pickerClassName, disabled = false, hideLabel, id, invalidText = "Invalid time format.", invalid = false, warningText = "Warning message.", warning = false, labelText, light = false, maxLength = 5, onChange = () => {}, onClick = () => {}, onBlur = () => {}, pattern = "(1[012]|[1-9]):[0-5][0-9](\\s)?", placeholder = "hh:mm", readOnly, size = "md", type = "text", value, ...rest } = props;
+	const prefix = usePrefix();
+	function handleOnClick(evt) {
+		if (!disabled) onClick(evt);
+	}
+	function handleOnChange(evt) {
+		if (!disabled && !readOnly) onChange(evt);
+	}
+	function handleOnBlur(evt) {
+		if (!disabled) onBlur(evt);
+	}
+	const normalizedProps = useNormalizedInputProps({
+		id,
+		readOnly,
+		disabled,
+		invalid,
+		invalidText,
+		warn: warning,
+		warnText: warningText
+	});
+	const timePickerInputClasses = classNames(`${prefix}--time-picker__input-field`, `${prefix}--text-input`, [inputClassName], {
+		[`${prefix}--text-input--light`]: light,
+		[`${prefix}--time-picker__input-field-error`]: normalizedProps.invalid || normalizedProps.warn
+	});
+	const timePickerClasses = classNames({
+		[`${prefix}--time-picker`]: true,
+		[`${prefix}--time-picker--light`]: light,
+		[`${prefix}--time-picker--invalid`]: normalizedProps.invalid,
+		[`${prefix}--time-picker--warning`]: normalizedProps.warn,
+		[`${prefix}--time-picker--readonly`]: readOnly,
+		[`${prefix}--time-picker--${size}`]: size,
+		...pickerClassName && { [pickerClassName]: true }
+	});
+	const labelClasses = classNames(`${prefix}--label`, {
+		[`${prefix}--visually-hidden`]: hideLabel,
+		[`${prefix}--label--disabled`]: disabled
+	});
+	const label = typeof labelText !== "undefined" && labelText !== null && /* @__PURE__ */ jsx("label", {
+		htmlFor: id,
+		className: labelClasses,
+		children: labelText
+	});
+	function getInternalPickerSelects() {
+		const readOnlyEventHandlers = {
+			onMouseDown: (evt) => {
+				if (readOnly) {
+					evt.preventDefault();
+					evt.target.focus();
+				}
+			},
+			onKeyDown: (evt) => {
+				if (readOnly && [
+					"ArrowDown",
+					"ArrowUp",
+					" "
+				].includes(evt.key)) evt.preventDefault();
+			}
+		};
+		return React.Children.map(children, (pickerSelect) => {
+			const item = pickerSelect;
+			if (item) return React.cloneElement(item, {
+				...item.props,
+				disabled: item.props.disabled ?? disabled,
+				readOnly,
+				...readOnlyEventHandlers
+			});
+		});
+	}
+	const readOnlyProps = { readOnly };
+	return /* @__PURE__ */ jsxs("div", {
+		className: classNames(`${prefix}--form-item`, className),
+		children: [
+			label,
+			/* @__PURE__ */ jsxs("div", {
+				className: timePickerClasses,
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: `${prefix}--time-picker__input`,
+					children: [/* @__PURE__ */ jsx("input", {
+						className: timePickerInputClasses,
+						"data-invalid": normalizedProps.invalid ? true : void 0,
+						disabled: normalizedProps.disabled,
+						id,
+						maxLength,
+						onClick: handleOnClick,
+						onChange: handleOnChange,
+						onBlur: handleOnBlur,
+						placeholder,
+						pattern,
+						ref,
+						type,
+						value,
+						...rest,
+						...readOnlyProps
+					}), (normalizedProps.invalid || normalizedProps.warn) && normalizedProps.icon && /* @__PURE__ */ jsx("div", {
+						className: `${prefix}--time-picker__error__icon`,
+						children: React.createElement(normalizedProps.icon, {
+							className: normalizedProps.invalid ? `${prefix}--checkbox__invalid-icon` : `${prefix}--text-input__invalid-icon--warning`,
+							size: 16
+						})
+					})]
+				}), getInternalPickerSelects()]
+			}),
+			normalizedProps.validation
+		]
+	});
 });
 TimePicker.propTypes = {
-  /**
-   * Pass in the children that will be rendered next to the form control
-   */
-  children: PropTypes.node,
-  /**
-   * Specify an optional className to be applied to the container node
-   */
-  className: PropTypes.string,
-  /**
-   * Specify whether the `<input>` should be disabled
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Specify whether you want the underlying label to be visually hidden
-   */
-  hideLabel: PropTypes.bool,
-  /**
-   * Specify a custom `id` for the `<input>`
-   */
-  id: PropTypes.string.isRequired,
-  /**
-   * 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,
-  /**
-   * Provide the text that will be read by a screen reader when visiting this
-   * control
-   */
-  labelText: PropTypes.node,
-  /**
-   * The `light` prop for `TimePicker` has been deprecated. It will be removed in v12. Use the `Layer` component instead.
-   */
-  light: deprecate(PropTypes.bool, 'The `light` prop for `TimePicker` is no longer needed and has been deprecated. It will be removed in the next major release. Use the `Layer` component instead.'),
-  /**
-   * Specify the maximum length of the time string in `<input>`
-   */
-  maxLength: PropTypes.number,
-  /**
-   * Optionally provide an `onBlur` handler that is called whenever the
-   * `<input>` loses focus
-   */
-  onBlur: PropTypes.func,
-  /**
-   * Optionally provide an `onChange` handler that is called whenever `<input>`
-   * is updated
-   */
-  onChange: PropTypes.func,
-  /**
-   * Optionally provide an `onClick` handler that is called whenever the
-   * `<input>` is clicked
-   */
-  onClick: PropTypes.func,
-  /**
-   * Specify the regular expression working as the pattern of the time string in `<input>`
-   */
-  pattern: PropTypes.string,
-  /**
-   * Specify the placeholder attribute for the `<input>`
-   */
-  placeholder: PropTypes.string,
-  /**
-   * Specify whether the TimePicker should be read-only
-   */
-  readOnly: PropTypes.bool,
-  /**
-   * Specify the size of the Time Picker.
-   */
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
-  /**
-   * Specify the type of the `<input>`
-   */
-  type: PropTypes.string,
-  /**
-   * Specify the value of the `<input>`
-   */
-  value: PropTypes.string,
-  /**
-   * Specify a warning message
-   */
-  warning: PropTypes.bool,
-  /**
-   * Provide the text that is displayed when the control is in an warning state
-   */
-  warningText: PropTypes.node
+	children: PropTypes.node,
+	className: PropTypes.string,
+	disabled: PropTypes.bool,
+	hideLabel: PropTypes.bool,
+	id: PropTypes.string.isRequired,
+	invalid: PropTypes.bool,
+	invalidText: PropTypes.node,
+	labelText: PropTypes.node,
+	light: deprecate(PropTypes.bool, "The `light` prop for `TimePicker` is no longer needed and has been deprecated. It will be removed in the next major release. Use the `Layer` component instead."),
+	maxLength: PropTypes.number,
+	onBlur: PropTypes.func,
+	onChange: PropTypes.func,
+	onClick: PropTypes.func,
+	pattern: PropTypes.string,
+	placeholder: PropTypes.string,
+	readOnly: PropTypes.bool,
+	size: PropTypes.oneOf([
+		"sm",
+		"md",
+		"lg"
+	]),
+	type: PropTypes.string,
+	value: PropTypes.string,
+	warning: PropTypes.bool,
+	warningText: PropTypes.node
 };
 
-export { TimePicker as default };
+//#endregion
+export { TimePicker as default };