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

package/es/components/TimePickerSelect/TimePickerSelect.js

@@ -1,69 +1,54 @@
 /**
- * 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 { ChevronDown } from '@carbon/icons-react';
-import cx from 'classnames';
-import PropTypes from 'prop-types';
-import React, { forwardRef } from 'react';
-import { usePrefix } from '../../internal/usePrefix.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import classNames from "classnames";
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "@carbon/icons-react";
 
-const frFn = forwardRef;
-const TimePickerSelect = frFn((props, ref) => {
-  const {
-    ['aria-label']: ariaLabel = 'open list of options',
-    children,
-    id,
-    disabled = false,
-    className,
-    ...rest
-  } = props;
-  const prefix = usePrefix();
-  const selectClasses = cx({
-    [`${prefix}--select`]: true,
-    [`${prefix}--time-picker__select`]: true,
-    ...(className && {
-      [className]: true
-    })
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    className: selectClasses
-  }, /*#__PURE__*/React.createElement("select", _extends({
-    "aria-label": ariaLabel,
-    className: `${prefix}--select-input`,
-    disabled: disabled,
-    id: id,
-    ref: ref
-  }, rest), children), /*#__PURE__*/React.createElement(ChevronDown, {
-    className: `${prefix}--select__arrow`,
-    "aria-hidden": "true"
-  }));
+//#region src/components/TimePickerSelect/TimePickerSelect.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 TimePickerSelect = forwardRef((props, ref) => {
+	const { ["aria-label"]: ariaLabel = "open list of options", children, id, disabled = false, className, ...rest } = props;
+	const prefix = usePrefix();
+	return /* @__PURE__ */ jsxs("div", {
+		className: classNames({
+			[`${prefix}--select`]: true,
+			[`${prefix}--time-picker__select`]: true,
+			...className && { [className]: true }
+		}),
+		children: [/* @__PURE__ */ jsx("select", {
+			"aria-label": ariaLabel,
+			className: `${prefix}--select-input`,
+			disabled,
+			id,
+			ref,
+			...rest,
+			children
+		}), /* @__PURE__ */ jsx(ChevronDown, {
+			className: `${prefix}--select__arrow`,
+			"aria-hidden": "true"
+		})]
+	});
 });
 TimePickerSelect.propTypes = {
-  /**
-   * Provide the contents of your TimePickerSelect
-   */
-  children: PropTypes.node,
-  /**
-   * Specify an optional className to be applied to the node containing the label and the select box
-   */
-  className: PropTypes.string,
-  /**
-   * Optionally provide the default value of the `<select>`
-   */
-  defaultValue: PropTypes.any,
-  /**
-   * Specify whether the control is disabled
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Specify a custom `id` for the `<select>`
-   */
-  id: PropTypes.string.isRequired
+	children: PropTypes.node,
+	className: PropTypes.string,
+	defaultValue: PropTypes.any,
+	disabled: PropTypes.bool,
+	id: PropTypes.string.isRequired
 };
 
-export { TimePickerSelect as default };
+//#endregion
+export { TimePickerSelect as default };

package/es/components/Toggle/Toggle.Skeleton.js

@@ -1,33 +1,35 @@
 /**
- * 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 from 'react';
-import cx from 'classnames';
-import { usePrefix } from '../../internal/usePrefix.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import classNames from "classnames";
+import React from "react";
+import PropTypes from "prop-types";
+import { jsx, jsxs } from "react/jsx-runtime";
 
-const ToggleSkeleton = ({
-  className,
-  ...rest
-}) => {
-  const prefix = usePrefix();
-  const skeletonClassNames = cx(`${prefix}--toggle ${prefix}--toggle--skeleton`, className);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: skeletonClassNames
-  }, rest), /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--toggle__skeleton-circle`
-  }), /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--toggle__skeleton-rectangle`
-  }));
+//#region src/components/Toggle/Toggle.Skeleton.tsx
+/**
+* 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.
+*/
+const ToggleSkeleton = ({ className, ...rest }) => {
+	const prefix = usePrefix();
+	return /* @__PURE__ */ jsxs("div", {
+		className: classNames(`${prefix}--toggle ${prefix}--toggle--skeleton`, className),
+		...rest,
+		children: [/* @__PURE__ */ jsx("div", { className: `${prefix}--toggle__skeleton-circle` }), /* @__PURE__ */ jsx("div", { className: `${prefix}--toggle__skeleton-rectangle` })]
+	});
 };
 ToggleSkeleton.propTypes = {
-  'aria-label': PropTypes.string,
-  className: PropTypes.string
+	"aria-label": PropTypes.string,
+	className: PropTypes.string
 };
 
-export { ToggleSkeleton };
+//#endregion
+export { ToggleSkeleton as default };

package/es/components/Toggle/Toggle.js

@@ -1,182 +1,113 @@
 /**
- * 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 React, { useRef } from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import { useControllableState } from '../../internal/useControllableState.js';
-import { usePrefix } from '../../internal/usePrefix.js';
-import { Text } from '../Text/Text.js';
-import '../Text/TextDirection.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import { Text } from "../Text/Text.js";
+import { useControllableState } from "../../internal/useControllableState.js";
+import classNames from "classnames";
+import React, { useRef } from "react";
+import PropTypes from "prop-types";
+import { jsx, jsxs } from "react/jsx-runtime";
 
-var _path;
-function Toggle({
-  'aria-labelledby': ariaLabelledby,
-  className,
-  defaultToggled = false,
-  disabled = false,
-  hideLabel = false,
-  id,
-  labelA = 'Off',
-  labelB = 'On',
-  labelText,
-  onClick,
-  onToggle,
-  readOnly,
-  size = 'md',
-  toggled,
-  ...other
-}) {
-  const prefix = usePrefix();
-  const buttonElement = useRef(null);
-  const [checked, setChecked] = useControllableState({
-    value: toggled,
-    onChange: onToggle,
-    defaultValue: defaultToggled
-  });
-  function handleClick(e) {
-    if (!readOnly) {
-      setChecked(!checked);
-    }
-    if (onClick) {
-      onClick(e);
-    }
-  }
-  const isSm = size === 'sm';
-  const sideLabel = hideLabel ? labelText : checked ? labelB : labelA;
-  const renderSideLabel = !(hideLabel && !labelText);
-  const LabelComponent = labelText ? 'label' : 'div';
-  const wrapperClasses = cx(`${prefix}--toggle`, {
-    [`${prefix}--toggle--disabled`]: disabled,
-    [`${prefix}--toggle--readonly`]: readOnly
-  }, className);
-  const labelTextClasses = cx(`${prefix}--toggle__label-text`, {
-    [`${prefix}--visually-hidden`]: hideLabel
-  });
-  const appearanceClasses = cx(`${prefix}--toggle__appearance`, {
-    [`${prefix}--toggle__appearance--sm`]: isSm
-  });
-  const switchClasses = cx(`${prefix}--toggle__switch`, {
-    [`${prefix}--toggle__switch--checked`]: checked
-  });
-  const labelId = `${id}_label`;
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-    React.createElement("div", {
-      className: wrapperClasses,
-      onClick: !labelText ? e => {
-        // the underlying <button> can only be activated by keyboard as it is visually hidden;
-        // therefore, if this event's target is the <button>, it had to be triggered by
-        // the keyboard event which already calls handleClick. if we wouldn't catch this, the
-        // onClick and onToggle functions would be called twice whenever the user activates the
-        // toggle by keyboard and props['aria-labelledby'] is passed.
-        if (buttonElement.current && e.target !== buttonElement.current && !disabled) {
-          handleClick(e);
-          buttonElement.current.focus();
-        }
-      } : undefined
-    }, /*#__PURE__*/React.createElement("button", _extends({}, other, {
-      ref: buttonElement,
-      id: id,
-      className: `${prefix}--toggle__button`,
-      role: "switch",
-      type: "button",
-      "aria-checked": checked,
-      "aria-labelledby": ariaLabelledby ?? (labelText ? labelId : undefined),
-      disabled: disabled,
-      onClick: handleClick
-    })), /*#__PURE__*/React.createElement(LabelComponent, {
-      id: labelId,
-      htmlFor: ariaLabelledby ? undefined : id,
-      className: `${prefix}--toggle__label`
-    }, labelText && /*#__PURE__*/React.createElement(Text, {
-      className: labelTextClasses
-    }, labelText), /*#__PURE__*/React.createElement("div", {
-      className: appearanceClasses
-    }, /*#__PURE__*/React.createElement("div", {
-      className: switchClasses
-    }, isSm && !readOnly && /*#__PURE__*/React.createElement("svg", {
-      "aria-hidden": "true",
-      focusable: "false",
-      className: `${prefix}--toggle__check`,
-      width: "6px",
-      height: "5px",
-      viewBox: "0 0 6 5"
-    }, _path || (_path = /*#__PURE__*/React.createElement("path", {
-      d: "M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"
-    })))), renderSideLabel && /*#__PURE__*/React.createElement(Text, {
-      className: `${prefix}--toggle__text`,
-      "aria-hidden": "true"
-    }, sideLabel))))
-  );
+//#region src/components/Toggle/Toggle.tsx
+/**
+* Copyright IBM Corp. 2021, 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.
+*/
+function Toggle({ "aria-labelledby": ariaLabelledby, className, defaultToggled = false, disabled = false, hideLabel = false, id, labelA = "Off", labelB = "On", labelText, onClick, onToggle, readOnly, size = "md", toggled, ...other }) {
+	const prefix = usePrefix();
+	const buttonElement = useRef(null);
+	const [checked, setChecked] = useControllableState({
+		value: toggled,
+		onChange: onToggle,
+		defaultValue: defaultToggled
+	});
+	function handleClick(e) {
+		if (!readOnly) setChecked(!checked);
+		if (onClick) onClick(e);
+	}
+	const isSm = size === "sm";
+	const sideLabel = hideLabel ? labelText : checked ? labelB : labelA;
+	const renderSideLabel = !(hideLabel && !labelText);
+	const LabelComponent = labelText ? "label" : "div";
+	const wrapperClasses = classNames(`${prefix}--toggle`, {
+		[`${prefix}--toggle--disabled`]: disabled,
+		[`${prefix}--toggle--readonly`]: readOnly
+	}, className);
+	const labelTextClasses = classNames(`${prefix}--toggle__label-text`, { [`${prefix}--visually-hidden`]: hideLabel });
+	const appearanceClasses = classNames(`${prefix}--toggle__appearance`, { [`${prefix}--toggle__appearance--sm`]: isSm });
+	const switchClasses = classNames(`${prefix}--toggle__switch`, { [`${prefix}--toggle__switch--checked`]: checked });
+	const labelId = `${id}_label`;
+	return /* @__PURE__ */ jsxs("div", {
+		className: wrapperClasses,
+		onClick: !labelText ? (e) => {
+			if (buttonElement.current && e.target !== buttonElement.current && !disabled) {
+				handleClick(e);
+				buttonElement.current.focus();
+			}
+		} : void 0,
+		children: [/* @__PURE__ */ jsx("button", {
+			...other,
+			ref: buttonElement,
+			id,
+			className: `${prefix}--toggle__button`,
+			role: "switch",
+			type: "button",
+			"aria-checked": checked,
+			"aria-labelledby": ariaLabelledby ?? (labelText ? labelId : void 0),
+			disabled,
+			onClick: handleClick
+		}), /* @__PURE__ */ jsxs(LabelComponent, {
+			id: labelId,
+			htmlFor: ariaLabelledby ? void 0 : id,
+			className: `${prefix}--toggle__label`,
+			children: [labelText && /* @__PURE__ */ jsx(Text, {
+				className: labelTextClasses,
+				children: labelText
+			}), /* @__PURE__ */ jsxs("div", {
+				className: appearanceClasses,
+				children: [/* @__PURE__ */ jsx("div", {
+					className: switchClasses,
+					children: isSm && !readOnly && /* @__PURE__ */ jsx("svg", {
+						"aria-hidden": "true",
+						focusable: "false",
+						className: `${prefix}--toggle__check`,
+						width: "6px",
+						height: "5px",
+						viewBox: "0 0 6 5",
+						children: /* @__PURE__ */ jsx("path", { d: "M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" })
+					})
+				}), renderSideLabel && /* @__PURE__ */ jsx(Text, {
+					className: `${prefix}--toggle__text`,
+					"aria-hidden": "true",
+					children: sideLabel
+				})]
+			})]
+		})]
+	});
 }
 Toggle.propTypes = {
-  /**
-   * Specify another element's id to be used as the label for this toggle
-   */
-  'aria-labelledby': PropTypes.string,
-  /**
-   * Specify a custom className to apply to the form-item node
-   */
-  className: PropTypes.string,
-  /**
-   * Specify whether the toggle should be on by default
-   */
-  defaultToggled: PropTypes.bool,
-  /**
-   * Whether this control should be disabled
-   */
-  disabled: PropTypes.bool,
-  /**
-   * If true, the side labels (props.labelA and props.labelB) will be replaced by
-   * props.labelText (if passed), so that the toggle doesn't render a top label.
-   */
-  hideLabel: PropTypes.bool,
-  /**
-   * Provide an id that unique represents the underlying `<button>`
-   */
-  id: PropTypes.string.isRequired,
-  /**
-   * Specify the label for the "off" position
-   */
-  labelA: PropTypes.node,
-  /**
-   * Specify the label for the "on" position
-   */
-  labelB: PropTypes.node,
-  /**
-   * Provide the text that will be read by a screen reader when visiting this
-   * control. This should be provided unless 'aria-labelledby' is set instead
-   * or you use an external <label> element with its "for" attribute set to the
-   * toggle's id.
-   */
-  labelText: PropTypes.string,
-  /**
-   * Provide an event listener that is called when the control is clicked
-   */
-  onClick: PropTypes.func,
-  /**
-   * Provide an event listener that is called when the control is toggled
-   */
-  onToggle: PropTypes.func,
-  /**
-   * Whether the toggle should be read-only
-   */
-  readOnly: PropTypes.bool,
-  /**
-   * Specify the size of the Toggle. Currently only supports 'sm' or 'md' (default)
-   */
-  size: PropTypes.oneOf(['sm', 'md']),
-  /**
-   * Specify whether the control is toggled
-   */
-  toggled: PropTypes.bool
+	"aria-labelledby": PropTypes.string,
+	className: PropTypes.string,
+	defaultToggled: PropTypes.bool,
+	disabled: PropTypes.bool,
+	hideLabel: PropTypes.bool,
+	id: PropTypes.string.isRequired,
+	labelA: PropTypes.node,
+	labelB: PropTypes.node,
+	labelText: PropTypes.string,
+	onClick: PropTypes.func,
+	onToggle: PropTypes.func,
+	readOnly: PropTypes.bool,
+	size: PropTypes.oneOf(["sm", "md"]),
+	toggled: PropTypes.bool
 };
 
-export { Toggle, Toggle as default };
+//#endregion
+export { Toggle as default };

package/es/components/ToggleSmall/ToggleSmall.Skeleton.js

@@ -1,62 +1,57 @@
 /**
- * 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, { useContext } from 'react';
-import cx from 'classnames';
-import { PrefixContext } from '../../internal/usePrefix.js';
+import { PrefixContext } from "../../internal/usePrefix.js";
+import classNames from "classnames";
+import React, { useContext } from "react";
+import PropTypes from "prop-types";
+import { jsx, jsxs } from "react/jsx-runtime";
 
-var _path;
-const ToggleSmallSkeleton = ({
-  id,
-  labelText,
-  className,
-  ...rest
-}) => {
-  const prefix = useContext(PrefixContext);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: cx(`${prefix}--form-item`, className)
-  }, rest), /*#__PURE__*/React.createElement("input", {
-    type: "checkbox",
-    id: id,
-    className: `${prefix}--toggle ${prefix}--toggle--small ${prefix}--skeleton`
-  }), /*#__PURE__*/React.createElement("label", {
-    className: `${prefix}--toggle__label ${prefix}--skeleton`,
-    htmlFor: id
-  }, labelText && /*#__PURE__*/React.createElement("span", {
-    className: `${prefix}--toggle__label-text`
-  }, labelText), /*#__PURE__*/React.createElement("span", {
-    className: `${prefix}--toggle__appearance`
-  }, /*#__PURE__*/React.createElement("svg", {
-    className: `${prefix}--toggle__check`,
-    width: "6px",
-    height: "5px",
-    viewBox: "0 0 6 5"
-  }, _path || (_path = /*#__PURE__*/React.createElement("path", {
-    d: "M2.2403 2.7299L4.9245 0 6 1.1117 2.2384 5 0 2.6863 1.0612 1.511z"
-  }))))));
+//#region src/components/ToggleSmall/ToggleSmall.Skeleton.tsx
+/**
+* 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.
+*/
+const ToggleSmallSkeleton = ({ id, labelText, className, ...rest }) => {
+	const prefix = useContext(PrefixContext);
+	return /* @__PURE__ */ jsxs("div", {
+		className: classNames(`${prefix}--form-item`, className),
+		...rest,
+		children: [/* @__PURE__ */ jsx("input", {
+			type: "checkbox",
+			id,
+			className: `${prefix}--toggle ${prefix}--toggle--small ${prefix}--skeleton`
+		}), /* @__PURE__ */ jsxs("label", {
+			className: `${prefix}--toggle__label ${prefix}--skeleton`,
+			htmlFor: id,
+			children: [labelText && /* @__PURE__ */ jsx("span", {
+				className: `${prefix}--toggle__label-text`,
+				children: labelText
+			}), /* @__PURE__ */ jsx("span", {
+				className: `${prefix}--toggle__appearance`,
+				children: /* @__PURE__ */ jsx("svg", {
+					className: `${prefix}--toggle__check`,
+					width: "6px",
+					height: "5px",
+					viewBox: "0 0 6 5",
+					children: /* @__PURE__ */ jsx("path", { d: "M2.2403 2.7299L4.9245 0 6 1.1117 2.2384 5 0 2.6863 1.0612 1.511z" })
+				})
+			})]
+		})]
+	});
 };
 ToggleSmallSkeleton.propTypes = {
-  ['aria-label']: PropTypes.string.isRequired,
-  /**
-   * Specify an optional className to add to the form item wrapper.
-   */
-  className: PropTypes.string,
-  /**
-   * Provide an id that unique represents the underlying `<input>`
-   */
-  id: PropTypes.string,
-  /**
-   * Provide the text that will be read by a screen reader when visiting this
-   * control. `aria-label` is always required but will be `null` if `labelText`
-   * is also provided.
-   */
-  labelText: PropTypes.string
+	["aria-label"]: PropTypes.string.isRequired,
+	className: PropTypes.string,
+	id: PropTypes.string,
+	labelText: PropTypes.string
 };
 
-export { ToggleSmallSkeleton };
+//#endregion
+export { ToggleSmallSkeleton };

package/es/components/Toggletip/index.d.ts

@@ -6,7 +6,7 @@
  */
 import PropTypes from 'prop-types';
 import React, { type ElementType, type ReactNode } from 'react';
-import { type PopoverAlignment, PopoverBaseProps } from '../Popover';
+import { type PopoverBaseProps } from '../Popover';
 import { PolymorphicProps } from '../../types/common';
 import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
 type ToggletipLabelProps<E extends ElementType> = {
@@ -52,7 +52,7 @@ export declare namespace Toggletip {
          * Specify if the toggletip should be open by default
          */
         defaultOpen: PropTypes.Requireable<boolean>;
-        align?: PopoverAlignment;
+        align?: import("../Popover").PopoverAlignment;
         alignmentAxisOffset?: number;
         backgroundToken?: "layer" | "background";
         autoAlign?: boolean;