@carbon/react 1.27.0 → 1.28.0-rc.0

package/es/components/FileUploader/FileUploaderButton.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default, { useState, useRef } from 'react';
@@ -17,51 +17,39 @@ import deprecate from '../../prop-types/deprecate.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 
-var _excluded = ["accept", "buttonKind", "className", "disabled", "disableLabelChanges", "id", "labelText", "multiple", "onChange", "name", "size", "innerRef"];
-
 function noop() {}
 
 function FileUploaderButton(_ref) {
-  var _cx;
-
-  var accept = _ref.accept,
-      _ref$buttonKind = _ref.buttonKind,
-      buttonKind = _ref$buttonKind === void 0 ? 'primary' : _ref$buttonKind,
-      className = _ref.className,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$disableLabelChan = _ref.disableLabelChanges,
-      disableLabelChanges = _ref$disableLabelChan === void 0 ? false : _ref$disableLabelChan,
-      id = _ref.id,
-      _ref$labelText = _ref.labelText,
-      ownerLabelText = _ref$labelText === void 0 ? 'Add file' : _ref$labelText,
-      _ref$multiple = _ref.multiple,
-      multiple = _ref$multiple === void 0 ? false : _ref$multiple,
-      _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? noop : _ref$onChange,
-      name = _ref.name,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'md' : _ref$size,
-      innerRef = _ref.innerRef,
-      other = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
-
-  var _useState = useState(ownerLabelText),
-      _useState2 = _slicedToArray(_useState, 2),
-      labelText = _useState2[0],
-      setLabelText = _useState2[1];
-
-  var _useState3 = useState(ownerLabelText),
-      _useState4 = _slicedToArray(_useState3, 2),
-      prevOwnerLabelText = _useState4[0],
-      setPrevOwnerLabelText = _useState4[1];
-
-  var _useRef = useRef(id || uniqueId()),
-      inputId = _useRef.current;
-
-  var inputNode = useRef(null);
-  var classes = cx("".concat(prefix, "--btn"), className, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--btn--").concat(buttonKind), buttonKind), _defineProperty(_cx, "".concat(prefix, "--btn--disabled"), disabled), _defineProperty(_cx, "".concat(prefix, "--btn--md"), size === 'field' || size === 'md'), _defineProperty(_cx, "".concat(prefix, "--btn--sm"), size === 'small' || size === 'sm'), _cx)); // Adjust label text state based on changes to the labelText prop
+  let {
+    accept,
+    buttonKind = 'primary',
+    className,
+    disabled = false,
+    disableLabelChanges = false,
+    id,
+    labelText: ownerLabelText = 'Add file',
+    multiple = false,
+    onChange = noop,
+    name,
+    size = 'md',
+    // eslint-disable-next-line react/prop-types
+    innerRef,
+    ...other
+  } = _ref;
+  const prefix = usePrefix();
+  const [labelText, setLabelText] = useState(ownerLabelText);
+  const [prevOwnerLabelText, setPrevOwnerLabelText] = useState(ownerLabelText);
+  const {
+    current: inputId
+  } = useRef(id || uniqueId());
+  const inputNode = useRef(null);
+  const classes = cx(`${prefix}--btn`, className, {
+    [`${prefix}--btn--${buttonKind}`]: buttonKind,
+    [`${prefix}--btn--disabled`]: disabled,
+    // V11: remove field, small
+    [`${prefix}--btn--md`]: size === 'field' || size === 'md',
+    [`${prefix}--btn--sm`]: size === 'small' || size === 'sm'
+  }); // Adjust label text state based on changes to the labelText prop
 
   if (ownerLabelText !== prevOwnerLabelText) {
     setLabelText(ownerLabelText);
@@ -82,12 +70,12 @@ function FileUploaderButton(_ref) {
   }
 
   function handleOnChange(event) {
-    var files = event.target.files;
-    var length = event.target.files.length;
+    const files = event.target.files;
+    const length = event.target.files.length;
 
     if (files && !disableLabelChanges) {
       if (length > 1) {
-        setLabelText("".concat(length, " files"));
+        setLabelText(`${length} files`);
       } else if (length === 1) {
         setLabelText(files[0].name);
       }
@@ -103,11 +91,11 @@ function FileUploaderButton(_ref) {
     onClick: onClick,
     onKeyDown: onKeyDown
   }, other), labelText), /*#__PURE__*/React__default.createElement("label", {
-    className: "".concat(prefix, "--visually-hidden"),
+    className: `${prefix}--visually-hidden`,
     ref: innerRef,
     htmlFor: inputId
   }, /*#__PURE__*/React__default.createElement("span", null, labelText)), /*#__PURE__*/React__default.createElement("input", {
-    className: "".concat(prefix, "--visually-hidden"),
+    className: `${prefix}--visually-hidden`,
     ref: inputNode,
     id: inputId,
     disabled: disabled,

package/es/components/FileUploader/FileUploaderDropContainer.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -16,63 +16,59 @@ import deprecate from '../../prop-types/deprecate.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 
-var _excluded = ["accept", "className", "id", "disabled", "labelText", "multiple", "name", "onAddFiles", "onClick", "pattern", "innerRef"];
-
 function FileUploaderDropContainer(_ref) {
-  var _classNames;
-
-  var accept = _ref.accept,
-      className = _ref.className,
-      id = _ref.id,
-      disabled = _ref.disabled,
-      labelText = _ref.labelText,
-      multiple = _ref.multiple,
-      name = _ref.name,
-      onAddFiles = _ref.onAddFiles,
-      onClick = _ref.onClick,
-      pattern = _ref.pattern,
-      innerRef = _ref.innerRef,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
-  var inputRef = useRef(null);
-
-  var _useRef = useRef(id || uniqueId()),
-      uid = _useRef.current;
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isActive = _useState2[0],
-      setActive = _useState2[1];
-
-  var dropareaClasses = cx("".concat(prefix, "--file__drop-container"), "".concat(prefix, "--file-browse-btn"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--file__drop-container--drag-over"), isActive), _defineProperty(_classNames, "".concat(prefix, "--file-browse-btn--disabled"), disabled), _defineProperty(_classNames, className, className), _classNames));
+  let {
+    accept,
+    className,
+    id,
+    disabled,
+    labelText,
+    multiple,
+    name,
+    onAddFiles,
+    onClick,
+    pattern,
+    // eslint-disable-next-line react/prop-types
+    innerRef,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
+  const inputRef = useRef(null);
+  const {
+    current: uid
+  } = useRef(id || uniqueId());
+  const [isActive, setActive] = useState(false);
+  const dropareaClasses = cx(`${prefix}--file__drop-container`, `${prefix}--file-browse-btn`, {
+    [`${prefix}--file__drop-container--drag-over`]: isActive,
+    [`${prefix}--file-browse-btn--disabled`]: disabled,
+    [className]: className
+  });
   /**
    * Filters the array of added files based on file type restrictions
    * @param {Event} event - Event object, used to get the list of files added
    */
 
   function validateFiles(event) {
-    var transferredFiles = event.type === 'drop' ? _toConsumableArray(event.dataTransfer.files) : _toConsumableArray(event.target.files);
+    const transferredFiles = event.type === 'drop' ? [...event.dataTransfer.files] : [...event.target.files];
 
     if (!accept.length) {
       return transferredFiles;
     }
 
-    var acceptedTypes = new Set(accept);
-    return transferredFiles.reduce(function (acc, curr) {
-      var name = curr.name,
-          _curr$type = curr.type,
-          mimeType = _curr$type === void 0 ? '' : _curr$type;
-      var fileExtensionRegExp = new RegExp(pattern, 'i');
-      var hasFileExtension = fileExtensionRegExp.test(name);
+    const acceptedTypes = new Set(accept);
+    return transferredFiles.reduce((acc, curr) => {
+      const {
+        name,
+        type: mimeType = ''
+      } = curr;
+      const fileExtensionRegExp = new RegExp(pattern, 'i');
+      const hasFileExtension = fileExtensionRegExp.test(name);
 
       if (!hasFileExtension) {
         return acc;
       }
 
-      var _name$match = name.match(fileExtensionRegExp),
-          _name$match2 = _slicedToArray(_name$match, 1),
-          fileExtension = _name$match2[0];
+      const [fileExtension] = name.match(fileExtensionRegExp);
 
       if (acceptedTypes.has(mimeType) || acceptedTypes.has(fileExtension.toLowerCase())) {
         return acc.concat([curr]);
@@ -84,21 +80,21 @@ function FileUploaderDropContainer(_ref) {
   }
 
   function handleChange(event) {
-    var addedFiles = validateFiles(event);
+    const addedFiles = validateFiles(event);
     return onAddFiles(event, {
-      addedFiles: addedFiles
+      addedFiles
     });
   }
 
-  var handleClick = function handleClick() {
+  const handleClick = () => {
     if (!disabled) {
       inputRef.current.click();
     }
   };
 
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--file"),
-    onDragOver: function onDragOver(evt) {
+    className: `${prefix}--file`,
+    onDragOver: evt => {
       evt.stopPropagation();
       evt.preventDefault();
 
@@ -109,7 +105,7 @@ function FileUploaderDropContainer(_ref) {
       setActive(true);
       evt.dataTransfer.dropEffect = 'copy';
     },
-    onDragLeave: function onDragLeave(evt) {
+    onDragLeave: evt => {
       evt.stopPropagation();
       evt.preventDefault();
 
@@ -120,7 +116,7 @@ function FileUploaderDropContainer(_ref) {
       setActive(false);
       evt.dataTransfer.dropEffect = 'move';
     },
-    onDrop: function onDrop(evt) {
+    onDrop: evt => {
       evt.stopPropagation();
       evt.preventDefault();
 
@@ -135,7 +131,7 @@ function FileUploaderDropContainer(_ref) {
     type: "button",
     className: dropareaClasses,
     ref: innerRef,
-    onKeyDown: function onKeyDown(evt) {
+    onKeyDown: evt => {
       if (matches(evt, [Enter, Space])) {
         evt.preventDefault();
         inputRef.current.click();
@@ -144,11 +140,11 @@ function FileUploaderDropContainer(_ref) {
     onClick: composeEventHandlers([onClick, handleClick])
   }, rest), labelText), /*#__PURE__*/React__default.createElement("label", {
     htmlFor: uid,
-    className: "".concat(prefix, "--visually-hidden")
+    className: `${prefix}--visually-hidden`
   }, labelText), /*#__PURE__*/React__default.createElement("input", {
     type: "file",
     id: uid,
-    className: "".concat(prefix, "--file-input"),
+    className: `${prefix}--file-input`,
     ref: inputRef,
     tabIndex: "-1",
     disabled: disabled,
@@ -156,7 +152,7 @@ function FileUploaderDropContainer(_ref) {
     name: name,
     multiple: multiple,
     onChange: handleChange,
-    onClick: function onClick(evt) {
+    onClick: evt => {
       evt.target.value = null;
     }
   }));
@@ -229,7 +225,7 @@ FileUploaderDropContainer.propTypes = {
 FileUploaderDropContainer.defaultProps = {
   labelText: 'Add file',
   multiple: false,
-  onAddFiles: function onAddFiles() {},
+  onAddFiles: () => {},
   accept: [],
   pattern: '.[0-9a-z]+$'
 };

package/es/components/FileUploader/FileUploaderItem.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default, { useRef } from 'react';
@@ -16,42 +16,42 @@ import * as FeatureFlags from '@carbon/feature-flags';
 import { matches } from '../../internal/keyboard/match.js';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 
-var _excluded = ["uuid", "name", "status", "iconDescription", "onDelete", "invalid", "errorSubject", "errorBody", "size"];
-
 function FileUploaderItem(_ref) {
-  var _cx;
-
-  var uuid = _ref.uuid,
-      name = _ref.name,
-      status = _ref.status,
-      iconDescription = _ref.iconDescription,
-      onDelete = _ref.onDelete,
-      invalid = _ref.invalid,
-      errorSubject = _ref.errorSubject,
-      errorBody = _ref.errorBody,
-      size = _ref.size,
-      other = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
-
-  var _useRef = useRef(uuid || uniqueId()),
-      id = _useRef.current;
-
-  var classes = cx("".concat(prefix, "--file__selected-file"), (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--file__selected-file--invalid"), invalid), _defineProperty(_cx, "".concat(prefix, "--file__selected-file--md"), size === 'field' || size === 'md'), _defineProperty(_cx, "".concat(prefix, "--file__selected-file--sm"), size === 'small' || size === 'sm'), _cx));
+  let {
+    uuid,
+    name,
+    status,
+    iconDescription,
+    onDelete,
+    invalid,
+    errorSubject,
+    errorBody,
+    size,
+    ...other
+  } = _ref;
+  const prefix = usePrefix();
+  const {
+    current: id
+  } = useRef(uuid || uniqueId());
+  const classes = cx(`${prefix}--file__selected-file`, {
+    [`${prefix}--file__selected-file--invalid`]: invalid,
+    [`${prefix}--file__selected-file--md`]: size === 'field' || size === 'md',
+    [`${prefix}--file__selected-file--sm`]: size === 'small' || size === 'sm'
+  });
   return /*#__PURE__*/React__default.createElement("span", _extends({
     className: classes
   }, other), /*#__PURE__*/React__default.createElement("p", {
-    className: "".concat(prefix, "--file-filename"),
+    className: `${prefix}--file-filename`,
     title: name,
     id: name
   }, name), /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(prefix, "--file__state-container")
+    className: `${prefix}--file__state-container`
   }, /*#__PURE__*/React__default.createElement(Filename, {
     name: name,
     iconDescription: iconDescription,
     status: status,
     invalid: invalid,
-    onKeyDown: function onKeyDown(evt) {
+    onKeyDown: evt => {
       if (matches(evt, [Enter, Space])) {
         if (status === 'edit') {
           evt.preventDefault();
@@ -61,7 +61,7 @@ function FileUploaderItem(_ref) {
         }
       }
     },
-    onClick: function onClick(evt) {
+    onClick: evt => {
       if (status === 'edit') {
         onDelete(evt, {
           uuid: id
@@ -69,11 +69,11 @@ function FileUploaderItem(_ref) {
       }
     }
   })), invalid && errorSubject && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--form-requirement")
+    className: `${prefix}--form-requirement`
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--form-requirement__title")
+    className: `${prefix}--form-requirement__title`
   }, errorSubject), errorBody && /*#__PURE__*/React__default.createElement("p", {
-    className: "".concat(prefix, "--form-requirement__supplement")
+    className: `${prefix}--form-requirement__supplement`
   }, errorBody)));
 }
 
@@ -127,7 +127,7 @@ FileUploaderItem.propTypes = {
 };
 FileUploaderItem.defaultProps = {
   status: 'uploading',
-  onDelete: function onDelete() {}
+  onDelete: () => {}
 };
 
 export { FileUploaderItem as default };

package/es/components/FileUploader/Filename.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { CheckmarkFilled, WarningFilled, Close } from '@carbon/icons-react';
 import PropTypes from 'prop-types';
 import React__default from 'react';
@@ -14,16 +14,15 @@ import { usePrefix } from '../../internal/usePrefix.js';
 
 var _Close;
 
-var _excluded = ["iconDescription", "status", "invalid", "name"];
-
 function Filename(_ref) {
-  var iconDescription = _ref.iconDescription,
-      status = _ref.status,
-      invalid = _ref.invalid,
-      name = _ref.name,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
+  let {
+    iconDescription,
+    status,
+    invalid,
+    name,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
 
   switch (status) {
     case 'uploading':
@@ -35,17 +34,17 @@ function Filename(_ref) {
 
     case 'edit':
       return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, invalid && /*#__PURE__*/React__default.createElement(WarningFilled, {
-        className: "".concat(prefix, "--file-invalid")
+        className: `${prefix}--file-invalid`
       }), /*#__PURE__*/React__default.createElement("button", _extends({
-        "aria-label": "".concat(iconDescription, " - ").concat(name),
-        className: "".concat(prefix, "--file-close"),
+        "aria-label": `${iconDescription} - ${name}`,
+        className: `${prefix}--file-close`,
         type: "button"
       }, rest), _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, null))));
 
     case 'complete':
       return /*#__PURE__*/React__default.createElement(CheckmarkFilled, _extends({
         "aria-label": iconDescription,
-        className: "".concat(prefix, "--file-complete")
+        className: `${prefix}--file-complete`
       }, rest, {
         tabIndex: null
       }), iconDescription && /*#__PURE__*/React__default.createElement("title", null, iconDescription));

package/es/components/FluidComboBox/FluidComboBox.Skeleton.js

@@ -5,28 +5,27 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var _excluded = ["className"];
-
-var FluidComboBoxSkeleton = function FluidComboBoxSkeleton(_ref) {
-  var className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
-  var wrapperClasses = cx(className, "".concat(prefix, "--skeleton"), "".concat(prefix, "--list-box"));
+const FluidComboBoxSkeleton = _ref => {
+  let {
+    className,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
+  const wrapperClasses = cx(className, `${prefix}--skeleton`, `${prefix}--list-box`);
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--list-box__wrapper--fluid")
+    className: `${prefix}--list-box__wrapper--fluid`
   }, /*#__PURE__*/React__default.createElement("div", _extends({
     className: wrapperClasses
   }, rest), /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(prefix, "--list-box__label")
+    className: `${prefix}--list-box__label`
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--list-box__field")
+    className: `${prefix}--list-box__field`
   })));
 };
 

package/es/components/FluidComboBox/FluidComboBox.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
@@ -13,14 +13,16 @@ import ComboBox from '../ComboBox/ComboBox.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 
-var _excluded = ["className", "isCondensed"];
-var FluidComboBox = /*#__PURE__*/React__default.forwardRef(function FluidComboBox(_ref, ref) {
-  var className = _ref.className,
-      isCondensed = _ref.isCondensed,
-      other = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
-  var classNames = cx("".concat(prefix, "--list-box__wrapper--fluid"), className, _defineProperty({}, "".concat(prefix, "--list-box__wrapper--fluid--condensed"), isCondensed));
+const FluidComboBox = /*#__PURE__*/React__default.forwardRef(function FluidComboBox(_ref, ref) {
+  let {
+    className,
+    isCondensed,
+    ...other
+  } = _ref;
+  const prefix = usePrefix();
+  const classNames = cx(`${prefix}--list-box__wrapper--fluid`, className, {
+    [`${prefix}--list-box__wrapper--fluid--condensed`]: isCondensed
+  });
   return /*#__PURE__*/React__default.createElement(FormContext.Provider, {
     value: {
       isFluid: true

package/es/components/FluidDatePicker/FluidDatePicker.Skeleton.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
@@ -13,16 +13,16 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { Calendar } from '@carbon/icons-react';
 
-var _excluded = ["className", "datePickerType"];
-
 function FluidDatePickerSkeleton(_ref) {
-  var className = _ref.className,
-      _ref$datePickerType = _ref.datePickerType,
-      datePickerType = _ref$datePickerType === void 0 ? 'single' : _ref$datePickerType,
-      other = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
-  var classNames = cx(className, "".concat(prefix, "--form-item ").concat(prefix, "--date-picker--fluid__skeleton"), _defineProperty({}, "".concat(prefix, "--date-picker--fluid__skeleton--range"), datePickerType === 'range'));
+  let {
+    className,
+    datePickerType = 'single',
+    ...other
+  } = _ref;
+  const prefix = usePrefix();
+  const classNames = cx(className, `${prefix}--form-item ${prefix}--date-picker--fluid__skeleton`, {
+    [`${prefix}--date-picker--fluid__skeleton--range`]: datePickerType === 'range'
+  });
   return /*#__PURE__*/React__default.createElement(FormContext.Provider, {
     value: {
       isFluid: true
@@ -30,23 +30,23 @@ function FluidDatePickerSkeleton(_ref) {
   }, /*#__PURE__*/React__default.createElement("div", _extends({
     className: classNames
   }, other), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--date-picker--fluid__skeleton--container")
+    className: `${prefix}--date-picker--fluid__skeleton--container`
   }, /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(prefix, "--label ").concat(prefix, "--skeleton")
+    className: `${prefix}--label ${prefix}--skeleton`
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--skeleton ").concat(prefix, "--text-input")
+    className: `${prefix}--skeleton ${prefix}--text-input`
   }), datePickerType !== 'simple' && /*#__PURE__*/React__default.createElement(Calendar, {
-    className: "".concat(prefix, "--date-picker__icon"),
+    className: `${prefix}--date-picker__icon`,
     role: "img",
     "aria-hidden": "true"
   })), datePickerType === 'range' && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--date-picker--fluid__skeleton--container")
+    className: `${prefix}--date-picker--fluid__skeleton--container`
   }, /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(prefix, "--label ").concat(prefix, "--skeleton")
+    className: `${prefix}--label ${prefix}--skeleton`
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--skeleton ").concat(prefix, "--text-input")
+    className: `${prefix}--skeleton ${prefix}--text-input`
   }), /*#__PURE__*/React__default.createElement(Calendar, {
-    className: "".concat(prefix, "--date-picker__icon"),
+    className: `${prefix}--date-picker__icon`,
     role: "img",
     "aria-hidden": "true"
   }))));