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

package/es/components/Accordion/Accordion.Skeleton.js

@@ -1,92 +1,68 @@
 /**
- * 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 { ChevronRight } from '@carbon/icons-react';
-import SkeletonText from '../SkeletonText/SkeletonText.js';
-import { usePrefix } from '../../internal/usePrefix.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import SkeletonText_default from "../SkeletonText/index.js";
+import classNames from "classnames";
+import React from "react";
+import PropTypes from "prop-types";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "@carbon/icons-react";
 
-var _SkeletonText, _SkeletonText2, _SkeletonText3;
-function AccordionSkeleton({
-  align = 'end',
-  className,
-  count = 4,
-  isFlush,
-  open = true,
-  ordered = false,
-  ...rest
-}) {
-  const prefix = usePrefix();
-  const classes = cx(`${prefix}--accordion`, `${prefix}--skeleton`, className, {
-    [`${prefix}--accordion--${align}`]: align,
-    [`${prefix}--accordion--flush`]: isFlush && align !== 'start'
-  });
-  const numSkeletonItems = open ? count - 1 : count;
-  const ListTag = ordered ? 'ol' : 'ul';
-  return /*#__PURE__*/React.createElement(ListTag, _extends({
-    className: classes
-  }, rest), open && /*#__PURE__*/React.createElement("li", {
-    className: `${prefix}--accordion__item ${prefix}--accordion__item--active`
-  }, /*#__PURE__*/React.createElement("span", {
-    className: `${prefix}--accordion__heading`
-  }, /*#__PURE__*/React.createElement(ChevronRight, {
-    className: `${prefix}--accordion__arrow`
-  }), /*#__PURE__*/React.createElement(SkeletonText, {
-    className: `${prefix}--accordion__title`
-  })), /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--accordion__content`
-  }, _SkeletonText || (_SkeletonText = /*#__PURE__*/React.createElement(SkeletonText, {
-    width: "90%"
-  })), _SkeletonText2 || (_SkeletonText2 = /*#__PURE__*/React.createElement(SkeletonText, {
-    width: "80%"
-  })), _SkeletonText3 || (_SkeletonText3 = /*#__PURE__*/React.createElement(SkeletonText, {
-    width: "95%"
-  })))), Array.from({
-    length: numSkeletonItems
-  }).map((_, i) => /*#__PURE__*/React.createElement(AccordionSkeletonItem, {
-    key: i
-  })));
+//#region src/components/Accordion/Accordion.Skeleton.tsx
+/**
+* Copyright IBM Corp. 2016, 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 AccordionSkeleton({ align = "end", className, count = 4, isFlush, open = true, ordered = false, ...rest }) {
+	const prefix = usePrefix();
+	const classes = classNames(`${prefix}--accordion`, `${prefix}--skeleton`, className, {
+		[`${prefix}--accordion--${align}`]: align,
+		[`${prefix}--accordion--flush`]: isFlush && align !== "start"
+	});
+	const numSkeletonItems = open ? count - 1 : count;
+	return /* @__PURE__ */ jsxs(ordered ? "ol" : "ul", {
+		className: classes,
+		...rest,
+		children: [open && /* @__PURE__ */ jsxs("li", {
+			className: `${prefix}--accordion__item ${prefix}--accordion__item--active`,
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: `${prefix}--accordion__heading`,
+				children: [/* @__PURE__ */ jsx(ChevronRight, { className: `${prefix}--accordion__arrow` }), /* @__PURE__ */ jsx(SkeletonText_default, { className: `${prefix}--accordion__title` })]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: `${prefix}--accordion__content`,
+				children: [
+					/* @__PURE__ */ jsx(SkeletonText_default, { width: "90%" }),
+					/* @__PURE__ */ jsx(SkeletonText_default, { width: "80%" }),
+					/* @__PURE__ */ jsx(SkeletonText_default, { width: "95%" })
+				]
+			})]
+		}), Array.from({ length: numSkeletonItems }).map((_, i) => /* @__PURE__ */ jsx(AccordionSkeletonItem, {}, i))]
+	});
 }
 AccordionSkeleton.propTypes = {
-  /**
-   * Specify the alignment of the accordion heading title and chevron.
-   */
-  align: PropTypes.oneOf(['start', 'end']),
-  /**
-   * Specify an optional className to add.
-   */
-  className: PropTypes.string,
-  /**
-   * Set number of items to render
-   */
-  count: PropTypes.number,
-  /**
-   * Specify whether an individual AccordionItem should be flush, default is false
-   */
-  isFlush: PropTypes.bool,
-  /**
-   * `false` to not display the first item opened
-   */
-  open: PropTypes.bool
+	align: PropTypes.oneOf(["start", "end"]),
+	className: PropTypes.string,
+	count: PropTypes.number,
+	isFlush: PropTypes.bool,
+	open: PropTypes.bool
 };
 function AccordionSkeletonItem() {
-  const prefix = usePrefix();
-  return /*#__PURE__*/React.createElement("li", {
-    className: `${prefix}--accordion__item`
-  }, /*#__PURE__*/React.createElement("span", {
-    className: `${prefix}--accordion__heading`
-  }, /*#__PURE__*/React.createElement(ChevronRight, {
-    className: `${prefix}--accordion__arrow`
-  }), /*#__PURE__*/React.createElement(SkeletonText, {
-    className: `${prefix}--accordion__title`
-  })));
+	const prefix = usePrefix();
+	return /* @__PURE__ */ jsx("li", {
+		className: `${prefix}--accordion__item`,
+		children: /* @__PURE__ */ jsxs("span", {
+			className: `${prefix}--accordion__heading`,
+			children: [/* @__PURE__ */ jsx(ChevronRight, { className: `${prefix}--accordion__arrow` }), /* @__PURE__ */ jsx(SkeletonText_default, { className: `${prefix}--accordion__title` })]
+		})
+	});
 }
 
-export { AccordionSkeleton, AccordionSkeleton as default };
+//#endregion
+export { AccordionSkeleton as default };

package/es/components/Accordion/Accordion.js

@@ -1,72 +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 cx from 'classnames';
-import { usePrefix } from '../../internal/usePrefix.js';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { AccordionProvider } from './AccordionProvider.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import { AccordionProvider } from "./AccordionProvider.js";
+import classNames from "classnames";
+import React from "react";
+import PropTypes from "prop-types";
+import { jsx } from "react/jsx-runtime";
 
-function Accordion({
-  align = 'end',
-  children,
-  className: customClassName,
-  disabled = false,
-  isFlush = false,
-  ordered = false,
-  size,
-  ...rest
-}) {
-  const prefix = usePrefix();
-  const className = cx(`${prefix}--accordion`, customClassName, {
-    [`${prefix}--accordion--${align}`]: align,
-    [`${prefix}--accordion--${size}`]: size,
-    // TODO: V12 - Remove this class
-    [`${prefix}--layout--size-${size}`]: size,
-    [`${prefix}--accordion--flush`]: isFlush && align !== 'start'
-  });
-  const ListTag = ordered ? 'ol' : 'ul';
-  return /*#__PURE__*/React.createElement(AccordionProvider, {
-    disabled: disabled
-  }, /*#__PURE__*/React.createElement(ListTag, _extends({
-    className: className
-  }, rest), children));
+//#region src/components/Accordion/Accordion.tsx
+/**
+* Copyright IBM Corp. 2016, 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 Accordion({ align = "end", children, className: customClassName, disabled = false, isFlush = false, ordered = false, size, ...rest }) {
+	const prefix = usePrefix();
+	const className = classNames(`${prefix}--accordion`, customClassName, {
+		[`${prefix}--accordion--${align}`]: align,
+		[`${prefix}--accordion--${size}`]: size,
+		[`${prefix}--layout--size-${size}`]: size,
+		[`${prefix}--accordion--flush`]: isFlush && align !== "start"
+	});
+	return /* @__PURE__ */ jsx(AccordionProvider, {
+		disabled,
+		children: /* @__PURE__ */ jsx(ordered ? "ol" : "ul", {
+			className,
+			...rest,
+			children
+		})
+	});
 }
 Accordion.propTypes = {
-  /**
-   * Specify the alignment of the accordion heading title and chevron.
-   */
-  align: PropTypes.oneOf(['start', 'end']),
-  /**
-   * Pass in the children that will be rendered within the Accordion
-   */
-  children: PropTypes.node,
-  /**
-   * Specify an optional className to be applied to the container node
-   */
-  className: PropTypes.string,
-  /**
-   * Specify whether an individual AccordionItem should be disabled
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Specify whether Accordion text should be flush, default is false, does not work with align="start"
-   */
-  isFlush: PropTypes.bool,
-  /**
-   * Specify if the Accordion should be an ordered list,
-   * default is `false`
-   */
-  ordered: PropTypes.bool,
-  /**
-   * Specify the size of the Accordion. Currently supports the following:
-   */
-  size: PropTypes.oneOf(['sm', 'md', 'lg'])
+	align: PropTypes.oneOf(["start", "end"]),
+	children: PropTypes.node,
+	className: PropTypes.string,
+	disabled: PropTypes.bool,
+	isFlush: PropTypes.bool,
+	ordered: PropTypes.bool,
+	size: PropTypes.oneOf([
+		"sm",
+		"md",
+		"lg"
+	])
 };
 
-export { Accordion as default };
+//#endregion
+export { Accordion as default };

package/es/components/Accordion/AccordionItem.js

@@ -1,167 +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 { ChevronRight } from '@carbon/icons-react';
-import cx from 'classnames';
-import PropTypes from 'prop-types';
-import React, { useState, useRef, useContext, useEffect } from 'react';
-import { Text } from '../Text/Text.js';
-import '../Text/TextDirection.js';
-import { Escape } from '../../internal/keyboard/keys.js';
-import { match } from '../../internal/keyboard/match.js';
-import { useId } from '../../internal/useId.js';
-import { deprecate } from '../../prop-types/deprecate.js';
-import { usePrefix } from '../../internal/usePrefix.js';
-import { AccordionContext } from './AccordionProvider.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import { AccordionContext } from "./AccordionProvider.js";
+import { Text } from "../Text/Text.js";
+import { Escape } from "../../internal/keyboard/keys.js";
+import { match } from "../../internal/keyboard/match.js";
+import { useId } from "../../internal/useId.js";
+import { deprecate } from "../../prop-types/deprecate.js";
+import classNames from "classnames";
+import React, { useContext, useEffect, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "@carbon/icons-react";
 
-const defaultRenderToggle = props => /*#__PURE__*/React.createElement("button", _extends({
-  type: "button"
-}, props));
-function AccordionItem({
-  children,
-  className: customClassName = '',
-  open = false,
-  onHeadingClick,
-  renderExpando = defaultRenderToggle,
-  // remove renderExpando in next major release
-  renderToggle,
-  title = 'title',
-  disabled: controlledDisabled,
-  handleAnimationEnd,
-  'aria-label': ariaLabel,
-  ...rest
-}) {
-  const [isOpen, setIsOpen] = useState(open);
-  const prevOpenRef = useRef(open);
-  const accordionState = useContext(AccordionContext);
-  const disabledIsControlled = typeof controlledDisabled === 'boolean';
-  const disabled = disabledIsControlled ? controlledDisabled : accordionState.disabled;
-  const id = useId('accordion-item');
-  const prefix = usePrefix();
-  const className = cx({
-    [`${prefix}--accordion__item`]: true,
-    [`${prefix}--accordion__item--active`]: isOpen && !disabled,
-    [`${prefix}--accordion__item--disabled`]: disabled,
-    [customClassName]: !!customClassName
-  });
-  const Toggle = renderToggle || renderExpando; // remove renderExpando in next major release
-
-  const content = React.useCallback(node => {
-    if (!node) {
-      return;
-    }
-    if (isOpen) {
-      // accordion closes
-      node.style.maxBlockSize = '';
-    }
-  }, [isOpen]);
-  useEffect(() => {
-    if (open !== prevOpenRef.current) {
-      setIsOpen(open);
-      prevOpenRef.current = open;
-    }
-  }, [open]);
-
-  // When the AccordionItem heading is clicked, toggle the open state of the
-  // panel
-  function onClick(event) {
-    const nextValue = !isOpen;
-    setIsOpen(nextValue);
-    if (onHeadingClick) {
-      // TODO: normalize signature, potentially:
-      // onHeadingClick :: (event: Event, state: { isOpen: Boolean }) => any
-      onHeadingClick({
-        isOpen: nextValue,
-        event
-      });
-    }
-  }
-
-  // If the AccordionItem is open, and the user hits the ESC key, then close it
-  function onKeyDown(event) {
-    if (isOpen && match(event, Escape)) {
-      setIsOpen(false);
-    }
-  }
-  function onAnimationEnd(event) {
-    if (handleAnimationEnd) {
-      handleAnimationEnd(event);
-    }
-  }
-  return /*#__PURE__*/React.createElement("li", _extends({
-    className: className
-  }, rest), /*#__PURE__*/React.createElement(Toggle, {
-    disabled: disabled,
-    "aria-controls": id,
-    "aria-expanded": isOpen,
-    "aria-label": ariaLabel,
-    className: `${prefix}--accordion__heading`,
-    onClick: onClick,
-    onKeyDown: onKeyDown,
-    type: "button"
-  }, /*#__PURE__*/React.createElement(ChevronRight, {
-    className: `${prefix}--accordion__arrow`
-  }), /*#__PURE__*/React.createElement(Text, {
-    as: "div",
-    className: `${prefix}--accordion__title`
-  }, title)), /*#__PURE__*/React.createElement("div", {
-    ref: content,
-    className: `${prefix}--accordion__wrapper`,
-    onTransitionEnd: onAnimationEnd
-  }, /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: `${prefix}--accordion__content`
-  }, children)));
+//#region src/components/Accordion/AccordionItem.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 defaultRenderToggle = (props) => /* @__PURE__ */ jsx("button", {
+	type: "button",
+	...props
+});
+function AccordionItem({ children, className: customClassName = "", open = false, onHeadingClick, renderExpando = defaultRenderToggle, renderToggle, title = "title", disabled: controlledDisabled, handleAnimationEnd, "aria-label": ariaLabel, ...rest }) {
+	const [isOpen, setIsOpen] = useState(open);
+	const prevOpenRef = useRef(open);
+	const accordionState = useContext(AccordionContext);
+	const disabled = typeof controlledDisabled === "boolean" ? controlledDisabled : accordionState.disabled;
+	const id = useId("accordion-item");
+	const prefix = usePrefix();
+	const className = classNames({
+		[`${prefix}--accordion__item`]: true,
+		[`${prefix}--accordion__item--active`]: isOpen && !disabled,
+		[`${prefix}--accordion__item--disabled`]: disabled,
+		[customClassName]: !!customClassName
+	});
+	const Toggle = renderToggle || renderExpando;
+	const content = React.useCallback((node) => {
+		if (!node) return;
+		if (isOpen) node.style.maxBlockSize = "";
+	}, [isOpen]);
+	useEffect(() => {
+		if (open !== prevOpenRef.current) {
+			setIsOpen(open);
+			prevOpenRef.current = open;
+		}
+	}, [open]);
+	function onClick(event) {
+		const nextValue = !isOpen;
+		setIsOpen(nextValue);
+		if (onHeadingClick) onHeadingClick({
+			isOpen: nextValue,
+			event
+		});
+	}
+	function onKeyDown(event) {
+		if (isOpen && match(event, Escape)) setIsOpen(false);
+	}
+	function onAnimationEnd(event) {
+		if (handleAnimationEnd) handleAnimationEnd(event);
+	}
+	return /* @__PURE__ */ jsxs("li", {
+		className,
+		...rest,
+		children: [/* @__PURE__ */ jsxs(Toggle, {
+			disabled,
+			"aria-controls": id,
+			"aria-expanded": isOpen,
+			"aria-label": ariaLabel,
+			className: `${prefix}--accordion__heading`,
+			onClick,
+			onKeyDown,
+			type: "button",
+			children: [/* @__PURE__ */ jsx(ChevronRight, { className: `${prefix}--accordion__arrow` }), /* @__PURE__ */ jsx(Text, {
+				as: "div",
+				className: `${prefix}--accordion__title`,
+				children: title
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			ref: content,
+			className: `${prefix}--accordion__wrapper`,
+			onTransitionEnd: onAnimationEnd,
+			children: /* @__PURE__ */ jsx("div", {
+				id,
+				className: `${prefix}--accordion__content`,
+				children
+			})
+		})]
+	});
 }
 AccordionItem.propTypes = {
-  /**
-   * Provide the contents of your AccordionItem
-   */
-  children: PropTypes.node,
-  /**
-   * Specify an optional className to be applied to the container node
-   */
-  className: PropTypes.string,
-  /**
-   * Specify whether an individual AccordionItem should be disabled
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Specify a custom label for the accordion button.
-   * This is important for accessibility when the accordion has no visible title.
-   */
-  'aria-label': PropTypes.string,
-  /**
-   * The handler of the massaged `click` event.
-   */
-  onClick: PropTypes.func,
-  /**
-   * The handler of the massaged `click` event on the heading.
-   */
-  onHeadingClick: PropTypes.func,
-  /**
-   * `true` to open the expand.
-   */
-  open: PropTypes.bool,
-  /**
-   * The callback function to render the expand button.
-   * Can be a React component class.
-   */
-  renderExpando: deprecate(PropTypes.func, 'The `renderExpando` prop has been deprecated and will be removed in the next major release of Carbon. Use the `renderToggle` prop instead.'),
-  /**
-   * The callback function to render the expand button.
-   * Can be a React component class.
-   */
-  renderToggle: PropTypes.func,
-  /**
-   * The accordion title.
-   */
-  title: PropTypes.node
+	children: PropTypes.node,
+	className: PropTypes.string,
+	disabled: PropTypes.bool,
+	"aria-label": PropTypes.string,
+	onClick: PropTypes.func,
+	onHeadingClick: PropTypes.func,
+	open: PropTypes.bool,
+	renderExpando: deprecate(PropTypes.func, "The `renderExpando` prop has been deprecated and will be removed in the next major release of Carbon. Use the `renderToggle` prop instead."),
+	renderToggle: PropTypes.func,
+	title: PropTypes.node
 };
 
-export { AccordionItem as default };
+//#endregion
+export { AccordionItem as default };

package/es/components/Accordion/AccordionProvider.js

@@ -1,24 +1,27 @@
 /**
- * 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 } from 'react';
+import React, { createContext } from "react";
+import { jsx } from "react/jsx-runtime";
 
-const AccordionContext = /*#__PURE__*/createContext({
-  disabled: false
-});
-const AccordionProvider = ({
-  disabled,
-  children
-}) => {
-  return /*#__PURE__*/React.createElement(AccordionContext.Provider, {
-    value: {
-      disabled
-    }
-  }, children);
+//#region src/components/Accordion/AccordionProvider.tsx
+/**
+* Copyright IBM Corp. 2016, 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.
+*/
+const AccordionContext = createContext({ disabled: false });
+const AccordionProvider = ({ disabled, children }) => {
+	return /* @__PURE__ */ jsx(AccordionContext.Provider, {
+		value: { disabled },
+		children
+	});
 };
 
-export { AccordionContext, AccordionProvider };
+//#endregion
+export { AccordionContext, AccordionProvider };