@carbon/react 1.83.0 → 1.84.0

package/lib/components/TextInput/PasswordInput.js

@@ -29,33 +29,32 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-const PasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function PasswordInput(_ref, ref) {
-  let {
-    className,
-    disabled = false,
-    helperText,
-    hideLabel,
-    hidePasswordLabel = 'Hide password',
-    id,
-    inline,
-    invalid = false,
-    invalidText,
-    labelText,
-    light,
-    onChange = () => {},
-    onClick = () => {},
-    onTogglePasswordVisibility,
-    placeholder,
-    readOnly,
-    size = 'md',
-    showPasswordLabel = 'Show password',
-    tooltipPosition = 'bottom',
-    tooltipAlignment = 'end',
-    type = 'password',
-    warn = false,
-    warnText,
-    ...rest
-  } = _ref;
+const PasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function PasswordInput({
+  className,
+  disabled = false,
+  helperText,
+  hideLabel,
+  hidePasswordLabel = 'Hide password',
+  id,
+  inline,
+  invalid = false,
+  invalidText,
+  labelText,
+  light,
+  onChange = () => {},
+  onClick = () => {},
+  onTogglePasswordVisibility,
+  placeholder,
+  readOnly,
+  size = 'md',
+  showPasswordLabel = 'Show password',
+  tooltipPosition = 'bottom',
+  tooltipAlignment = 'end',
+  type = 'password',
+  warn = false,
+  warnText,
+  ...rest
+}, ref) {
   const [inputType, setInputType] = React.useState(type);
   const prefix = usePrefix.usePrefix();
   const normalizedProps = useNormalizedInputProps.useNormalizedInputProps({

package/lib/components/TextInput/TextInput.Skeleton.js

@@ -21,12 +21,11 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const TextInputSkeleton = _ref => {
-  let {
-    hideLabel,
-    className,
-    ...rest
-  } = _ref;
+const TextInputSkeleton = ({
+  hideLabel,
+  className,
+  ...rest
+}) => {
   const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: cx__default["default"](`${prefix}--form-item`, className)

package/lib/components/TextInput/TextInput.js

@@ -18,7 +18,7 @@ var util = require('./util.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
 var usePrefix = require('../../internal/usePrefix.js');
-var useAnnouncer = require('../../internal/useAnnouncer.js');
+var getAnnouncement = require('../../internal/getAnnouncement.js');
 require('../Text/index.js');
 var Text = require('../Text/Text.js');
 
@@ -28,32 +28,31 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const TextInput = /*#__PURE__*/React__default["default"].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__default["default"].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.usePrefix();
   const {
     defaultValue,
@@ -164,7 +163,7 @@ const TextInput = /*#__PURE__*/React__default["default"].forwardRef(function Tex
   } = React.useContext(FormContext.FormContext);
   const announcerRef = React.useRef(null);
   const [prevAnnouncement, setPrevAnnouncement] = React.useState('');
-  const ariaAnnouncement = useAnnouncer.useAnnouncer(textCount, maxCount);
+  const ariaAnnouncement = getAnnouncement.getAnnouncement(textCount, maxCount);
   React.useEffect(() => {
     if (ariaAnnouncement && ariaAnnouncement !== prevAnnouncement) {
       const announcer = announcerRef.current;

package/lib/components/TextInput/util.js

@@ -25,22 +25,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) : {})
+});
 
 exports.textInputProps = textInputProps;

package/lib/components/Theme/index.js

@@ -26,11 +26,10 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 const ThemeContext = /*#__PURE__*/React__default["default"].createContext({
   theme: 'white'
 });
-const GlobalTheme = /*#__PURE__*/React__default["default"].forwardRef(function GlobalTheme(_ref, ref) {
-  let {
-    children,
-    theme
-  } = _ref;
+const GlobalTheme = /*#__PURE__*/React__default["default"].forwardRef(function GlobalTheme({
+  children,
+  theme
+}, ref) {
   const value = React.useMemo(() => {
     return {
       theme
@@ -57,13 +56,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.usePrefix();
   const className = cx__default["default"](customClassName, {
     [`${prefix}--white`]: theme === 'white',

package/lib/components/Tile/Tile.js

@@ -35,16 +35,15 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _CheckboxCheckedFille, _Checkbox, _ChevronDown, _ChevronDown2;
-const Tile = /*#__PURE__*/React__default["default"].forwardRef(function Tile(_ref, ref) {
-  let {
-    children,
-    className,
-    decorator,
-    light = false,
-    slug,
-    hasRoundedCorners = false,
-    ...rest
-  } = _ref;
+const Tile = /*#__PURE__*/React__default["default"].forwardRef(function Tile({
+  children,
+  className,
+  decorator,
+  light = false,
+  slug,
+  hasRoundedCorners = false,
+  ...rest
+}, ref) {
   const prefix = usePrefix.usePrefix();
   const tileClasses = cx__default["default"](`${prefix}--tile`, {
     [`${prefix}--tile--light`]: light,
@@ -91,22 +90,21 @@ Tile.propTypes = {
    */
   slug: deprecate["default"](PropTypes__default["default"].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__default["default"].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__default["default"].forwardRef(function ClickableTile({
+  children,
+  className,
+  clicked = false,
+  decorator,
+  disabled,
+  href,
+  light,
+  onClick = () => {},
+  onKeyDown = () => {},
+  renderIcon: Icon,
+  hasRoundedCorners,
+  slug,
+  ...rest
+}, ref) {
   const prefix = usePrefix.usePrefix();
   const classes = cx__default["default"](`${prefix}--tile`, `${prefix}--tile--clickable`, {
     [`${prefix}--tile--is-clicked`]: clicked,
@@ -215,24 +213,23 @@ ClickableTile.propTypes = {
    */
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object])
 };
-const SelectableTile = /*#__PURE__*/React__default["default"].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__default["default"].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.usePrefix();
   const clickHandler = onClick;
   const keyDownHandler = onKeyDown;
@@ -382,28 +379,27 @@ SelectableTile.propTypes = {
    */
   value: deprecate["default"](PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]), 'The `value` property is no longer used.  It will be removed in the next major release.`')
 };
-const ExpandableTile = /*#__PURE__*/React__default["default"].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__default["default"].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] = React.useState(tileMaxHeight);
   const [isTilePadding, setIsTilePadding] = React.useState(tilePadding);
   const [prevExpanded, setPrevExpanded] = React.useState(expanded);
@@ -629,10 +625,9 @@ ExpandableTile.propTypes = {
   tileExpandedLabel: PropTypes__default["default"].string
 };
 ExpandableTile.displayName = 'ExpandableTile';
-const TileAboveTheFoldContent = /*#__PURE__*/React__default["default"].forwardRef(function TilAboveTheFoldContent(_ref5, ref) {
-  let {
-    children
-  } = _ref5;
+const TileAboveTheFoldContent = /*#__PURE__*/React__default["default"].forwardRef(function TilAboveTheFoldContent({
+  children
+}, ref) {
   const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement("div", {
     ref: ref,
@@ -646,10 +641,9 @@ TileAboveTheFoldContent.propTypes = {
   children: PropTypes__default["default"].node
 };
 TileAboveTheFoldContent.displayName = 'TileAboveTheFoldContent';
-const TileBelowTheFoldContent = /*#__PURE__*/React__default["default"].forwardRef(function TileBelowTheFoldContent(_ref6, ref) {
-  let {
-    children
-  } = _ref6;
+const TileBelowTheFoldContent = /*#__PURE__*/React__default["default"].forwardRef(function TileBelowTheFoldContent({
+  children
+}, ref) {
   const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement("div", {
     ref: ref,

package/lib/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/lib/components/TileGroup/TileGroup.js

@@ -21,35 +21,37 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const TileGroup = props => {
-  const {
-    children,
-    className,
-    defaultSelected,
-    disabled,
-    legend,
-    name,
-    onChange = noopFn.noopFn,
-    valueSelected,
-    required
-  } = props;
+const TileGroup = ({
+  children,
+  className,
+  defaultSelected,
+  disabled,
+  legend,
+  name,
+  onChange = noopFn.noopFn,
+  valueSelected,
+  required
+}) => {
   const prefix = usePrefix.usePrefix();
   const [selected, setSelected] = React.useState(valueSelected ?? defaultSelected);
-  const [prevValueSelected, setPrevValueSelected] = React.useState(valueSelected);
+  React.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 React.Children.map(elements, child => {
+        if (! /*#__PURE__*/React.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__default["default"].Children.map(children, child => {
-        // If RadioTile found, return it with necessary props
-        if (child?.type === RadioTile["default"]) {
+        // If a `RadioTile` is found, return it with necessary props,
+        if (/*#__PURE__*/React.isValidElement(child) && child.type === RadioTile["default"]) {
           const {
             value,
             ...otherProps
@@ -62,38 +64,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__default["default"].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 = React.Children.count(children) > 0;
+        if (hasChildren) {
+          return /*#__PURE__*/React.cloneElement(child, undefined, traverseAndModifyChildren(children));
+        }
+
+        // If the child is neither a RadioTile nor has children, return it as is
+        return child;
       });
     };
-    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].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__default["default"].createElement("legend", {
-        className: `${prefix}--label`
-      }, legend);
-    }
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, traverseAndModifyChildren(elements));
   };
   return /*#__PURE__*/React__default["default"].createElement("fieldset", {
     className: className ?? `${prefix}--tile-group`,
     disabled: disabled
-  }, renderLegend(legend), /*#__PURE__*/React__default["default"].createElement("div", null, getRadioTilesWithWrappers(children)));
+  }, legend && /*#__PURE__*/React__default["default"].createElement("legend", {
+    className: `${prefix}--label`
+  }, legend), /*#__PURE__*/React__default["default"].createElement("div", null, getRadioTilesWithWrappers(children)));
 };
+TileGroup.displayName = 'TileGroup';
 TileGroup.propTypes = {
   /**
    * Provide a collection of <RadioTile> components to render in the group
@@ -133,6 +126,5 @@ TileGroup.propTypes = {
    */
   valueSelected: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
 };
-TileGroup.displayName = 'TileGroup';
 
-exports["default"] = TileGroup;
+exports.TileGroup = TileGroup;

package/lib/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/lib/components/Toggle/Toggle.Skeleton.js

@@ -21,11 +21,10 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const ToggleSkeleton = _ref => {
-  let {
-    className,
-    ...rest
-  } = _ref;
+const ToggleSkeleton = ({
+  className,
+  ...rest
+}) => {
   const prefix = usePrefix.usePrefix();
   const skeletonClassNames = cx__default["default"](`${prefix}--toggle ${prefix}--toggle--skeleton`, className);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({

package/lib/components/Toggle/Toggle.js

@@ -25,24 +25,23 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 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.usePrefix();
   const buttonElement = React.useRef(null);
   const [checked, setChecked] = useControllableState.useControllableState({

package/lib/components/ToggleSmall/ToggleSmall.Skeleton.js

@@ -22,13 +22,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _path;
-const ToggleSmallSkeleton = _ref => {
-  let {
-    id,
-    labelText,
-    className,
-    ...rest
-  } = _ref;
+const ToggleSmallSkeleton = ({
+  id,
+  labelText,
+  className,
+  ...rest
+}) => {
   const prefix = React.useContext(usePrefix.PrefixContext);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: cx__default["default"](`${prefix}--form-item`, className)