@carbon/react 1.83.0 → 1.84.0-rc.0

package/es/components/FluidSearch/FluidSearch.Skeleton.js

@@ -12,11 +12,10 @@ import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 
-const FluidSearchSkeleton = _ref => {
-  let {
-    className,
-    ...other
-  } = _ref;
+const FluidSearchSkeleton = ({
+  className,
+  ...other
+}) => {
   const prefix = usePrefix();
   return /*#__PURE__*/React.createElement(FormContext.Provider, {
     value: {

package/es/components/FluidSearch/FluidSearch.js

@@ -14,11 +14,10 @@ import '../Search/Search.Skeleton.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 
-const FluidSearch = /*#__PURE__*/React.forwardRef(function FluidSearch(_ref, ref) {
-  let {
-    className,
-    ...other
-  } = _ref;
+const FluidSearch = /*#__PURE__*/React.forwardRef(function FluidSearch({
+  className,
+  ...other
+}, ref) {
   const prefix = usePrefix();
   const classNames = cx(`${prefix}--search--fluid`, className);
   return /*#__PURE__*/React.createElement(FormContext.Provider, {

package/es/components/FluidSelect/FluidSelect.Skeleton.js

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

package/es/components/FluidSelect/FluidSelect.js

@@ -14,12 +14,11 @@ import '../Select/Select.Skeleton.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 
-const FluidSelect = /*#__PURE__*/React.forwardRef(function FluidSelect(_ref, ref) {
-  let {
-    className,
-    children,
-    ...other
-  } = _ref;
+const FluidSelect = /*#__PURE__*/React.forwardRef(function FluidSelect({
+  className,
+  children,
+  ...other
+}, ref) {
   const prefix = usePrefix();
   const classNames = cx(`${prefix}--select--fluid`, className);
   return /*#__PURE__*/React.createElement(FormContext.Provider, {

package/es/components/FluidTextArea/FluidTextArea.Skeleton.js

@@ -12,11 +12,10 @@ import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 
-const FluidTextAreaSkeleton = _ref => {
-  let {
-    className,
-    ...other
-  } = _ref;
+const FluidTextAreaSkeleton = ({
+  className,
+  ...other
+}) => {
   const prefix = usePrefix();
   return /*#__PURE__*/React.createElement(FormContext.Provider, {
     value: {

package/es/components/FluidTextArea/FluidTextArea.js

@@ -15,11 +15,10 @@ import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 
-const FluidTextArea = _ref => {
-  let {
-    className,
-    ...other
-  } = _ref;
+const FluidTextArea = ({
+  className,
+  ...other
+}) => {
   const prefix = usePrefix();
   const classNames = cx(`${prefix}--text-area--fluid`, className);
   return /*#__PURE__*/React.createElement(FormContext.Provider, {

package/es/components/FluidTextInput/FluidTextInput.Skeleton.js

@@ -12,11 +12,10 @@ import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 
-const FluidTextInputSkeleton = _ref => {
-  let {
-    className,
-    ...other
-  } = _ref;
+const FluidTextInputSkeleton = ({
+  className,
+  ...other
+}) => {
   const prefix = usePrefix();
   return /*#__PURE__*/React.createElement(FormContext.Provider, {
     value: {

package/es/components/FluidTextInput/FluidTextInput.js

@@ -16,12 +16,11 @@ import PasswordInput from '../TextInput/PasswordInput.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 
-const FluidTextInput = /*#__PURE__*/React.forwardRef(function FluidTextInput(_ref, ref) {
-  let {
-    className,
-    isPassword,
-    ...other
-  } = _ref;
+const FluidTextInput = /*#__PURE__*/React.forwardRef(function FluidTextInput({
+  className,
+  isPassword,
+  ...other
+}, ref) {
   const prefix = usePrefix();
   const classNames = cx(className, {
     [`${prefix}--text-input--fluid`]: !isPassword

package/es/components/FluidTimePicker/FluidTimePicker.Skeleton.js

@@ -17,12 +17,11 @@ import '../FluidSelect/FluidSelect.js';
 import FluidSelectSkeleton from '../FluidSelect/FluidSelect.Skeleton.js';
 
 var _FluidTextInputSkelet, _FluidSelectSkeleton, _FluidSelectSkeleton2;
-const FluidTimePickerSkeleton = _ref => {
-  let {
-    className,
-    isOnlyTwo,
-    ...rest
-  } = _ref;
+const FluidTimePickerSkeleton = ({
+  className,
+  isOnlyTwo,
+  ...rest
+}) => {
   const prefix = usePrefix();
   const wrapperClasses = cx(className, `${prefix}--time-picker--fluid--skeleton`, {
     [`${prefix}--time-picker--equal-width`]: isOnlyTwo

package/es/components/FluidTimePicker/FluidTimePicker.js

@@ -15,18 +15,17 @@ import '../FluidTextInput/FluidTextInput.Skeleton.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 
-const FluidTimePicker = /*#__PURE__*/React.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,

package/es/components/FluidTimePickerSelect/FluidTimePickerSelect.js

@@ -11,12 +11,11 @@ import PropTypes from 'prop-types';
 import FluidSelect from '../FluidSelect/FluidSelect.js';
 import '../FluidSelect/FluidSelect.Skeleton.js';
 
-const FluidTimePickerSelect = /*#__PURE__*/React.forwardRef(function FluidTimePickerSelect(_ref, ref) {
-  let {
-    children,
-    className,
-    ...other
-  } = _ref;
+const FluidTimePickerSelect = /*#__PURE__*/React.forwardRef(function FluidTimePickerSelect({
+  children,
+  className,
+  ...other
+}, ref) {
   return /*#__PURE__*/React.createElement(FluidSelect, _extends({
     className: className,
     ref: ref

package/es/components/Form/Form.js

@@ -11,12 +11,11 @@ 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.createElement("form", _extends({

package/es/components/FormGroup/FormGroup.js

@@ -11,18 +11,17 @@ 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.createElement("fieldset", _extends({

package/es/components/FormItem/FormItem.js

@@ -11,12 +11,11 @@ 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.createElement("div", _extends({

package/es/components/FormLabel/FormLabel.js

@@ -13,13 +13,12 @@ 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.createElement(Text, _extends({

package/es/components/Grid/CSSGrid.js

@@ -12,17 +12,16 @@ import React from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useGridSettings, GridSettings } from './GridContext.js';
 
-const CSSGrid = /*#__PURE__*/React.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
@@ -95,14 +94,13 @@ CSSGrid.propTypes = {
    */
   narrow: PropTypes.bool
 };
-const Subgrid = /*#__PURE__*/React.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,

package/es/components/Grid/Column.js

@@ -13,18 +13,17 @@ import React from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useGridSettings } from './GridContext.js';
 
-const Column = /*#__PURE__*/React.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();
@@ -36,6 +35,7 @@ const Column = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       className: customClassName,
       sm: sm,
       md: md,
+      ref: ref,
       lg: lg,
       xlg: xlg,
       max: max
@@ -114,19 +114,19 @@ 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);
@@ -134,9 +134,10 @@ function CSSGridColumn(_ref2) {
     [`${prefix}--css-grid-column`]: true
   });
   return /*#__PURE__*/React.createElement(BaseComponent, _extends({
-    className: className
+    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

@@ -15,13 +15,12 @@ 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

package/es/components/Grid/FlexGrid.js

@@ -12,16 +12,15 @@ import React from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { GridSettings } from './GridContext.js';
 
-const FlexGrid = /*#__PURE__*/React.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,

package/es/components/Grid/GridContext.js

@@ -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

@@ -11,15 +11,14 @@ import PropTypes from 'prop-types';
 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,

package/es/components/Heading/index.js

@@ -10,12 +10,11 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 const HeadingContext = /*#__PURE__*/React.createContext(1);
-const Section = /*#__PURE__*/React.forwardRef(function Section(_ref, ref) {
-  let {
-    as: BaseComponent = 'section',
-    level: levelOverride,
-    ...rest
-  } = _ref;
+const Section = /*#__PURE__*/React.forwardRef(function Section({
+  as: BaseComponent = 'section',
+  level: levelOverride,
+  ...rest
+}, ref) {
   const parentLevel = React.useContext(HeadingContext);
   const level = levelOverride ?? parentLevel + 1;
   const BaseComponentAsAny = BaseComponent;

package/es/components/Icon/Icon.Skeleton.js

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

package/es/components/IconButton/index.js

@@ -19,27 +19,26 @@ import { BadgeIndicator } from '../BadgeIndicator/index.js';
 import { mapPopoverAlign } from '../../tools/mapPopoverAlign.js';
 
 const IconButtonKinds = ['primary', 'secondary', 'ghost', 'tertiary'];
-const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(_ref, ref) {
-  let {
-    align,
-    autoAlign = false,
-    badgeCount,
-    children,
-    className,
-    closeOnActivation = true,
-    defaultOpen = false,
-    disabled,
-    dropShadow = false,
-    enterDelayMs = 100,
-    highContrast = true,
-    kind,
-    label,
-    leaveDelayMs = 100,
-    wrapperClasses,
-    size,
-    isSelected,
-    ...rest
-  } = _ref;
+const IconButton = /*#__PURE__*/React.forwardRef(function IconButton({
+  align,
+  autoAlign = false,
+  badgeCount,
+  children,
+  className,
+  closeOnActivation = true,
+  defaultOpen = false,
+  disabled,
+  dropShadow = false,
+  enterDelayMs = 100,
+  highContrast = true,
+  kind,
+  label,
+  leaveDelayMs = 100,
+  wrapperClasses,
+  size,
+  isSelected,
+  ...rest
+}, ref) {
   const prefix = usePrefix();
   const tooltipClasses = cx(wrapperClasses, `${prefix}--icon-tooltip`, {
     [`${prefix}--icon-tooltip--disabled`]: disabled

package/es/components/IconIndicator/index.js

@@ -26,14 +26,13 @@ const iconTypes = {
   unknown: UnknownFilled,
   informative: WarningSquareFilled
 };
-const IconIndicator = /*#__PURE__*/React.forwardRef(function IconIndicatorContent(_ref, ref) {
-  let {
-    className: customClassName,
-    kind,
-    label,
-    size = 16,
-    ...rest
-  } = _ref;
+const IconIndicator = /*#__PURE__*/React.forwardRef(function IconIndicatorContent({
+  className: customClassName,
+  kind,
+  label,
+  size = 16,
+  ...rest
+}, ref) {
   const prefix = usePrefix();
   const classNames = cx(`${prefix}--icon-indicator`, customClassName, {
     [`${prefix}--icon-indicator--20`]: size == 20

package/es/components/IdPrefix/index.js

@@ -9,11 +9,10 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { IdPrefixContext } from '../../internal/useIdPrefix.js';
 
-function IdPrefix(_ref) {
-  let {
-    children,
-    prefix
-  } = _ref;
+function IdPrefix({
+  children,
+  prefix
+}) {
   return /*#__PURE__*/React.createElement(IdPrefixContext.Provider, {
     value: prefix
   }, children);