@carbon/react 1.66.0-rc.0 → 1.67.0-rc.0

package/lib/components/CopyButton/CopyButton.d.ts

@@ -12,6 +12,10 @@ export interface CopyButtonProps extends ButtonProps<'button'> {
      * Specify how the trigger should align with the tooltip
      */
     align?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
+    /**
+     * **Experimental**: Will attempt to automatically align the tooltip
+     */
+    autoAlign?: boolean;
     /**
      * Specify an optional className to be applied to the underlying `<button>`
      */
@@ -36,13 +40,17 @@ export interface CopyButtonProps extends ButtonProps<'button'> {
      */
     onClick?: MouseEventHandler<HTMLButtonElement>;
 }
-declare function CopyButton({ align, feedback, feedbackTimeout, iconDescription, className, onClick, ...other }: CopyButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function CopyButton({ align, autoAlign, feedback, feedbackTimeout, iconDescription, className, onClick, ...other }: CopyButtonProps): import("react/jsx-runtime").JSX.Element;
 declare namespace CopyButton {
     var propTypes: {
         /**
          * Specify how the trigger should align with the tooltip
          */
         align: PropTypes.Requireable<string>;
+        /**
+         * **Experimental**: Will attempt to automatically align the tooltip
+         */
+        autoAlign: PropTypes.Requireable<boolean>;
         /**
          * Specify an optional className to be applied to the underlying `<button>`
          */

package/lib/components/CopyButton/CopyButton.js

@@ -28,6 +28,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 function CopyButton(_ref) {
   let {
     align = 'bottom',
+    autoAlign = false,
     feedback = 'Copied!',
     feedbackTimeout = 2000,
     iconDescription = 'Copy to clipboard',
@@ -46,6 +47,7 @@ function CopyButton(_ref) {
     feedbackTimeout: feedbackTimeout,
     onClick: onClick,
     align: align,
+    autoAlign: autoAlign,
     className: cx__default["default"](className, `${prefix}--copy-btn`),
     "aria-label": iconDescription
   }, other), /*#__PURE__*/React__default["default"].createElement(iconsReact.Copy, {
@@ -57,6 +59,10 @@ CopyButton.propTypes = {
    * Specify how the trigger should align with the tooltip
    */
   align: PropTypes__default["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
+  /**
+   * **Experimental**: Will attempt to automatically align the tooltip
+   */
+  autoAlign: PropTypes__default["default"].bool,
   /**
    * Specify an optional className to be applied to the underlying `<button>`
    */

package/lib/components/DataTable/TableExpandHeader.d.ts

@@ -22,7 +22,7 @@ type TableExpandHeaderPropsBase = {
      * Specify the string read by a voice reader when the expand trigger is
      * focused
      */
-    ['aria-label']: string;
+    ['aria-label']?: string;
     /**
      * @deprecated The enableExpando prop is being replaced by `enableToggle`
      */
@@ -79,7 +79,7 @@ declare const TableExpandHeader: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         className: PropTypes.Requireable<string>;
         /**
-         * The enableExpando prop is being replaced by enableToggle
+         * The enableExpando prop is being replaced by TableExpandHeader
          */
         enableExpando: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
         /**

package/lib/components/DataTable/TableExpandHeader.js

@@ -79,7 +79,7 @@ TableExpandHeader.propTypes = {
   children: PropTypes__default["default"].node,
   className: PropTypes__default["default"].string,
   /**
-   * The enableExpando prop is being replaced by enableToggle
+   * The enableExpando prop is being replaced by TableExpandHeader
    */
   enableExpando: deprecate["default"](PropTypes__default["default"].bool, 'The `enableExpando` prop has been deprecated in favor of `enableToggle`. This prop will be removed in the next major release.'),
   /**

package/lib/components/DatePicker/DatePicker.js

@@ -566,6 +566,7 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
     if (!calendarRef.current || !startInputField.current) return;
     const handleKeyDown = event => {
       if (match.match(event, keys.Tab) && !event.shiftKey && document.activeElement === endInputField.current && calendarRef.current.isOpen) {
+        event.preventDefault();
         calendarRef.current.close();
         // Remove focus from endDate calendar input
         document.activeElement instanceof HTMLElement &&

package/lib/components/Dropdown/Dropdown.js

@@ -23,7 +23,7 @@ require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
 var useId = require('../../internal/useId.js');
 var react = require('@floating-ui/react');
-var floatingUi_core = require('../../node_modules/@floating-ui/core/dist/floating-ui.core.mjs.js');
+var floatingUi_dom = require('../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -103,7 +103,7 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
           width: `${rects.reference.width}px`
         });
       }
-    }), react.flip(), floatingUi_core.hide()],
+    }), react.flip(), floatingUi_dom.hide()],
     whileElementsMounted: react.autoUpdate
   } : {} // When autoAlign is turned off, floating-ui will not be used
   );
@@ -195,7 +195,7 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     [`${prefix}--dropdown--readonly`]: readOnly,
     [`${prefix}--dropdown--${size}`]: size,
     [`${prefix}--list-box--up`]: direction === 'top',
-    [`${prefix}--dropdown--autoalign`]: autoAlign
+    [`${prefix}--autoalign`]: autoAlign
   });
   const titleClasses = cx__default["default"](`${prefix}--label`, {
     [`${prefix}--label--disabled`]: disabled,

package/lib/components/FeatureFlags/index.js

@@ -12,6 +12,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var FeatureFlags$1 = require('@carbon/feature-flags');
 var PropTypes = require('prop-types');
 var React = require('react');
+var deprecate = require('../../prop-types/deprecate.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -32,17 +33,30 @@ const FeatureFlagContext = /*#__PURE__*/React.createContext(FeatureFlags$1.Featu
 function FeatureFlags(_ref) {
   let {
     children,
-    flags = {}
+    flags = {},
+    enableV12TileDefaultIcons = false,
+    enableV12TileRadioIcons = false,
+    enableV12Overflowmenu = false,
+    enableTreeviewControllable = false,
+    enableExperimentalFocusWrapWithoutSentinels = false
   } = _ref;
   const parentScope = React.useContext(FeatureFlagContext);
   const [prevParentScope, setPrevParentScope] = React.useState(parentScope);
+  const combinedFlags = {
+    'enable-v12-tile-default-icons': enableV12TileDefaultIcons,
+    'enable-v12-tile-radio-icons': enableV12TileRadioIcons,
+    'enable-v12-overflowmenu': enableV12Overflowmenu,
+    'enable-treeview-controllable': enableTreeviewControllable,
+    'enable-experimental-focus-wrap-without-sentinels': enableExperimentalFocusWrapWithoutSentinels,
+    ...flags
+  };
   const [scope, updateScope] = React.useState(() => {
-    const scope = FeatureFlags$1.createScope(flags);
+    const scope = FeatureFlags$1.createScope(combinedFlags);
     scope.mergeWithScope(parentScope);
     return scope;
   });
   if (parentScope !== prevParentScope) {
-    const scope = FeatureFlags$1.createScope(flags);
+    const scope = FeatureFlags$1.createScope(combinedFlags);
     scope.mergeWithScope(parentScope);
     updateScope(scope);
     setPrevParentScope(parentScope);
@@ -51,7 +65,7 @@ function FeatureFlags(_ref) {
   // We use a custom hook to detect if any of the keys or their values change
   // for flags that are passed in. If they have changed, then we re-create the
   // FeatureFlagScope using the new flags
-  useChangedValue(flags, isEqual, changedFlags => {
+  useChangedValue(combinedFlags, isEqual, changedFlags => {
     const scope = FeatureFlags$1.createScope(changedFlags);
     scope.mergeWithScope(parentScope);
     updateScope(scope);
@@ -63,9 +77,14 @@ function FeatureFlags(_ref) {
 FeatureFlags.propTypes = {
   children: PropTypes__default["default"].node,
   /**
-   * Provide the feature flags to enabled or disabled in the current React tree
+   * Provide the feature flags to enabled or disabled in the current Rea,ct tree
    */
-  flags: PropTypes__default["default"].objectOf(PropTypes__default["default"].bool)
+  flags: deprecate["default"](PropTypes__default["default"].objectOf(PropTypes__default["default"].bool), 'The `flags` prop for `FeatureFlag` has ' + 'been deprecated. Please run the `featureflag-deprecate-flags-prop` codemod to migrate to individual boolean props.' + `npx @carbon/upgrade migrate featureflag-deprecate-flags-prop --write`),
+  enableV12TileDefaultIcons: PropTypes__default["default"].bool,
+  enableV12TileRadioIcons: PropTypes__default["default"].bool,
+  enableV12Overflowmenu: PropTypes__default["default"].bool,
+  enableTreeviewControllable: PropTypes__default["default"].bool,
+  enableExperimentalFocusWrapWithoutSentinels: PropTypes__default["default"].bool
 };
 
 /**
@@ -107,7 +126,8 @@ function useChangedValue(value, compare, callback) {
  */
 function useFeatureFlag(flag) {
   const scope = React.useContext(FeatureFlagContext);
-  return scope.enabled(flag);
+  //updated to return false for undefined flags
+  return scope.enabled(flag) ?? false;
 }
 
 /**

package/lib/components/FluidNumberInput/FluidNumberInput.Skeleton.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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.
+ */
+import React from 'react';
+export interface FluidNumberInputSkeletonProps {
+    /**
+     * Specify an optional className to be applied to the outer FluidForm wrapper
+     */
+    className?: string;
+}
+declare const FluidNumberInputSkeleton: React.FC<FluidNumberInputSkeletonProps>;
+export default FluidNumberInputSkeleton;

package/lib/components/FluidNumberInput/FluidNumberInput.d.ts

@@ -0,0 +1,95 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * 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 from 'react';
+export interface FluidNumberInputProps {
+    /**
+     * `true` to allow empty string.
+     */
+    allowEmpty?: boolean;
+    /**
+     * Specify an optional className to be applied to the wrapper node
+     */
+    className?: string;
+    /**
+     * Optional starting value for uncontrolled state
+     */
+    defaultValue?: number | string;
+    /**
+     * Specify if the wheel functionality for the input should be disabled, or not
+     */
+    disableWheel?: boolean;
+    /**
+     * Specify if the control should be disabled, or not
+     */
+    disabled?: boolean;
+    /**
+     * Provide a description for up/down icons that can be read by screen readers
+     */
+    iconDescription?: string;
+    /**
+     * Specify a custom `id` for the input
+     */
+    id: string;
+    /**
+     * Specify if the currently value is invalid.
+     */
+    invalid?: boolean;
+    /**
+     * Message which is displayed if the value is invalid.
+     */
+    invalidText?: React.ReactNode;
+    /**
+     * Generic `label` that will be used as the textual representation of what
+     * this field is for
+     */
+    label?: React.ReactNode;
+    /**
+     * The maximum value.
+     */
+    max?: number;
+    /**
+     * The minimum value.
+     */
+    min?: number;
+    onChange?: (event: React.MouseEvent<HTMLButtonElement>, state: {
+        value: number | string;
+        direction: string;
+    }) => void;
+    /**
+     * Provide an optional function to be called when the up/down button is clicked
+     */
+    onClick?: (event: React.MouseEvent<HTMLElement>, state?: {
+        value: number | string;
+        direction: string;
+    }) => void;
+    /**
+     * Provide an optional function to be called when a key is pressed in the number input
+     */
+    onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;
+    /**
+     * Specify how much the values should increase/decrease upon clicking on up/down button
+     */
+    step?: number;
+    /**
+     * Provide custom text for the component for each translation id
+     */
+    translateWithId?: (id: string) => string;
+    /**
+     * Specify the value of the input
+     */
+    value?: number | string;
+    /**
+     * Specify whether the control is currently in warning state
+     */
+    warn?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in warning state
+     */
+    warnText?: React.ReactNode;
+}
+declare const FluidNumberInput: React.FC<FluidNumberInputProps>;
+export default FluidNumberInput;

package/lib/components/FluidNumberInput/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ */
+import { FluidNumberInputProps } from './FluidNumberInput';
+import { FluidNumberInputSkeletonProps } from './FluidNumberInput.Skeleton';
+export { type FluidNumberInputProps, type FluidNumberInputSkeletonProps };
+export { default, default as FluidNumberInput } from './FluidNumberInput';
+export { default as FluidNumberInputSkeleton } from './FluidNumberInput.Skeleton';

package/lib/components/FluidSearch/FluidSearch.Skeleton.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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.
+ */
+import React from 'react';
+export interface FluidSearchSkeletonProps {
+    /**
+     * Specify an optional className to be applied to the outer FluidForm wrapper
+     */
+    className?: string;
+}
+declare const FluidSearchSkeleton: React.FC<FluidSearchSkeletonProps>;
+export default FluidSearchSkeleton;

package/lib/components/FluidSearch/FluidSearch.Skeleton.js

@@ -22,7 +22,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-function FluidSearchSkeleton(_ref) {
+const FluidSearchSkeleton = _ref => {
   let {
     className,
     ...other
@@ -39,7 +39,7 @@ function FluidSearchSkeleton(_ref) {
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--skeleton ${prefix}--text-input`
   })));
-}
+};
 FluidSearchSkeleton.propTypes = {
   /**
    * Specify an optional className to be applied to the outer FluidForm wrapper

package/lib/components/FluidSearch/FluidSearch.d.ts

@@ -0,0 +1,73 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * 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 from 'react';
+export interface FluidSearchProps {
+    /**
+     * Specify an optional value for the `autocomplete` property on the underlying
+     * `<input>`, defaults to "off"
+     */
+    autoComplete?: string;
+    /**
+     * Specify an optional className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * Specify a label to be read by screen readers on the "close" button
+     */
+    closeButtonLabelText?: string;
+    /**
+     * Optionally provide the default value of the `<input>`
+     */
+    defaultValue?: string | number;
+    /**
+     * Specify whether the `<input>` should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify a custom `id` for the input
+     */
+    id?: string;
+    /**
+     * Provide the label text for the Search icon
+     */
+    labelText: React.ReactNode;
+    /**
+     * Optional callback called when the search value changes.
+     */
+    onChange?(e: {
+        target: HTMLInputElement;
+        type: 'change';
+    }): void;
+    /**
+     * Optional callback called when the search value is cleared.
+     */
+    onClear?: () => void;
+    /**
+     * Provide a handler that is invoked on the key down event for the input
+     */
+    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+    /**
+     * Provide an optional placeholder text for the Search.
+     * Note: if the label and placeholder differ,
+     * VoiceOver on Mac will read both
+     */
+    placeholder?: string;
+    /**
+     * Specify the role for the underlying `<input>`, defaults to `searchbox`
+     */
+    role?: string;
+    /**
+     * Optional prop to specify the type of the `<input>`
+     */
+    type?: string;
+    /**
+     * Specify the value of the `<input>`
+     */
+    value?: string | number;
+}
+declare const FluidSearch: React.FC<FluidSearchProps>;
+export default FluidSearch;

package/lib/components/FluidSearch/FluidSearch.js

@@ -101,6 +101,5 @@ FluidSearch.propTypes = {
    */
   value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
 };
-var FluidSearch$1 = FluidSearch;
 
-exports["default"] = FluidSearch$1;
+exports["default"] = FluidSearch;

package/lib/components/FluidSearch/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ */
+import { FluidSearchProps } from './FluidSearch';
+import { FluidSearchSkeletonProps } from './FluidSearch.Skeleton';
+export { default, default as FluidSearch } from './FluidSearch';
+export { type FluidSearchProps, type FluidSearchSkeletonProps };
+export { default as FluidSearchSkeleton } from './FluidSearch.Skeleton';

package/lib/components/FluidSelect/FluidSelect.Skeleton.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * 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 from 'react';
+export interface FluidSelectSkeletonProps {
+    /**
+     * Specify an optional className to add.
+     */
+    className?: string;
+}
+declare const FluidSelectSkeleton: React.FC<FluidSelectSkeletonProps>;
+export default FluidSelectSkeleton;

package/lib/components/FluidSelect/FluidSelect.Skeleton.js

@@ -44,6 +44,5 @@ FluidSelectSkeleton.propTypes = {
    */
   className: PropTypes__default["default"].string
 };
-var FluidSelectSkeleton$1 = FluidSelectSkeleton;
 
-exports["default"] = FluidSelectSkeleton$1;
+exports["default"] = FluidSelectSkeleton;

package/lib/components/FluidSelect/FluidSelect.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * 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 from 'react';
+export interface FluidSelectProps {
+    /**
+     * Provide the contents of your Select
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be applied to the node containing the label and the select box
+     */
+    className?: string;
+    /**
+     * Optionally provide the default value of the `<select>`
+     */
+    defaultValue?: any;
+    /**
+     * Specify whether the control is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify a custom `id` for the `<select>`
+     */
+    id: string;
+    /**
+     * Specify if the currently value is invalid.
+     */
+    invalid?: boolean;
+    /**
+     * Message which is displayed if the value is invalid.
+     */
+    invalidText?: React.ReactNode;
+    /**
+     * Provide label text to be read by screen readers when interacting with the
+     * control
+     */
+    labelText?: React.ReactNode;
+    /**
+     * Provide an optional `onChange` hook that is called each time the value of
+     * the underlying `<input>` changes
+     */
+    onChange?: React.ChangeEventHandler<HTMLSelectElement>;
+    /**
+     * Specify whether the control is currently in warning state
+     */
+    warn?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in warning state
+     */
+    warnText?: React.ReactNode;
+}
+declare const FluidSelect: React.ForwardRefExoticComponent<FluidSelectProps & React.RefAttributes<HTMLSelectElement>>;
+export default FluidSelect;

package/lib/components/FluidSelect/FluidSelect.js

@@ -89,6 +89,5 @@ FluidSelect.propTypes = {
    */
   warnText: PropTypes__default["default"].node
 };
-var FluidSelect$1 = FluidSelect;
 
-exports["default"] = FluidSelect$1;
+exports["default"] = FluidSelect;

package/lib/components/FluidSelect/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * 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 FluidSelect from './FluidSelect';
+import FluidSelectSkeletonProps from './FluidSelect.Skeleton';
+import FluidSelectProps from './FluidSelect.Skeleton';
+export type { FluidSelectSkeletonProps, FluidSelectProps };
+export default FluidSelect;
+export { FluidSelect };
+export { default as FluidSelectSkeleton } from './FluidSelect.Skeleton';

package/lib/components/FluidSelect/index.js

@@ -10,8 +10,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var FluidSelect = require('./FluidSelect.js');
+var FluidSelect_Skeleton = require('./FluidSelect.Skeleton.js');
 
 
 
 exports.FluidSelect = FluidSelect["default"];
 exports["default"] = FluidSelect["default"];
+exports.FluidSelectSkeleton = FluidSelect_Skeleton["default"];

package/lib/components/FluidTextArea/FluidTextArea.Skeleton.d.ts

@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types';
+export interface FluidTextAreaSkeletonProps {
+    /**
+     * Specify an optional className to be applied to the outer FluidForm wrapper
+     */
+    className?: string;
+}
+declare function FluidTextAreaSkeleton({ className, ...other }: {
+    [x: string]: any;
+    className: any;
+}): void;
+declare namespace FluidTextAreaSkeleton {
+    var propTypes: {
+        /**
+         * Specify an optional className to be applied to the outer FluidForm wrapper
+         */
+        className: PropTypes.Requireable<string>;
+    };
+}
+export default FluidTextAreaSkeleton;

package/lib/components/FluidTextArea/FluidTextArea.Skeleton.js

@@ -9,36 +9,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var PropTypes = require('prop-types');
-var React = require('react');
-var cx = require('classnames');
+require('react');
+require('classnames');
 var usePrefix = require('../../internal/usePrefix.js');
-var FormContext = require('../FluidForm/FormContext.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 function FluidTextAreaSkeleton(_ref) {
-  let {
-    className,
-    ...other
-  } = _ref;
-  const prefix = usePrefix.usePrefix();
-  return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {
-    value: {
-      isFluid: true
-    }
-  }, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
-    className: cx__default["default"](`${prefix}--form-item ${prefix}--text-area--fluid__skeleton`, className)
-  }, other), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: `${prefix}--label ${prefix}--skeleton`
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${prefix}--skeleton ${prefix}--text-area`
-  })));
+  usePrefix.usePrefix();
 }
 FluidTextAreaSkeleton.propTypes = {
   /**