@carbon/react 1.83.0 → 1.84.0

package/es/components/TextInput/TextInput.Skeleton.js

@@ -11,12 +11,11 @@ import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const TextInputSkeleton = _ref => {
-  let {
-    hideLabel,
-    className,
-    ...rest
-  } = _ref;
+const TextInputSkeleton = ({
+  hideLabel,
+  className,
+  ...rest
+}) => {
   const prefix = usePrefix();
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cx(`${prefix}--form-item`, className)

package/es/components/TextInput/TextInput.js

@@ -14,36 +14,35 @@ import { textInputProps } from './util.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { usePrefix } from '../../internal/usePrefix.js';
-import { useAnnouncer } from '../../internal/useAnnouncer.js';
+import { getAnnouncement } from '../../internal/getAnnouncement.js';
 import '../Text/index.js';
 import { Text } from '../Text/Text.js';
 
-const TextInput = /*#__PURE__*/React.forwardRef(function TextInput(_ref, ref) {
-  let {
-    className,
-    decorator,
-    disabled = false,
-    helperText,
-    hideLabel,
-    id,
-    inline = false,
-    invalid = false,
-    invalidText,
-    labelText,
-    light,
-    onChange = () => {},
-    onClick = () => {},
-    placeholder,
-    readOnly,
-    size,
-    type = 'text',
-    warn = false,
-    warnText,
-    enableCounter = false,
-    maxCount,
-    slug,
-    ...rest
-  } = _ref;
+const TextInput = /*#__PURE__*/React.forwardRef(function TextInput({
+  className,
+  decorator,
+  disabled = false,
+  helperText,
+  hideLabel,
+  id,
+  inline = false,
+  invalid = false,
+  invalidText,
+  labelText,
+  light,
+  onChange = () => {},
+  onClick = () => {},
+  placeholder,
+  readOnly,
+  size,
+  type = 'text',
+  warn = false,
+  warnText,
+  enableCounter = false,
+  maxCount,
+  slug,
+  ...rest
+}, ref) {
   const prefix = usePrefix();
   const {
     defaultValue,
@@ -154,7 +153,7 @@ const TextInput = /*#__PURE__*/React.forwardRef(function TextInput(_ref, ref) {
   } = useContext(FormContext);
   const announcerRef = useRef(null);
   const [prevAnnouncement, setPrevAnnouncement] = useState('');
-  const ariaAnnouncement = useAnnouncer(textCount, maxCount);
+  const ariaAnnouncement = getAnnouncement(textCount, maxCount);
   useEffect(() => {
     if (ariaAnnouncement && ariaAnnouncement !== prevAnnouncement) {
       const announcer = announcerRef.current;

package/es/components/TextInput/util.js

@@ -21,22 +21,19 @@ const helperProps = helperId => ({
  * @param {{sharedTextInputProps: object, invalid?: boolean, invalidId?: string, warn?: boolean, warnId?: string, hasHelper?: boolean, helperId?: string}} config
  * @returns {object}
  */
-const textInputProps = _ref => {
-  let {
-    sharedTextInputProps,
-    invalid,
-    invalidId,
-    warn,
-    warnId,
-    hasHelper,
-    helperId
-  } = _ref;
-  return {
-    ...sharedTextInputProps,
-    ...(invalid ? invalidProps(invalidId) : {}),
-    ...(warn ? warnProps(warnId) : {}),
-    ...(hasHelper ? helperProps(helperId) : {})
-  };
-};
+const textInputProps = ({
+  sharedTextInputProps,
+  invalid,
+  invalidId,
+  warn,
+  warnId,
+  hasHelper,
+  helperId
+}) => ({
+  ...sharedTextInputProps,
+  ...(invalid ? invalidProps(invalidId) : {}),
+  ...(warn ? warnProps(warnId) : {}),
+  ...(hasHelper ? helperProps(helperId) : {})
+});
 
 export { textInputProps };

package/es/components/Theme/index.js

@@ -16,11 +16,10 @@ import { useMatchMedia } from '../../internal/useMatchMedia.js';
 const ThemeContext = /*#__PURE__*/React.createContext({
   theme: 'white'
 });
-const GlobalTheme = /*#__PURE__*/React.forwardRef(function GlobalTheme(_ref, ref) {
-  let {
-    children,
-    theme
-  } = _ref;
+const GlobalTheme = /*#__PURE__*/React.forwardRef(function GlobalTheme({
+  children,
+  theme
+}, ref) {
   const value = useMemo(() => {
     return {
       theme
@@ -47,13 +46,12 @@ GlobalTheme.propTypes = {
 /**
  * Specify the theme to be applied to a page, or a region in a page
  */
-function Theme(_ref2) {
-  let {
-    as: BaseComponent = 'div',
-    className: customClassName,
-    theme,
-    ...rest
-  } = _ref2;
+function Theme({
+  as: BaseComponent = 'div',
+  className: customClassName,
+  theme,
+  ...rest
+}) {
   const prefix = usePrefix();
   const className = cx(customClassName, {
     [`${prefix}--white`]: theme === 'white',

package/es/components/Tile/Tile.js

@@ -25,16 +25,15 @@ import '../Text/index.js';
 import { Text } from '../Text/Text.js';
 
 var _CheckboxCheckedFille, _Checkbox, _ChevronDown, _ChevronDown2;
-const Tile = /*#__PURE__*/React.forwardRef(function Tile(_ref, ref) {
-  let {
-    children,
-    className,
-    decorator,
-    light = false,
-    slug,
-    hasRoundedCorners = false,
-    ...rest
-  } = _ref;
+const Tile = /*#__PURE__*/React.forwardRef(function Tile({
+  children,
+  className,
+  decorator,
+  light = false,
+  slug,
+  hasRoundedCorners = false,
+  ...rest
+}, ref) {
   const prefix = usePrefix();
   const tileClasses = cx(`${prefix}--tile`, {
     [`${prefix}--tile--light`]: light,
@@ -81,22 +80,21 @@ Tile.propTypes = {
    */
   slug: deprecate(PropTypes.node, 'The `slug` prop for `Tile` has ' + 'been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.')
 };
-const ClickableTile = /*#__PURE__*/React.forwardRef(function ClickableTile(_ref2, ref) {
-  let {
-    children,
-    className,
-    clicked = false,
-    decorator,
-    disabled,
-    href,
-    light,
-    onClick = () => {},
-    onKeyDown = () => {},
-    renderIcon: Icon,
-    hasRoundedCorners,
-    slug,
-    ...rest
-  } = _ref2;
+const ClickableTile = /*#__PURE__*/React.forwardRef(function ClickableTile({
+  children,
+  className,
+  clicked = false,
+  decorator,
+  disabled,
+  href,
+  light,
+  onClick = () => {},
+  onKeyDown = () => {},
+  renderIcon: Icon,
+  hasRoundedCorners,
+  slug,
+  ...rest
+}, ref) {
   const prefix = usePrefix();
   const classes = cx(`${prefix}--tile`, `${prefix}--tile--clickable`, {
     [`${prefix}--tile--is-clicked`]: clicked,
@@ -205,24 +203,23 @@ ClickableTile.propTypes = {
    */
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 };
-const SelectableTile = /*#__PURE__*/React.forwardRef(function SelectableTile(_ref3, ref) {
-  let {
-    children,
-    className,
-    decorator,
-    disabled,
-    id,
-    light,
-    onClick = () => {},
-    onChange = () => {},
-    onKeyDown = () => {},
-    selected = false,
-    tabIndex = 0,
-    title = 'title',
-    slug,
-    hasRoundedCorners,
-    ...rest
-  } = _ref3;
+const SelectableTile = /*#__PURE__*/React.forwardRef(function SelectableTile({
+  children,
+  className,
+  decorator,
+  disabled,
+  id,
+  light,
+  onClick = () => {},
+  onChange = () => {},
+  onKeyDown = () => {},
+  selected = false,
+  tabIndex = 0,
+  title = 'title',
+  slug,
+  hasRoundedCorners,
+  ...rest
+}, ref) {
   const prefix = usePrefix();
   const clickHandler = onClick;
   const keyDownHandler = onKeyDown;
@@ -372,28 +369,27 @@ SelectableTile.propTypes = {
    */
   value: deprecate(PropTypes.oneOfType([PropTypes.string, PropTypes.number]), 'The `value` property is no longer used.  It will be removed in the next major release.`')
 };
-const ExpandableTile = /*#__PURE__*/React.forwardRef(function ExpandableTile(_ref4, forwardRef) {
-  let {
-    tabIndex = 0,
-    className,
-    children,
-    decorator,
-    expanded = false,
-    tileMaxHeight = 0,
-    // eslint-disable-line
-    tilePadding = 0,
-    // eslint-disable-line
-    onClick,
-    onKeyUp,
-    tileCollapsedIconText = 'Interact to expand Tile',
-    tileExpandedIconText = 'Interact to collapse Tile',
-    tileCollapsedLabel,
-    tileExpandedLabel,
-    light,
-    slug,
-    hasRoundedCorners,
-    ...rest
-  } = _ref4;
+const ExpandableTile = /*#__PURE__*/React.forwardRef(function ExpandableTile({
+  tabIndex = 0,
+  className,
+  children,
+  decorator,
+  expanded = false,
+  tileMaxHeight = 0,
+  // eslint-disable-line
+  tilePadding = 0,
+  // eslint-disable-line
+  onClick,
+  onKeyUp,
+  tileCollapsedIconText = 'Interact to expand Tile',
+  tileExpandedIconText = 'Interact to collapse Tile',
+  tileCollapsedLabel,
+  tileExpandedLabel,
+  light,
+  slug,
+  hasRoundedCorners,
+  ...rest
+}, forwardRef) {
   const [isTileMaxHeight, setIsTileMaxHeight] = useState(tileMaxHeight);
   const [isTilePadding, setIsTilePadding] = useState(tilePadding);
   const [prevExpanded, setPrevExpanded] = useState(expanded);
@@ -619,10 +615,9 @@ ExpandableTile.propTypes = {
   tileExpandedLabel: PropTypes.string
 };
 ExpandableTile.displayName = 'ExpandableTile';
-const TileAboveTheFoldContent = /*#__PURE__*/React.forwardRef(function TilAboveTheFoldContent(_ref5, ref) {
-  let {
-    children
-  } = _ref5;
+const TileAboveTheFoldContent = /*#__PURE__*/React.forwardRef(function TilAboveTheFoldContent({
+  children
+}, ref) {
   const prefix = usePrefix();
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
@@ -636,10 +631,9 @@ TileAboveTheFoldContent.propTypes = {
   children: PropTypes.node
 };
 TileAboveTheFoldContent.displayName = 'TileAboveTheFoldContent';
-const TileBelowTheFoldContent = /*#__PURE__*/React.forwardRef(function TileBelowTheFoldContent(_ref6, ref) {
-  let {
-    children
-  } = _ref6;
+const TileBelowTheFoldContent = /*#__PURE__*/React.forwardRef(function TileBelowTheFoldContent({
+  children
+}, ref) {
   const prefix = usePrefix();
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,

package/es/components/TileGroup/TileGroup.d.ts

@@ -45,8 +45,9 @@ export interface TileGroupProps extends Omit<HTMLAttributes<HTMLFieldSetElement>
      */
     required?: boolean;
 }
-declare const TileGroup: {
-    (props: any): import("react/jsx-runtime").JSX.Element;
+export declare const TileGroup: {
+    ({ children, className, defaultSelected, disabled, legend, name, onChange, valueSelected, required, }: TileGroupProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
     propTypes: {
         /**
          * Provide a collection of <RadioTile> components to render in the group
@@ -86,6 +87,5 @@ declare const TileGroup: {
          */
         valueSelected: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
     };
-    displayName: string;
 };
-export default TileGroup;
+export {};

package/es/components/TileGroup/TileGroup.js

@@ -7,40 +7,42 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React, { useState } from 'react';
+import React, { useState, useEffect, Children, isValidElement, cloneElement } from 'react';
 import RadioTile from '../RadioTile/RadioTile.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { noopFn } from '../../internal/noopFn.js';
 
-const TileGroup = props => {
-  const {
-    children,
-    className,
-    defaultSelected,
-    disabled,
-    legend,
-    name,
-    onChange = noopFn,
-    valueSelected,
-    required
-  } = props;
+const TileGroup = ({
+  children,
+  className,
+  defaultSelected,
+  disabled,
+  legend,
+  name,
+  onChange = noopFn,
+  valueSelected,
+  required
+}) => {
   const prefix = usePrefix();
   const [selected, setSelected] = useState(valueSelected ?? defaultSelected);
-  const [prevValueSelected, setPrevValueSelected] = useState(valueSelected);
+  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;
 
-  /**
-   * prop + state alignment - getDerivedStateFromProps
-   * only update if selected prop changes
-   */
-  if (valueSelected !== prevValueSelected) {
-    setSelected(valueSelected);
-    setPrevValueSelected(valueSelected);
-  }
-  const getRadioTilesWithWrappers = children => {
-    const traverseAndModifyChildren = children => {
-      return React.Children.map(children, child => {
-        // If RadioTile found, return it with necessary props
-        if (child?.type === RadioTile) {
+        // If a `RadioTile` is found, return it with necessary props,
+        if (/*#__PURE__*/isValidElement(child) && child.type === RadioTile) {
           const {
             value,
             ...otherProps
@@ -53,38 +55,29 @@ const TileGroup = props => {
             onChange: handleChange,
             checked: value === selected
           }));
-        } else if (child?.props?.children) {
-          // If the child is not RadioTile and has children, recheck the children
-          return /*#__PURE__*/React.cloneElement(child, {
-            ...child.props,
-            children: traverseAndModifyChildren(child.props.children)
-          });
-        } else {
-          // If the child is neither a RadioTile nor has children, return it as is
-          return child;
         }
+
+        // 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(children));
-  };
-  const handleChange = (newSelection, value, evt) => {
-    if (newSelection !== selected) {
-      setSelected(newSelection);
-      onChange(newSelection, name, evt);
-    }
-  };
-  const renderLegend = legend => {
-    if (legend) {
-      return /*#__PURE__*/React.createElement("legend", {
-        className: `${prefix}--label`
-      }, legend);
-    }
+    return /*#__PURE__*/React.createElement(React.Fragment, null, traverseAndModifyChildren(elements));
   };
   return /*#__PURE__*/React.createElement("fieldset", {
     className: className ?? `${prefix}--tile-group`,
     disabled: disabled
-  }, renderLegend(legend), /*#__PURE__*/React.createElement("div", null, getRadioTilesWithWrappers(children)));
+  }, legend && /*#__PURE__*/React.createElement("legend", {
+    className: `${prefix}--label`
+  }, legend), /*#__PURE__*/React.createElement("div", null, getRadioTilesWithWrappers(children)));
 };
+TileGroup.displayName = 'TileGroup';
 TileGroup.propTypes = {
   /**
    * Provide a collection of <RadioTile> components to render in the group
@@ -124,6 +117,5 @@ TileGroup.propTypes = {
    */
   valueSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
-TileGroup.displayName = 'TileGroup';
 
-export { TileGroup as default };
+export { TileGroup };

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

@@ -1,9 +1,9 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * 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.
  */
-import TileGroup, { type TileGroupProps } from './TileGroup';
+import { TileGroup } from './TileGroup';
 export default TileGroup;
-export { TileGroup, type TileGroupProps };
+export * from './TileGroup';

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

@@ -11,11 +11,10 @@ import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const ToggleSkeleton = _ref => {
-  let {
-    className,
-    ...rest
-  } = _ref;
+const ToggleSkeleton = ({
+  className,
+  ...rest
+}) => {
   const prefix = usePrefix();
   const skeletonClassNames = cx(`${prefix}--toggle ${prefix}--toggle--skeleton`, className);
   return /*#__PURE__*/React.createElement("div", _extends({

package/es/components/Toggle/Toggle.js

@@ -15,24 +15,23 @@ import '../Text/index.js';
 import { Text } from '../Text/Text.js';
 
 var _path;
-function Toggle(_ref) {
-  let {
-    'aria-labelledby': ariaLabelledby,
-    className,
-    defaultToggled = false,
-    disabled = false,
-    hideLabel = false,
-    id,
-    labelA = 'Off',
-    labelB = 'On',
-    labelText,
-    onClick,
-    onToggle,
-    readOnly,
-    size = 'md',
-    toggled,
-    ...other
-  } = _ref;
+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({

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

@@ -12,13 +12,12 @@ import cx from 'classnames';
 import { PrefixContext } from '../../internal/usePrefix.js';
 
 var _path;
-const ToggleSmallSkeleton = _ref => {
-  let {
-    id,
-    labelText,
-    className,
-    ...rest
-  } = _ref;
+const ToggleSmallSkeleton = ({
+  id,
+  labelText,
+  className,
+  ...rest
+}) => {
   const prefix = useContext(PrefixContext);
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cx(`${prefix}--form-item`, className)