@carbon/react 1.27.0 → 1.28.0

package/lib/components/FileUploader/FileUploaderButton.js

@@ -46,51 +46,39 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
 
-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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-
-  var _useState = React.useState(ownerLabelText),
-      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-      labelText = _useState2[0],
-      setLabelText = _useState2[1];
-
-  var _useState3 = React.useState(ownerLabelText),
-      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-      prevOwnerLabelText = _useState4[0],
-      setPrevOwnerLabelText = _useState4[1];
-
-  var _useRef = React.useRef(id || uniqueId["default"]()),
-      inputId = _useRef.current;
-
-  var inputNode = React.useRef(null);
-  var classes = cx__default["default"]("".concat(prefix, "--btn"), className, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--btn--").concat(buttonKind), buttonKind), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--btn--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--btn--md"), size === 'field' || size === 'md'), _rollupPluginBabelHelpers.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.usePrefix();
+  const [labelText, setLabelText] = React.useState(ownerLabelText);
+  const [prevOwnerLabelText, setPrevOwnerLabelText] = React.useState(ownerLabelText);
+  const {
+    current: inputId
+  } = React.useRef(id || uniqueId["default"]());
+  const inputNode = React.useRef(null);
+  const classes = cx__default["default"](`${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);
@@ -111,12 +99,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);
       }
@@ -132,11 +120,11 @@ function FileUploaderButton(_ref) {
     onClick: onClick,
     onKeyDown: onKeyDown
   }, other), labelText), /*#__PURE__*/React__default["default"].createElement("label", {
-    className: "".concat(prefix, "--visually-hidden"),
+    className: `${prefix}--visually-hidden`,
     ref: innerRef,
     htmlFor: inputId
   }, /*#__PURE__*/React__default["default"].createElement("span", null, labelText)), /*#__PURE__*/React__default["default"].createElement("input", {
-    className: "".concat(prefix, "--visually-hidden"),
+    className: `${prefix}--visually-hidden`,
     ref: inputNode,
     id: inputId,
     disabled: disabled,

package/lib/components/FileUploader/FileUploaderDropContainer.js

@@ -26,63 +26,59 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var inputRef = React.useRef(null);
-
-  var _useRef = React.useRef(id || uniqueId["default"]()),
-      uid = _useRef.current;
-
-  var _useState = React.useState(false),
-      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-      isActive = _useState2[0],
-      setActive = _useState2[1];
-
-  var dropareaClasses = cx__default["default"]("".concat(prefix, "--file__drop-container"), "".concat(prefix, "--file-browse-btn"), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--file__drop-container--drag-over"), isActive), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--file-browse-btn--disabled"), disabled), _rollupPluginBabelHelpers.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.usePrefix();
+  const inputRef = React.useRef(null);
+  const {
+    current: uid
+  } = React.useRef(id || uniqueId["default"]());
+  const [isActive, setActive] = React.useState(false);
+  const dropareaClasses = cx__default["default"](`${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' ? _rollupPluginBabelHelpers.toConsumableArray(event.dataTransfer.files) : _rollupPluginBabelHelpers.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 = _rollupPluginBabelHelpers.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]);
@@ -94,21 +90,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["default"].createElement("div", {
-    className: "".concat(prefix, "--file"),
-    onDragOver: function onDragOver(evt) {
+    className: `${prefix}--file`,
+    onDragOver: evt => {
       evt.stopPropagation();
       evt.preventDefault();
 
@@ -119,7 +115,7 @@ function FileUploaderDropContainer(_ref) {
       setActive(true);
       evt.dataTransfer.dropEffect = 'copy';
     },
-    onDragLeave: function onDragLeave(evt) {
+    onDragLeave: evt => {
       evt.stopPropagation();
       evt.preventDefault();
 
@@ -130,7 +126,7 @@ function FileUploaderDropContainer(_ref) {
       setActive(false);
       evt.dataTransfer.dropEffect = 'move';
     },
-    onDrop: function onDrop(evt) {
+    onDrop: evt => {
       evt.stopPropagation();
       evt.preventDefault();
 
@@ -145,7 +141,7 @@ function FileUploaderDropContainer(_ref) {
     type: "button",
     className: dropareaClasses,
     ref: innerRef,
-    onKeyDown: function onKeyDown(evt) {
+    onKeyDown: evt => {
       if (match.matches(evt, [keys.Enter, keys.Space])) {
         evt.preventDefault();
         inputRef.current.click();
@@ -154,11 +150,11 @@ function FileUploaderDropContainer(_ref) {
     onClick: events.composeEventHandlers([onClick, handleClick])
   }, rest), labelText), /*#__PURE__*/React__default["default"].createElement("label", {
     htmlFor: uid,
-    className: "".concat(prefix, "--visually-hidden")
+    className: `${prefix}--visually-hidden`
   }, labelText), /*#__PURE__*/React__default["default"].createElement("input", {
     type: "file",
     id: uid,
-    className: "".concat(prefix, "--file-input"),
+    className: `${prefix}--file-input`,
     ref: inputRef,
     tabIndex: "-1",
     disabled: disabled,
@@ -166,7 +162,7 @@ function FileUploaderDropContainer(_ref) {
     name: name,
     multiple: multiple,
     onChange: handleChange,
-    onClick: function onClick(evt) {
+    onClick: evt => {
       evt.target.value = null;
     }
   }));
@@ -239,7 +235,7 @@ FileUploaderDropContainer.propTypes = {
 FileUploaderDropContainer.defaultProps = {
   labelText: 'Add file',
   multiple: false,
-  onAddFiles: function onAddFiles() {},
+  onAddFiles: () => {},
   accept: [],
   pattern: '.[0-9a-z]+$'
 };

package/lib/components/FileUploader/FileUploaderItem.js

@@ -45,42 +45,42 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
 
-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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-
-  var _useRef = React.useRef(uuid || uniqueId["default"]()),
-      id = _useRef.current;
-
-  var classes = cx__default["default"]("".concat(prefix, "--file__selected-file"), (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--file__selected-file--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--file__selected-file--md"), size === 'field' || size === 'md'), _rollupPluginBabelHelpers.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.usePrefix();
+  const {
+    current: id
+  } = React.useRef(uuid || uniqueId["default"]());
+  const classes = cx__default["default"](`${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["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({
     className: classes
   }, other), /*#__PURE__*/React__default["default"].createElement("p", {
-    className: "".concat(prefix, "--file-filename"),
+    className: `${prefix}--file-filename`,
     title: name,
     id: name
   }, name), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "".concat(prefix, "--file__state-container")
+    className: `${prefix}--file__state-container`
   }, /*#__PURE__*/React__default["default"].createElement(Filename["default"], {
     name: name,
     iconDescription: iconDescription,
     status: status,
     invalid: invalid,
-    onKeyDown: function onKeyDown(evt) {
+    onKeyDown: evt => {
       if (match.matches(evt, [keys.Enter, keys.Space])) {
         if (status === 'edit') {
           evt.preventDefault();
@@ -90,7 +90,7 @@ function FileUploaderItem(_ref) {
         }
       }
     },
-    onClick: function onClick(evt) {
+    onClick: evt => {
       if (status === 'edit') {
         onDelete(evt, {
           uuid: id
@@ -98,11 +98,11 @@ function FileUploaderItem(_ref) {
       }
     }
   })), invalid && errorSubject && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--form-requirement")
+    className: `${prefix}--form-requirement`
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--form-requirement__title")
+    className: `${prefix}--form-requirement__title`
   }, errorSubject), errorBody && /*#__PURE__*/React__default["default"].createElement("p", {
-    className: "".concat(prefix, "--form-requirement__supplement")
+    className: `${prefix}--form-requirement__supplement`
   }, errorBody)));
 }
 
@@ -156,7 +156,7 @@ FileUploaderItem.propTypes = {
 };
 FileUploaderItem.defaultProps = {
   status: 'uploading',
-  onDelete: function onDelete() {}
+  onDelete: () => {}
 };
 
 exports["default"] = FileUploaderItem;

package/lib/components/FileUploader/Filename.js

@@ -23,16 +23,15 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
+  let {
+    iconDescription,
+    status,
+    invalid,
+    name,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
 
   switch (status) {
     case 'uploading':
@@ -44,17 +43,17 @@ function Filename(_ref) {
 
     case 'edit':
       return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, invalid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
-        className: "".concat(prefix, "--file-invalid")
+        className: `${prefix}--file-invalid`
       }), /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["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["default"].createElement(iconsReact.Close, null))));
 
     case 'complete':
       return /*#__PURE__*/React__default["default"].createElement(iconsReact.CheckmarkFilled, _rollupPluginBabelHelpers["extends"]({
         "aria-label": iconDescription,
-        className: "".concat(prefix, "--file-complete")
+        className: `${prefix}--file-complete`
       }, rest, {
         tabIndex: null
       }), iconDescription && /*#__PURE__*/React__default["default"].createElement("title", null, iconDescription));

package/lib/components/FluidComboBox/FluidComboBox.Skeleton.js

@@ -21,22 +21,21 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["className"];
-
-var FluidComboBoxSkeleton = function FluidComboBoxSkeleton(_ref) {
-  var className = _ref.className,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var wrapperClasses = cx__default["default"](className, "".concat(prefix, "--skeleton"), "".concat(prefix, "--list-box"));
+const FluidComboBoxSkeleton = _ref => {
+  let {
+    className,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const wrapperClasses = cx__default["default"](className, `${prefix}--skeleton`, `${prefix}--list-box`);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--list-box__wrapper--fluid")
+    className: `${prefix}--list-box__wrapper--fluid`
   }, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: wrapperClasses
   }, rest), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "".concat(prefix, "--list-box__label")
+    className: `${prefix}--list-box__label`
   }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--list-box__field")
+    className: `${prefix}--list-box__field`
   })));
 };
 

package/lib/components/FluidComboBox/FluidComboBox.js

@@ -23,14 +23,16 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["className", "isCondensed"];
-var FluidComboBox = /*#__PURE__*/React__default["default"].forwardRef(function FluidComboBox(_ref, ref) {
-  var className = _ref.className,
-      isCondensed = _ref.isCondensed,
-      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var classNames = cx__default["default"]("".concat(prefix, "--list-box__wrapper--fluid"), className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--list-box__wrapper--fluid--condensed"), isCondensed));
+const FluidComboBox = /*#__PURE__*/React__default["default"].forwardRef(function FluidComboBox(_ref, ref) {
+  let {
+    className,
+    isCondensed,
+    ...other
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const classNames = cx__default["default"](`${prefix}--list-box__wrapper--fluid`, className, {
+    [`${prefix}--list-box__wrapper--fluid--condensed`]: isCondensed
+  });
   return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {
     value: {
       isFluid: true

package/lib/components/FluidDatePicker/FluidDatePicker.Skeleton.js

@@ -23,16 +23,16 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["className", "datePickerType"];
-
 function FluidDatePickerSkeleton(_ref) {
-  var className = _ref.className,
-      _ref$datePickerType = _ref.datePickerType,
-      datePickerType = _ref$datePickerType === void 0 ? 'single' : _ref$datePickerType,
-      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var classNames = cx__default["default"](className, "".concat(prefix, "--form-item ").concat(prefix, "--date-picker--fluid__skeleton"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--date-picker--fluid__skeleton--range"), datePickerType === 'range'));
+  let {
+    className,
+    datePickerType = 'single',
+    ...other
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const classNames = cx__default["default"](className, `${prefix}--form-item ${prefix}--date-picker--fluid__skeleton`, {
+    [`${prefix}--date-picker--fluid__skeleton--range`]: datePickerType === 'range'
+  });
   return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {
     value: {
       isFluid: true
@@ -40,23 +40,23 @@ function FluidDatePickerSkeleton(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: classNames
   }, other), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--date-picker--fluid__skeleton--container")
+    className: `${prefix}--date-picker--fluid__skeleton--container`
   }, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "".concat(prefix, "--label ").concat(prefix, "--skeleton")
+    className: `${prefix}--label ${prefix}--skeleton`
   }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--skeleton ").concat(prefix, "--text-input")
+    className: `${prefix}--skeleton ${prefix}--text-input`
   }), datePickerType !== 'simple' && /*#__PURE__*/React__default["default"].createElement(iconsReact.Calendar, {
-    className: "".concat(prefix, "--date-picker__icon"),
+    className: `${prefix}--date-picker__icon`,
     role: "img",
     "aria-hidden": "true"
   })), datePickerType === 'range' && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--date-picker--fluid__skeleton--container")
+    className: `${prefix}--date-picker--fluid__skeleton--container`
   }, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "".concat(prefix, "--label ").concat(prefix, "--skeleton")
+    className: `${prefix}--label ${prefix}--skeleton`
   }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--skeleton ").concat(prefix, "--text-input")
+    className: `${prefix}--skeleton ${prefix}--text-input`
   }), /*#__PURE__*/React__default["default"].createElement(iconsReact.Calendar, {
-    className: "".concat(prefix, "--date-picker__icon"),
+    className: `${prefix}--date-picker__icon`,
     role: "img",
     "aria-hidden": "true"
   }))));

package/lib/components/FluidDatePicker/FluidDatePicker.js

@@ -14,6 +14,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
 var DatePicker = require('../DatePicker/DatePicker.js');
+require('../DatePicker/DatePicker.Skeleton.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var FormContext = require('../FluidForm/FormContext.js');
 
@@ -23,21 +24,24 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["className", "children", "invalid", "invalidText", "readOnly", "warn", "warnText"];
-var FluidDatePicker = /*#__PURE__*/React__default["default"].forwardRef(function FluidDatePicker(_ref, ref) {
-  var _classnames;
-
-  var className = _ref.className,
-      children = _ref.children,
-      invalid = _ref.invalid,
-      invalidText = _ref.invalidText,
-      readOnly = _ref.readOnly,
-      warn = _ref.warn,
-      warnText = _ref.warnText,
-      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var classNames = cx__default["default"](className, (_classnames = {}, _rollupPluginBabelHelpers.defineProperty(_classnames, "".concat(prefix, "--date-picker--fluid"), true), _rollupPluginBabelHelpers.defineProperty(_classnames, "".concat(prefix, "--date-picker--fluid--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_classnames, "".concat(prefix, "--date-picker--fluid--readonly"), readOnly), _rollupPluginBabelHelpers.defineProperty(_classnames, "".concat(prefix, "--date-picker--fluid--warn"), warn), _classnames));
+const FluidDatePicker = /*#__PURE__*/React__default["default"].forwardRef(function FluidDatePicker(_ref, ref) {
+  let {
+    className,
+    children,
+    invalid,
+    invalidText,
+    readOnly,
+    warn,
+    warnText,
+    ...other
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const classNames = cx__default["default"](className, {
+    [`${prefix}--date-picker--fluid`]: true,
+    [`${prefix}--date-picker--fluid--invalid`]: invalid,
+    [`${prefix}--date-picker--fluid--readonly`]: readOnly,
+    [`${prefix}--date-picker--fluid--warn`]: warn
+  });
   return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {
     value: {
       isFluid: true

package/lib/components/FluidDatePickerInput/FluidDatePickerInput.js

@@ -18,9 +18,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var FluidDatePickerInput = /*#__PURE__*/React__default["default"].forwardRef(function FluidDatePickerInput(_ref, ref) {
-  var other = _rollupPluginBabelHelpers["extends"]({}, _ref);
-
+const FluidDatePickerInput = /*#__PURE__*/React__default["default"].forwardRef(function FluidDatePickerInput(_ref, ref) {
+  let { ...other
+  } = _ref;
   return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {
     value: {
       isFluid: true