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

package/es/components/ComposedModal/ComposedModalPresence.js

@@ -1,55 +1,60 @@
 /**
- * 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, { createContext, useContext, useMemo } from 'react';
-import { usePresenceContext } from '../../internal/usePresenceContext.js';
-import { useComposedModalState } from './useComposedModalState.js';
+import { usePresenceContext } from "../../internal/usePresenceContext.js";
+import { useComposedModalState } from "./useComposedModalState.js";
+import React, { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
 
-const ComposedModalPresence = ({
-  open,
-  _presenceId: presenceId,
-  _autoEnablePresence: autoEnablePresence = true,
-  children
-}) => {
-  // Since the modal could be used without an onClose callback, we need to be aware of the internal isOpen state
-  const modalState = useComposedModalState(open);
-  const [isOpen] = modalState;
-  const [isPresent, context] = usePresenceContext(isOpen, presenceId);
-  const presenceContextValue = useMemo(() => ({
-    modalState,
-    autoEnablePresence,
-    ...context
-  }), [modalState, autoEnablePresence, context]);
-  if (!isPresent) return null;
-  return /*#__PURE__*/React.createElement(ComposedModalPresenceContext, {
-    value: presenceContextValue
-  }, children);
+//#region src/components/ComposedModal/ComposedModalPresence.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 ComposedModalPresence = ({ open, _presenceId: presenceId, _autoEnablePresence: autoEnablePresence = true, children }) => {
+	const modalState = useComposedModalState(open);
+	const [isOpen] = modalState;
+	const [isPresent, context] = usePresenceContext(isOpen, presenceId);
+	const presenceContextValue = useMemo(() => ({
+		modalState,
+		autoEnablePresence,
+		...context
+	}), [
+		modalState,
+		autoEnablePresence,
+		context
+	]);
+	if (!isPresent) return null;
+	return /* @__PURE__ */ jsx(ComposedModalPresenceContext, {
+		value: presenceContextValue,
+		children
+	});
 };
-const ComposedModalPresenceContext = /*#__PURE__*/createContext(undefined);
-
+const ComposedModalPresenceContext = createContext(void 0);
 /**
- * Handles occurrences where only a single composed modal must consume a context.
- */
-const useExclusiveComposedModalPresenceContext = id => {
-  const ctx = useContext(ComposedModalPresenceContext);
-  return ctx?.isPresenceExclusive(id) ? ctx : undefined;
+* Handles occurrences where only a single composed modal must consume a context.
+*/
+const useExclusiveComposedModalPresenceContext = (id) => {
+	const ctx = useContext(ComposedModalPresenceContext);
+	return ctx?.isPresenceExclusive(id) ? ctx : void 0;
 };
 /**
- * Higher-order function that wraps a component with ComposedModalPresence
- */
-const withComposedModalPresence = Component => {
-  const WithComposedModalPresence = ({
-    open,
-    ...componentProps
-  }) => /*#__PURE__*/React.createElement(ComposedModalPresence, {
-    open: open
-  }, /*#__PURE__*/React.createElement(Component, componentProps));
-  WithComposedModalPresence.displayName = `withComposedModalPresence(${Component.displayName || Component.name || 'Component'})`;
-  return WithComposedModalPresence;
+* Higher-order function that wraps a component with ComposedModalPresence
+*/
+const withComposedModalPresence = (Component) => {
+	const WithComposedModalPresence = ({ open, ...componentProps }) => /* @__PURE__ */ jsx(ComposedModalPresence, {
+		open,
+		children: /* @__PURE__ */ jsx(Component, { ...componentProps })
+	});
+	WithComposedModalPresence.displayName = `withComposedModalPresence(${Component.displayName || Component.name || "Component"})`;
+	return WithComposedModalPresence;
 };
 
-export { ComposedModalPresence, ComposedModalPresenceContext, useExclusiveComposedModalPresenceContext, withComposedModalPresence };
+//#endregion
+export { ComposedModalPresence, ComposedModalPresenceContext, useExclusiveComposedModalPresenceContext, withComposedModalPresence };

package/es/components/ComposedModal/ModalFooter.js

@@ -1,221 +1,141 @@
 /**
- * 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 from 'react';
-import PropTypes from 'prop-types';
-import Button from '../Button/Button.js';
-import '../Button/Button.Skeleton.js';
-import ButtonSet from '../ButtonSet/ButtonSet.js';
-import cx from 'classnames';
-import { usePrefix } from '../../internal/usePrefix.js';
-import { noopFn } from '../../internal/noopFn.js';
-import InlineLoading from '../InlineLoading/InlineLoading.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import { noopFn } from "../../internal/noopFn.js";
+import Button_default from "../Button/index.js";
+import ButtonSet_default from "../ButtonSet/index.js";
+import InlineLoading_default from "../InlineLoading/index.js";
+import classNames from "classnames";
+import React from "react";
+import PropTypes from "prop-types";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
-function SecondaryButtonSet({
-  secondaryButtons,
-  secondaryButtonText,
-  secondaryClassName,
-  closeModal,
-  onRequestClose,
-  disabled
-}) {
-  function handleRequestClose(evt) {
-    closeModal(evt);
-    onRequestClose(evt);
-  }
-  if (Array.isArray(secondaryButtons) && secondaryButtons.length <= 2) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, secondaryButtons.map(({
-      buttonText,
-      onClick: onButtonClick
-    }, i) => /*#__PURE__*/React.createElement(Button, {
-      key: `${buttonText}-${i}`,
-      className: secondaryClassName,
-      kind: "secondary",
-      onClick: onButtonClick || handleRequestClose
-    }, buttonText)));
-  }
-  if (secondaryButtonText) {
-    return /*#__PURE__*/React.createElement(Button, {
-      disabled: disabled,
-      className: secondaryClassName,
-      onClick: handleRequestClose,
-      kind: "secondary"
-    }, secondaryButtonText);
-  }
-  return null;
+//#region src/components/ComposedModal/ModalFooter.tsx
+/**
+* Copyright IBM Corp. 2023, 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.
+*/
+function SecondaryButtonSet({ secondaryButtons, secondaryButtonText, secondaryClassName, closeModal, onRequestClose, disabled }) {
+	function handleRequestClose(evt) {
+		closeModal(evt);
+		onRequestClose(evt);
+	}
+	if (Array.isArray(secondaryButtons) && secondaryButtons.length <= 2) return /* @__PURE__ */ jsx(Fragment, { children: secondaryButtons.map(({ buttonText, onClick: onButtonClick }, i) => /* @__PURE__ */ jsx(Button_default, {
+		className: secondaryClassName,
+		kind: "secondary",
+		onClick: onButtonClick || handleRequestClose,
+		children: buttonText
+	}, `${buttonText}-${i}`)) });
+	if (secondaryButtonText) return /* @__PURE__ */ jsx(Button_default, {
+		disabled,
+		className: secondaryClassName,
+		onClick: handleRequestClose,
+		kind: "secondary",
+		children: secondaryButtonText
+	});
+	return null;
 }
 SecondaryButtonSet.propTypes = {
-  closeModal: PropTypes.func,
-  disabled: PropTypes.bool,
-  onRequestClose: PropTypes.func,
-  secondaryButtonText: PropTypes.string,
-  secondaryButtons: (props, propName, componentName) => {
-    if (props.secondaryButtons) {
-      if (!Array.isArray(props.secondaryButtons) || props.secondaryButtons.length !== 2) {
-        return new Error(`${propName} needs to be an array of two button config objects`);
-      }
-      const shape = {
-        buttonText: PropTypes.node,
-        onClick: PropTypes.func
-      };
-      props[propName].forEach(secondaryButton => {
-        PropTypes.checkPropTypes(shape, secondaryButton, propName, componentName);
-      });
-    }
-    return null;
-  },
-  secondaryClassName: PropTypes.string
+	closeModal: PropTypes.func,
+	disabled: PropTypes.bool,
+	onRequestClose: PropTypes.func,
+	secondaryButtonText: PropTypes.string,
+	secondaryButtons: (props, propName, componentName) => {
+		if (props.secondaryButtons) {
+			if (!Array.isArray(props.secondaryButtons) || props.secondaryButtons.length !== 2) return /* @__PURE__ */ new Error(`${propName} needs to be an array of two button config objects`);
+			const shape = {
+				buttonText: PropTypes.node,
+				onClick: PropTypes.func
+			};
+			props[propName].forEach((secondaryButton) => {
+				PropTypes.checkPropTypes(shape, secondaryButton, propName, componentName);
+			});
+		}
+		return null;
+	},
+	secondaryClassName: PropTypes.string
 };
-const ModalFooter = /*#__PURE__*/React.forwardRef(function ModalFooter({
-  children,
-  className: customClassName,
-  closeModal = noopFn,
-  danger,
-  inputref,
-  onRequestClose = noopFn,
-  onRequestSubmit = noopFn,
-  primaryButtonDisabled,
-  primaryButtonText,
-  primaryClassName,
-  secondaryButtonText,
-  secondaryButtons,
-  secondaryClassName,
-  loadingStatus = 'inactive',
-  loadingDescription,
-  loadingIconDescription,
-  onLoadingSuccess = noopFn,
-  ...rest
-}, ref) {
-  const prefix = usePrefix();
-  const footerClass = cx(`${prefix}--modal-footer`, customClassName, Array.isArray(secondaryButtons) && secondaryButtons.length === 2 ? `${prefix}--modal-footer--three-button` : null);
-  const primaryButtonClass = cx(primaryClassName, loadingStatus !== 'inactive' ? `${prefix}--btn--loading` : null);
-  const loadingActive = loadingStatus !== 'inactive';
-  const secondaryButtonProps = {
-    closeModal,
-    secondaryButtons,
-    secondaryButtonText,
-    secondaryClassName,
-    onRequestClose,
-    disabled: loadingActive
-  };
-  return /*#__PURE__*/React.createElement(ButtonSet, _extends({
-    className: footerClass
-  }, rest, {
-    // @ts-expect-error: Invalid derived types, will be fine once explicit types are added
-    ref: ref,
-    "aria-busy": loadingActive
-  }), /*#__PURE__*/React.createElement(SecondaryButtonSet, secondaryButtonProps), primaryButtonText && /*#__PURE__*/React.createElement(Button, {
-    onClick: onRequestSubmit,
-    className: primaryButtonClass,
-    disabled: loadingActive || primaryButtonDisabled,
-    kind: danger ? 'danger' : 'primary',
-    ref: inputref
-  }, loadingStatus === 'inactive' ? primaryButtonText : /*#__PURE__*/React.createElement(InlineLoading, {
-    status: loadingStatus,
-    description: loadingDescription,
-    iconDescription: loadingIconDescription,
-    className: `${prefix}--inline-loading--btn`,
-    onSuccess: onLoadingSuccess
-  })), children);
+const ModalFooter = React.forwardRef(function ModalFooter({ children, className: customClassName, closeModal = noopFn, danger, inputref, onRequestClose = noopFn, onRequestSubmit = noopFn, primaryButtonDisabled, primaryButtonText, primaryClassName, secondaryButtonText, secondaryButtons, secondaryClassName, loadingStatus = "inactive", loadingDescription, loadingIconDescription, onLoadingSuccess = noopFn, ...rest }, ref) {
+	const prefix = usePrefix();
+	const footerClass = classNames(`${prefix}--modal-footer`, customClassName, Array.isArray(secondaryButtons) && secondaryButtons.length === 2 ? `${prefix}--modal-footer--three-button` : null);
+	const primaryButtonClass = classNames(primaryClassName, loadingStatus !== "inactive" ? `${prefix}--btn--loading` : null);
+	const loadingActive = loadingStatus !== "inactive";
+	const secondaryButtonProps = {
+		closeModal,
+		secondaryButtons,
+		secondaryButtonText,
+		secondaryClassName,
+		onRequestClose,
+		disabled: loadingActive
+	};
+	return /* @__PURE__ */ jsxs(ButtonSet_default, {
+		className: footerClass,
+		...rest,
+		ref,
+		"aria-busy": loadingActive,
+		children: [
+			/* @__PURE__ */ jsx(SecondaryButtonSet, { ...secondaryButtonProps }),
+			primaryButtonText && /* @__PURE__ */ jsx(Button_default, {
+				onClick: onRequestSubmit,
+				className: primaryButtonClass,
+				disabled: loadingActive || primaryButtonDisabled,
+				kind: danger ? "danger" : "primary",
+				ref: inputref,
+				children: loadingStatus === "inactive" ? primaryButtonText : /* @__PURE__ */ jsx(InlineLoading_default, {
+					status: loadingStatus,
+					description: loadingDescription,
+					iconDescription: loadingIconDescription,
+					className: `${prefix}--inline-loading--btn`,
+					onSuccess: onLoadingSuccess
+				})
+			}),
+			children
+		]
+	});
 });
 ModalFooter.propTypes = {
-  /**
-   * Pass in content that will be rendered in the Modal Footer
-   */
-  children: PropTypes.node,
-  /**
-   * Specify a custom className to be applied to the Modal Footer container
-   */
-  className: PropTypes.string,
-  /**
-   * Specify an optional function that is called whenever the modal is closed
-   */
-  closeModal: PropTypes.func,
-  /**
-   * Specify whether the primary button should be replaced with danger button.
-   * Note that this prop is not applied if you render primary/danger button by yourself
-   */
-  danger: PropTypes.bool,
-  /**
-   * The `ref` callback for the primary button.
-   */
-  inputref: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.any
-  })]),
-  /**
-   * Specify the description for the loading text
-   */
-  loadingDescription: PropTypes.string,
-  /**
-   * Specify the description for the loading text
-   */
-  loadingIconDescription: PropTypes.string,
-  /**
-   * loading status
-   */
-  loadingStatus: PropTypes.oneOf(['inactive', 'active', 'finished', 'error']),
-  /**
-   * Provide an optional handler to be invoked when loading is
-   * successful
-   */
-  onLoadingSuccess: PropTypes.func,
-  /**
-   * Specify an optional function for when the modal is requesting to be
-   * closed
-   */
-  onRequestClose: PropTypes.func,
-  /**
-   * Specify an optional function for when the modal is requesting to be
-   * submitted
-   */
-  onRequestSubmit: PropTypes.func,
-  /**
-   * Specify whether the primary button should be disabled
-   */
-  primaryButtonDisabled: PropTypes.bool,
-  /**
-   * Specify the text for the primary button
-   */
-  primaryButtonText: PropTypes.string,
-  /**
-   * Specify a custom className to be applied to the primary button
-   */
-  primaryClassName: PropTypes.string,
-  /**
-   * Specify the text for the secondary button
-   */
-  secondaryButtonText: PropTypes.string,
-  /**
-   * Specify an array of config objects for secondary buttons
-   * (`Array<{
-   *   buttonText: string,
-   *   onClick: function,
-   * }>`).
-   */
-  secondaryButtons: (props, propName, componentName) => {
-    if (props.secondaryButtons) {
-      if (!Array.isArray(props.secondaryButtons) || props.secondaryButtons.length !== 2) {
-        return new Error(`${propName} needs to be an array of two button config objects`);
-      }
-      const shape = {
-        buttonText: PropTypes.node,
-        onClick: PropTypes.func
-      };
-      props[propName].forEach(secondaryButton => {
-        PropTypes.checkPropTypes(shape, secondaryButton, propName, componentName);
-      });
-    }
-    return null;
-  },
-  /**
-   * Specify a custom className to be applied to the secondary button
-   */
-  secondaryClassName: PropTypes.string
+	children: PropTypes.node,
+	className: PropTypes.string,
+	closeModal: PropTypes.func,
+	danger: PropTypes.bool,
+	inputref: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),
+	loadingDescription: PropTypes.string,
+	loadingIconDescription: PropTypes.string,
+	loadingStatus: PropTypes.oneOf([
+		"inactive",
+		"active",
+		"finished",
+		"error"
+	]),
+	onLoadingSuccess: PropTypes.func,
+	onRequestClose: PropTypes.func,
+	onRequestSubmit: PropTypes.func,
+	primaryButtonDisabled: PropTypes.bool,
+	primaryButtonText: PropTypes.string,
+	primaryClassName: PropTypes.string,
+	secondaryButtonText: PropTypes.string,
+	secondaryButtons: (props, propName, componentName) => {
+		if (props.secondaryButtons) {
+			if (!Array.isArray(props.secondaryButtons) || props.secondaryButtons.length !== 2) return /* @__PURE__ */ new Error(`${propName} needs to be an array of two button config objects`);
+			const shape = {
+				buttonText: PropTypes.node,
+				onClick: PropTypes.func
+			};
+			props[propName].forEach((secondaryButton) => {
+				PropTypes.checkPropTypes(shape, secondaryButton, propName, componentName);
+			});
+		}
+		return null;
+	},
+	secondaryClassName: PropTypes.string
 };
 
-export { ModalFooter };
+//#endregion
+export { ModalFooter };

package/es/components/ComposedModal/ModalHeader.js

@@ -1,112 +1,82 @@
 /**
- * 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 from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import { Close } from '@carbon/icons-react';
-import { usePrefix } from '../../internal/usePrefix.js';
-import { IconButton } from '../IconButton/index.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import { IconButton } from "../IconButton/index.js";
+import classNames from "classnames";
+import React from "react";
+import PropTypes from "prop-types";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Close } from "@carbon/icons-react";
 
-const ModalHeader = /*#__PURE__*/React.forwardRef(function ModalHeader({
-  buttonOnClick,
-  children,
-  className: customClassName,
-  closeClassName,
-  closeIconClassName,
-  closeModal,
-  iconDescription = 'Close',
-  label,
-  labelClassName,
-  title,
-  titleClassName,
-  ...rest
-}, ref) {
-  const prefix = usePrefix();
-  function handleCloseButtonClick(evt) {
-    closeModal?.(evt);
-    buttonOnClick?.(evt);
-  }
-  const headerClass = cx(`${prefix}--modal-header`, customClassName);
-  const labelClass = cx(`${prefix}--modal-header__label ${prefix}--type-delta`, labelClassName);
-  const titleClass = cx(`${prefix}--modal-header__heading ${prefix}--type-beta`, titleClassName);
-  const closeClass = cx(`${prefix}--modal-close`, closeClassName);
-  const closeIconClass = cx(`${prefix}--modal-close__icon`, closeIconClassName);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: headerClass
-  }, rest, {
-    ref: ref
-  }), label && /*#__PURE__*/React.createElement("h2", {
-    className: labelClass
-  }, label), title && /*#__PURE__*/React.createElement("h2", {
-    className: titleClass
-  }, title), children, /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--modal-close-button`
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    className: closeClass,
-    label: iconDescription,
-    onClick: handleCloseButtonClick,
-    "aria-label": iconDescription,
-    align: "left"
-  }, /*#__PURE__*/React.createElement(Close, {
-    size: 20,
-    "aria-hidden": "true",
-    tabIndex: "-1",
-    className: closeIconClass
-  }))));
+//#region src/components/ComposedModal/ModalHeader.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 ModalHeader = React.forwardRef(function ModalHeader({ buttonOnClick, children, className: customClassName, closeClassName, closeIconClassName, closeModal, iconDescription = "Close", label, labelClassName, title, titleClassName, ...rest }, ref) {
+	const prefix = usePrefix();
+	function handleCloseButtonClick(evt) {
+		closeModal?.(evt);
+		buttonOnClick?.(evt);
+	}
+	const headerClass = classNames(`${prefix}--modal-header`, customClassName);
+	const labelClass = classNames(`${prefix}--modal-header__label ${prefix}--type-delta`, labelClassName);
+	const titleClass = classNames(`${prefix}--modal-header__heading ${prefix}--type-beta`, titleClassName);
+	const closeClass = classNames(`${prefix}--modal-close`, closeClassName);
+	const closeIconClass = classNames(`${prefix}--modal-close__icon`, closeIconClassName);
+	return /* @__PURE__ */ jsxs("div", {
+		className: headerClass,
+		...rest,
+		ref,
+		children: [
+			label && /* @__PURE__ */ jsx("h2", {
+				className: labelClass,
+				children: label
+			}),
+			title && /* @__PURE__ */ jsx("h2", {
+				className: titleClass,
+				children: title
+			}),
+			children,
+			/* @__PURE__ */ jsx("div", {
+				className: `${prefix}--modal-close-button`,
+				children: /* @__PURE__ */ jsx(IconButton, {
+					className: closeClass,
+					label: iconDescription,
+					onClick: handleCloseButtonClick,
+					"aria-label": iconDescription,
+					align: "left",
+					children: /* @__PURE__ */ jsx(Close, {
+						size: 20,
+						"aria-hidden": "true",
+						tabIndex: "-1",
+						className: closeIconClass
+					})
+				})
+			})
+		]
+	});
 });
 ModalHeader.propTypes = {
-  /**
-   * Provide an optional function to be called when the close button is
-   * clicked
-   */
-  buttonOnClick: PropTypes.func,
-  /**
-   * Specify the content to be placed in the ModalHeader
-   */
-  children: PropTypes.node,
-  /**
-   * Specify an optional className to be applied to the modal header
-   */
-  className: PropTypes.string,
-  /**
-   * Specify an optional className to be applied to the modal close node
-   */
-  closeClassName: PropTypes.string,
-  /**
-   * Specify an optional className to be applied to the modal close icon node
-   */
-  closeIconClassName: PropTypes.string,
-  /**
-   * Provide an optional function to be called when the modal is closed
-   */
-  closeModal: PropTypes.func,
-  /**
-   * Specify a description for the close icon that can be read by screen
-   * readers
-   */
-  iconDescription: PropTypes.string,
-  /**
-   * Specify an optional label to be displayed
-   */
-  label: PropTypes.string,
-  /**
-   * Specify an optional className to be applied to the modal header label
-   */
-  labelClassName: PropTypes.string,
-  /**
-   * Specify an optional title to be displayed
-   */
-  title: PropTypes.node,
-  /**
-   * Specify an optional className to be applied to the modal heading
-   */
-  titleClassName: PropTypes.string
+	buttonOnClick: PropTypes.func,
+	children: PropTypes.node,
+	className: PropTypes.string,
+	closeClassName: PropTypes.string,
+	closeIconClassName: PropTypes.string,
+	closeModal: PropTypes.func,
+	iconDescription: PropTypes.string,
+	label: PropTypes.string,
+	labelClassName: PropTypes.string,
+	title: PropTypes.node,
+	titleClassName: PropTypes.string
 };
 
-export { ModalHeader };
+//#endregion
+export { ModalHeader };