@carbon/react 1.83.0-rc.0 → 1.84.0-rc.0

package/es/components/FluidTimePicker/FluidTimePicker.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import FluidTextInput from '../FluidTextInput/FluidTextInput.js';
@@ -15,22 +15,21 @@ import '../FluidTextInput/FluidTextInput.Skeleton.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 
-const FluidTimePicker = /*#__PURE__*/React__default.forwardRef(function FluidTimePicker(_ref, ref) {
-  let {
-    className,
-    children,
-    disabled,
-    invalid,
-    invalidText,
-    warn,
-    warnText,
-    readOnly,
-    ...other
-  } = _ref;
+const FluidTimePicker = /*#__PURE__*/React.forwardRef(function FluidTimePicker({
+  className,
+  children,
+  disabled,
+  invalid,
+  invalidText,
+  warn,
+  warnText,
+  readOnly,
+  ...other
+}, ref) {
   const prefix = usePrefix();
   const classNames = cx(className, {
     [`${prefix}--time-picker--fluid`]: true,
-    [`${prefix}--time-picker--equal-width`]: React__default.Children.toArray(children).length !== 2,
+    [`${prefix}--time-picker--equal-width`]: React.Children.toArray(children).length !== 2,
     [`${prefix}--time-picker--fluid--disabled`]: disabled,
     [`${prefix}--time-picker--fluid--invalid`]: invalid,
     [`${prefix}--time-picker--fluid--warning`]: warn
@@ -46,34 +45,34 @@ const FluidTimePicker = /*#__PURE__*/React__default.forwardRef(function FluidTim
   const error = invalid || warn;
   const childrenWithProps = () => {
     if (disabled) {
-      return React__default.Children.toArray(children).map(child => /*#__PURE__*/React__default.cloneElement(child, {
+      return React.Children.toArray(children).map(child => /*#__PURE__*/React.cloneElement(child, {
         disabled: true
       }));
     }
     if (readOnly) {
-      return React__default.Children.toArray(children).map(child => /*#__PURE__*/React__default.cloneElement(child, {
+      return React.Children.toArray(children).map(child => /*#__PURE__*/React.cloneElement(child, {
         readOnly: true
       }));
     }
     return children;
   };
-  return /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: classNames
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--time-picker--fluid__wrapper`
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--time-picker__input`
-  }, /*#__PURE__*/React__default.createElement(FluidTextInput, _extends({
+  }, /*#__PURE__*/React.createElement(FluidTextInput, _extends({
     ref: ref,
     readOnly: readOnly,
     disabled: disabled
-  }, other))), childrenWithProps()), error && /*#__PURE__*/React__default.createElement("hr", {
+  }, other))), childrenWithProps()), error && /*#__PURE__*/React.createElement("hr", {
     className: `${prefix}--time-picker__divider`
-  }), error && /*#__PURE__*/React__default.createElement("div", {
+  }), error && /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--form-requirement`
-  }, errorText()), error && invalid ? /*#__PURE__*/React__default.createElement(WarningFilled, {
+  }, errorText()), error && invalid ? /*#__PURE__*/React.createElement(WarningFilled, {
     className: `${prefix}--time-picker__icon ${prefix}--time-picker__icon--invalid`
-  }) : /*#__PURE__*/React__default.createElement(WarningAltFilled, {
+  }) : /*#__PURE__*/React.createElement(WarningAltFilled, {
     className: `${prefix}--time-picker__icon ${prefix}--time-picker__icon--warn`
   }));
 });

package/es/components/FluidTimePickerSelect/FluidTimePickerSelect.js

@@ -6,18 +6,17 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import FluidSelect from '../FluidSelect/FluidSelect.js';
 import '../FluidSelect/FluidSelect.Skeleton.js';
 
-const FluidTimePickerSelect = /*#__PURE__*/React__default.forwardRef(function FluidTimePickerSelect(_ref, ref) {
-  let {
-    children,
-    className,
-    ...other
-  } = _ref;
-  return /*#__PURE__*/React__default.createElement(FluidSelect, _extends({
+const FluidTimePickerSelect = /*#__PURE__*/React.forwardRef(function FluidTimePickerSelect({
+  children,
+  className,
+  ...other
+}, ref) {
+  return /*#__PURE__*/React.createElement(FluidSelect, _extends({
     className: className,
     ref: ref
   }, other), children);

package/es/components/Form/Form.js

@@ -7,19 +7,18 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-function Form(_ref) {
-  let {
-    className,
-    children,
-    ...other
-  } = _ref;
+function Form({
+  className,
+  children,
+  ...other
+}) {
   const prefix = usePrefix();
   const classNames = cx(`${prefix}--form`, className);
-  return /*#__PURE__*/React__default.createElement("form", _extends({
+  return /*#__PURE__*/React.createElement("form", _extends({
     className: classNames
   }, other), children);
 }

package/es/components/FormGroup/FormGroup.d.ts

@@ -1,13 +1,12 @@
 /**
- * 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 PropTypes from 'prop-types';
-import React from 'react';
-import { ReactAttr } from '../../types/common';
-export interface FormGroupProps extends ReactAttr<HTMLFieldSetElement> {
+import React, { type HTMLAttributes } from 'react';
+export interface FormGroupProps extends HTMLAttributes<HTMLFieldSetElement> {
     /**
      * Provide the children form elements to be rendered inside of the <fieldset>
      */

package/es/components/FormGroup/FormGroup.js

@@ -7,25 +7,24 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const FormGroup = _ref => {
-  let {
-    disabled = false,
-    legendId,
-    legendText,
-    invalid = false,
-    children,
-    className,
-    message = false,
-    messageText = '',
-    ...rest
-  } = _ref;
+const FormGroup = ({
+  disabled = false,
+  legendId,
+  legendText,
+  invalid = false,
+  children,
+  className,
+  message = false,
+  messageText = '',
+  ...rest
+}) => {
   const prefix = usePrefix();
   const classNamesFieldset = cx(`${prefix}--fieldset`, className);
-  return /*#__PURE__*/React__default.createElement("fieldset", _extends({
+  return /*#__PURE__*/React.createElement("fieldset", _extends({
     disabled: disabled
   }, invalid && {
     'data-invalid': ''
@@ -33,10 +32,10 @@ const FormGroup = _ref => {
     className: classNamesFieldset
   }, rest, {
     "aria-labelledby": rest['aria-labelledby'] || legendId
-  }), /*#__PURE__*/React__default.createElement("legend", {
+  }), /*#__PURE__*/React.createElement("legend", {
     className: `${prefix}--label`,
     id: legendId || rest['aria-labelledby']
-  }, legendText), children, message ? /*#__PURE__*/React__default.createElement("div", {
+  }, legendText), children, message ? /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--form__requirements`
   }, messageText) : null);
 };

package/es/components/FormItem/FormItem.js

@@ -7,19 +7,18 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-function FormItem(_ref) {
-  let {
-    className,
-    children,
-    ...rest
-  } = _ref;
+function FormItem({
+  className,
+  children,
+  ...rest
+}) {
   const prefix = usePrefix();
   const classNames = cx(`${prefix}--form-item`, className);
-  return /*#__PURE__*/React__default.createElement("div", _extends({
+  return /*#__PURE__*/React.createElement("div", _extends({
     className: classNames
   }, rest), children);
 }

package/es/components/FormLabel/FormLabel.js

@@ -7,22 +7,21 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../Text/index.js';
 import { Text } from '../Text/Text.js';
 
-function FormLabel(_ref) {
-  let {
-    className: customClassName,
-    children,
-    id,
-    ...rest
-  } = _ref;
+function FormLabel({
+  className: customClassName,
+  children,
+  id,
+  ...rest
+}) {
   const prefix = usePrefix();
   const className = cx(`${prefix}--label`, `${prefix}--label--no-margin`, customClassName);
-  return /*#__PURE__*/React__default.createElement(Text, _extends({
+  return /*#__PURE__*/React.createElement(Text, _extends({
     as: "label",
     htmlFor: id,
     className: className

package/es/components/Grid/CSSGrid.js

@@ -8,21 +8,20 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useGridSettings, GridSettings } from './GridContext.js';
 
-const CSSGrid = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
-  let {
-    align,
-    as,
-    children,
-    className: customClassName,
-    condensed = false,
-    fullWidth = false,
-    narrow = false,
-    ...rest
-  } = _ref;
+const CSSGrid = /*#__PURE__*/React.forwardRef(({
+  align,
+  as,
+  children,
+  className: customClassName,
+  condensed = false,
+  fullWidth = false,
+  narrow = false,
+  ...rest
+}, ref) => {
   const prefix = usePrefix();
   const {
     subgrid
@@ -34,10 +33,10 @@ const CSSGrid = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     mode = 'condensed';
   }
   if (subgrid) {
-    return /*#__PURE__*/React__default.createElement(GridSettings, {
+    return /*#__PURE__*/React.createElement(GridSettings, {
       mode: "css-grid",
       subgrid: true
-    }, /*#__PURE__*/React__default.createElement(Subgrid, _extends({
+    }, /*#__PURE__*/React.createElement(Subgrid, _extends({
       ref: ref,
       as: as,
       className: customClassName,
@@ -55,10 +54,10 @@ const CSSGrid = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
 
   // cast as any to let TypeScript allow passing in attributes to base component
   const BaseComponent = as || 'div';
-  return /*#__PURE__*/React__default.createElement(GridSettings, {
+  return /*#__PURE__*/React.createElement(GridSettings, {
     mode: "css-grid",
     subgrid: true
-  }, /*#__PURE__*/React__default.createElement(BaseComponent, _extends({
+  }, /*#__PURE__*/React.createElement(BaseComponent, _extends({
     className: className,
     ref: ref
   }, rest), children));
@@ -95,14 +94,13 @@ CSSGrid.propTypes = {
    */
   narrow: PropTypes.bool
 };
-const Subgrid = /*#__PURE__*/React__default.forwardRef((_ref2, ref) => {
-  let {
-    as,
-    className: customClassName,
-    children,
-    mode,
-    ...rest
-  } = _ref2;
+const Subgrid = /*#__PURE__*/React.forwardRef(({
+  as,
+  className: customClassName,
+  children,
+  mode,
+  ...rest
+}, ref) => {
   const prefix = usePrefix();
   const className = cx(customClassName, {
     [`${prefix}--subgrid`]: true,
@@ -111,7 +109,7 @@ const Subgrid = /*#__PURE__*/React__default.forwardRef((_ref2, ref) => {
     [`${prefix}--subgrid--wide`]: mode === 'wide'
   });
   const BaseComponent = as || 'div';
-  return /*#__PURE__*/React__default.createElement(BaseComponent, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(BaseComponent, _extends({}, rest, {
     ref: ref,
     className: className
   }), children);

package/es/components/Grid/Column.js

@@ -9,33 +9,33 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import * as FeatureFlags from '@carbon/feature-flags';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useGridSettings } from './GridContext.js';
 
-const Column = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
-  let {
-    as,
-    children,
-    className: customClassName,
-    sm,
-    md,
-    lg,
-    xlg,
-    max,
-    ...rest
-  } = _ref;
+const Column = /*#__PURE__*/React.forwardRef(({
+  as,
+  children,
+  className: customClassName,
+  sm,
+  md,
+  lg,
+  xlg,
+  max,
+  ...rest
+}, ref) => {
   const {
     mode
   } = useGridSettings();
   const prefix = usePrefix();
   const BaseComponent = as || 'div';
   if (mode === 'css-grid') {
-    return /*#__PURE__*/React__default.createElement(CSSGridColumn, _extends({
+    return /*#__PURE__*/React.createElement(CSSGridColumn, _extends({
       as: BaseComponent,
       className: customClassName,
       sm: sm,
       md: md,
+      ref: ref,
       lg: lg,
       xlg: xlg,
       max: max
@@ -45,7 +45,7 @@ const Column = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   const className = cx(customClassName, columnClassName, {
     [`${prefix}--col`]: columnClassName.length === 0
   });
-  return /*#__PURE__*/React__default.createElement(BaseComponent, _extends({
+  return /*#__PURE__*/React.createElement(BaseComponent, _extends({
     className: className,
     ref: ref
   }, rest), children);
@@ -114,29 +114,30 @@ Column.propTypes = {
    */
   xlg: spanPropType
 };
-function CSSGridColumn(_ref2) {
-  let {
-    as: BaseComponent = 'div',
-    children,
-    className: containerClassName,
-    sm,
-    md,
-    lg,
-    xlg,
-    max,
-    span,
-    ...rest
-  } = _ref2;
+const CSSGridColumn = /*#__PURE__*/React.forwardRef(({
+  as: BaseComponent = 'div',
+  children,
+  className: containerClassName,
+  sm,
+  md,
+  lg,
+  xlg,
+  max,
+  span,
+  ...rest
+}, ref) => {
+  // Add ref parameter
   const prefix = usePrefix();
   const breakpointClassName = getClassNameForBreakpoints([sm, md, lg, xlg, max], prefix);
   const spanClassName = getClassNameForSpan(span, prefix);
   const className = cx(containerClassName, breakpointClassName, spanClassName, {
     [`${prefix}--css-grid-column`]: true
   });
-  return /*#__PURE__*/React__default.createElement(BaseComponent, _extends({
-    className: className
+  return /*#__PURE__*/React.createElement(BaseComponent, _extends({
+    className: className,
+    ref: ref
   }, rest), children);
-}
+});
 CSSGridColumn.propTypes = {
   /**
    * Provide a custom element to render instead of the default <div>

package/es/components/Grid/ColumnHang.js

@@ -8,25 +8,24 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 /**
  * Helper component for rendering content that hangs on the column. Useful when
  * trying to align content across different gutter modes
  */
-function ColumnHang(_ref) {
-  let {
-    as: BaseComponent = 'div',
-    className: customClassName,
-    children,
-    ...rest
-  } = _ref;
+function ColumnHang({
+  as: BaseComponent = 'div',
+  className: customClassName,
+  children,
+  ...rest
+}) {
   const prefix = usePrefix();
   const className = cx(customClassName, `${prefix}--grid-column-hang`);
   // cast as any to let TypeScript allow passing in attributes to base component
   const BaseComponentAsAny = BaseComponent;
-  return /*#__PURE__*/React__default.createElement(BaseComponentAsAny, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(BaseComponentAsAny, _extends({}, rest, {
     className: className
   }), children);
 }

package/es/components/Grid/FlexGrid.js

@@ -8,20 +8,19 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { GridSettings } from './GridContext.js';
 
-const FlexGrid = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
-  let {
-    as,
-    condensed = false,
-    narrow = false,
-    fullWidth = false,
-    className: containerClassName,
-    children,
-    ...rest
-  } = _ref;
+const FlexGrid = /*#__PURE__*/React.forwardRef(({
+  as,
+  condensed = false,
+  narrow = false,
+  fullWidth = false,
+  className: containerClassName,
+  children,
+  ...rest
+}, ref) => {
   const prefix = usePrefix();
   const className = cx(containerClassName, {
     [`${prefix}--grid`]: true,
@@ -31,10 +30,10 @@ const FlexGrid = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   });
   // cast as any to let TypeScript allow passing in attributes to base component
   const BaseComponent = as || 'div';
-  return /*#__PURE__*/React__default.createElement(GridSettings, {
+  return /*#__PURE__*/React.createElement(GridSettings, {
     mode: "flexbox",
     subgrid: false
-  }, /*#__PURE__*/React__default.createElement(BaseComponent, _extends({
+  }, /*#__PURE__*/React.createElement(BaseComponent, _extends({
     className: className,
     ref: ref
   }, rest), children));

package/es/components/Grid/Grid.js

@@ -6,7 +6,7 @@
  */
 
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { CSSGrid as CSSGridComponent } from './CSSGrid.js';
 import { FlexGrid as FlexGridComponent } from './FlexGrid.js';
@@ -14,9 +14,9 @@ import { FlexGrid as FlexGridComponent } from './FlexGrid.js';
 function Grid(props) {
   const enableCSSGrid = useFeatureFlag('enable-css-grid');
   if (enableCSSGrid) {
-    return /*#__PURE__*/React__default.createElement(CSSGridComponent, props);
+    return /*#__PURE__*/React.createElement(CSSGridComponent, props);
   }
-  return /*#__PURE__*/React__default.createElement(FlexGridComponent, props);
+  return /*#__PURE__*/React.createElement(FlexGridComponent, props);
 }
 Grid.propTypes = {
   /**

package/es/components/Grid/GridContext.d.ts

@@ -1,10 +1,10 @@
 /**
- * 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 * as React from 'react';
+import React from 'react';
 export type GridMode = 'flexbox' | 'css-grid';
 export interface GridSettingContext {
     /**

package/es/components/Grid/GridContext.js

@@ -6,7 +6,7 @@
  */
 
 import PropTypes from 'prop-types';
-import * as React from 'react';
+import React from 'react';
 
 /**
  * Provides a grid context for communication the grid "mode" (flexbox or
@@ -16,12 +16,11 @@ const GridSettingsContext = /*#__PURE__*/React.createContext({
   mode: 'flexbox',
   subgrid: false
 });
-const GridSettings = _ref => {
-  let {
-    children,
-    mode,
-    subgrid = false
-  } = _ref;
+const GridSettings = ({
+  children,
+  mode,
+  subgrid = false
+}) => {
   const value = React.useMemo(() => {
     return {
       mode,

package/es/components/Grid/Row.js

@@ -8,18 +8,17 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-function Row(_ref) {
-  let {
-    as: BaseComponent = 'div',
-    condensed = false,
-    narrow = false,
-    className: containerClassName,
-    children,
-    ...rest
-  } = _ref;
+function Row({
+  as: BaseComponent = 'div',
+  condensed = false,
+  narrow = false,
+  className: containerClassName,
+  children,
+  ...rest
+}) {
   const prefix = usePrefix();
   const className = cx(containerClassName, {
     [`${prefix}--row`]: true,
@@ -28,7 +27,7 @@ function Row(_ref) {
   });
   // TypeScript type validation reports conflicts on different instances of keyof JSX.IntrinsicElements
   const BaseComponentAsAny = BaseComponent;
-  return /*#__PURE__*/React__default.createElement(BaseComponentAsAny, _extends({
+  return /*#__PURE__*/React.createElement(BaseComponentAsAny, _extends({
     className: className
   }, rest), children);
 }