@carbon/react 1.27.0-rc.0 → 1.28.0-rc.0

package/es/components/DatePicker/plugins/appendToPlugin.js

@@ -9,49 +9,51 @@
  * @param {object} config Plugin configuration.
  * @returns {Plugin} A Flatpickr plugin to put adjust the position of calendar dropdown.
  */
-var carbonFlatpickrAppendToPlugin = (function (config) {
-  return function (fp) {
-    /**
-     * Adjusts the floating menu position after Flatpicker sets it.
-     */
-    var handlePreCalendarPosition = function handlePreCalendarPosition() {
-      Promise.resolve().then(function () {
-        var calendarContainer = fp.calendarContainer,
-            fpConfig = fp.config,
-            positionElement = fp._positionElement;
-        var appendTo = fpConfig.appendTo;
-
-        var _appendTo$getBounding = appendTo.getBoundingClientRect(),
-            containerLeft = _appendTo$getBounding.left,
-            containerTop = _appendTo$getBounding.top;
-
-        var _positionElement$getB = positionElement.getBoundingClientRect(),
-            refLeft = _positionElement$getB.left,
-            refBottom = _positionElement$getB.bottom;
-
-        if ((appendTo !== appendTo.ownerDocument.body || containerLeft !== 0 || containerTop !== 0) && appendTo.ownerDocument.defaultView.getComputedStyle(appendTo).getPropertyValue('position') === 'static') {
-          throw new Error('Floating menu container must not have `position:static`.');
-        } // `2` for negative margin on calendar dropdown
-
-
-        calendarContainer.style.top = "".concat(refBottom - containerTop + 2, "px");
-        calendarContainer.style.left = "".concat(refLeft - containerLeft, "px");
-      });
-    };
-    /**
-     * Registers this Flatpickr plugin.
-     */
-
-
-    var register = function register() {
-      fp.loadedPlugins.push('carbonFlatpickrAppendToPlugin');
-    };
-
-    return {
-      appendTo: config.appendTo,
-      onReady: register,
-      onPreCalendarPosition: handlePreCalendarPosition
-    };
+var carbonFlatpickrAppendToPlugin = (config => fp => {
+  /**
+   * Adjusts the floating menu position after Flatpicker sets it.
+   */
+  const handlePreCalendarPosition = () => {
+    Promise.resolve().then(() => {
+      const {
+        calendarContainer,
+        config: fpConfig,
+        _positionElement: positionElement
+      } = fp;
+      const {
+        appendTo
+      } = fpConfig;
+      const {
+        left: containerLeft,
+        top: containerTop
+      } = appendTo.getBoundingClientRect();
+      const {
+        left: refLeft,
+        bottom: refBottom
+      } = positionElement.getBoundingClientRect();
+
+      if ((appendTo !== appendTo.ownerDocument.body || containerLeft !== 0 || containerTop !== 0) && appendTo.ownerDocument.defaultView.getComputedStyle(appendTo).getPropertyValue('position') === 'static') {
+        throw new Error('Floating menu container must not have `position:static`.');
+      } // `2` for negative margin on calendar dropdown
+
+
+      calendarContainer.style.top = `${refBottom - containerTop + 2}px`;
+      calendarContainer.style.left = `${refLeft - containerLeft}px`;
+    });
+  };
+  /**
+   * Registers this Flatpickr plugin.
+   */
+
+
+  const register = () => {
+    fp.loadedPlugins.push('carbonFlatpickrAppendToPlugin');
+  };
+
+  return {
+    appendTo: config.appendTo,
+    onReady: register,
+    onPreCalendarPosition: handlePreCalendarPosition
   };
 });
 

package/es/components/DatePicker/plugins/fixEventsPlugin.js

@@ -13,130 +13,140 @@ import { Enter, ArrowLeft, ArrowRight, ArrowDown } from '../../../internal/keybo
  * @returns {Plugin} A Flatpickr plugin to fix Flatpickr's behavior of certain events.
  */
 
-var carbonFlatpickrFixEventsPlugin = (function (config) {
-  return function (fp) {
-    /**
-     * Handles `keydown` event.
-     */
-    var handleKeydown = function handleKeydown(event) {
-      var inputFrom = config.inputFrom,
-          inputTo = config.inputTo;
-      var target = event.target;
-
-      if (inputFrom === target || inputTo === target) {
-        if (match(event, Enter)) {
-          // Makes sure the hitting enter key picks up pending values of both `<input>`
-          // Workaround for: https://github.com/flatpickr/flatpickr/issues/1942
-          fp.setDate([inputFrom.value, inputTo && inputTo.value], true, fp.config.dateFormat);
-          event.stopPropagation();
-        } else if (match(event, ArrowLeft) || match(event, ArrowRight)) {
-          // Prevents Flatpickr code from canceling the event if left/right arrow keys are hit on `<input>`,
-          // so user can move the keyboard cursor for editing dates
-          // Workaround for: https://github.com/flatpickr/flatpickr/issues/1943
-          event.stopPropagation();
-        } else if (match(event, ArrowDown)) {
-          event.preventDefault();
-          fp.open();
-        }
+var carbonFlatpickrFixEventsPlugin = (config => fp => {
+  /**
+   * Handles `keydown` event.
+   */
+  const handleKeydown = event => {
+    const {
+      inputFrom,
+      inputTo
+    } = config;
+    const {
+      target
+    } = event;
+
+    if (inputFrom === target || inputTo === target) {
+      if (match(event, Enter)) {
+        // Makes sure the hitting enter key picks up pending values of both `<input>`
+        // Workaround for: https://github.com/flatpickr/flatpickr/issues/1942
+        fp.setDate([inputFrom.value, inputTo && inputTo.value], true, fp.config.dateFormat);
+        event.stopPropagation();
+      } else if (match(event, ArrowLeft) || match(event, ArrowRight)) {
+        // Prevents Flatpickr code from canceling the event if left/right arrow keys are hit on `<input>`,
+        // so user can move the keyboard cursor for editing dates
+        // Workaround for: https://github.com/flatpickr/flatpickr/issues/1943
+        event.stopPropagation();
+      } else if (match(event, ArrowDown)) {
+        event.preventDefault();
+        fp.open();
       }
-    };
-    /**
-     * Handles `blur` event.
-     *
-     * For whatever reason, manual changes within the `to` input do not update the
-     * calendar on blur. If a manual change is made within the input, this block will
-     * set the date again, triggering the calendar to update.
-     */
-
-
-    var handleBlur = function handleBlur(event) {
-      var inputFrom = config.inputFrom,
-          inputTo = config.inputTo,
-          lastStartValue = config.lastStartValue;
-      var target = event.target; // Only fall into this logic if the event is on the `to` input and there is a
-      // `to` date selected
-
-      if (inputTo === target && fp.selectedDates[1]) {
-        // Using getTime() enables the ability to more readily compare the date currently
-        // selected in the calendar and the date currently in the value of the input
-        var selectedToDate = new Date(fp.selectedDates[1]).setHours(0, 0, 0, 0);
-        var currentValueToDate = new Date(inputTo.value).setHours(0, 0, 0, 0); // The date should only be set if both dates are valid dates, and they don't match.
-        // When they don't match, this indiciates that the date selected in the calendar is stale,
-        // and the current value in the input should be set for the calendar to update.
-
-        if (selectedToDate && currentValueToDate && selectedToDate !== currentValueToDate) {
-          // Update the calendar with the value of the `to` date input
-          fp.setDate([inputFrom.value, inputTo && inputTo.value], true, fp.config.dateFormat);
-        }
-      } // save end date in calendar inmediately after it's been written down
+    }
+  };
+  /**
+   * Handles `blur` event.
+   *
+   * For whatever reason, manual changes within the `to` input do not update the
+   * calendar on blur. If a manual change is made within the input, this block will
+   * set the date again, triggering the calendar to update.
+   */
+
+
+  const handleBlur = event => {
+    const {
+      inputFrom,
+      inputTo,
+      lastStartValue
+    } = config;
+    const {
+      target
+    } = event; // Only fall into this logic if the event is on the `to` input and there is a
+    // `to` date selected
+
+    if (inputTo === target && fp.selectedDates[1]) {
+      // Using getTime() enables the ability to more readily compare the date currently
+      // selected in the calendar and the date currently in the value of the input
+      const selectedToDate = new Date(fp.selectedDates[1]).setHours(0, 0, 0, 0);
+      const currentValueToDate = new Date(inputTo.value).setHours(0, 0, 0, 0); // The date should only be set if both dates are valid dates, and they don't match.
+      // When they don't match, this indiciates that the date selected in the calendar is stale,
+      // and the current value in the input should be set for the calendar to update.
+
+      if (selectedToDate && currentValueToDate && selectedToDate !== currentValueToDate) {
+        // Update the calendar with the value of the `to` date input
+        fp.setDate([inputFrom.value, inputTo && inputTo.value], true, fp.config.dateFormat);
+      }
+    } // save end date in calendar inmediately after it's been written down
 
 
-      if (inputTo === target && fp.selectedDates.length === 1 && inputTo.value) {
-        var currentEndDate = new Date(inputTo.value);
+    if (inputTo === target && fp.selectedDates.length === 1 && inputTo.value) {
+      let currentEndDate = new Date(inputTo.value);
 
-        if (currentEndDate.toString() !== 'Invalid Date') {
-          fp.setDate([inputFrom.value, inputTo.value], true, fp.config.dateFormat);
-        }
-      } // overriding the flatpickr bug where the startDate gets deleted on blur
+      if (currentEndDate.toString() !== 'Invalid Date') {
+        fp.setDate([inputFrom.value, inputTo.value], true, fp.config.dateFormat);
+      }
+    } // overriding the flatpickr bug where the startDate gets deleted on blur
 
 
-      if (inputTo === target && !inputFrom.value && lastStartValue.current) {
-        var currentStartDate = new Date(lastStartValue.current);
+    if (inputTo === target && !inputFrom.value && lastStartValue.current) {
+      let currentStartDate = new Date(lastStartValue.current);
 
-        if (currentStartDate.toString() !== 'Invalid Date') {
-          inputFrom.value = lastStartValue.current;
+      if (currentStartDate.toString() !== 'Invalid Date') {
+        inputFrom.value = lastStartValue.current;
 
-          if (inputTo.value) {
-            fp.setDate([inputFrom.value, inputTo.value], true, fp.config.dateFormat);
-          }
+        if (inputTo.value) {
+          fp.setDate([inputFrom.value, inputTo.value], true, fp.config.dateFormat);
         }
       }
-    };
-    /**
-     * Releases event listeners used in this Flatpickr plugin.
-     */
-
-
-    var release = function release() {
-      var inputFrom = config.inputFrom,
-          inputTo = config.inputTo;
-
-      if (inputTo) {
-        inputTo.removeEventListener('keydown', handleKeydown, true);
-        inputTo.removeEventListener('blur', handleBlur, true);
-      }
+    }
+  };
+  /**
+   * Releases event listeners used in this Flatpickr plugin.
+   */
 
-      inputFrom.removeEventListener('keydown', handleKeydown, true);
-    };
-    /**
-     * Sets up event listeners used for this Flatpickr plugin.
-     */
 
+  const release = () => {
+    const {
+      inputFrom,
+      inputTo
+    } = config;
 
-    var init = function init() {
-      release();
-      var inputFrom = config.inputFrom,
-          inputTo = config.inputTo;
-      inputFrom.addEventListener('keydown', handleKeydown, true);
+    if (inputTo) {
+      inputTo.removeEventListener('keydown', handleKeydown, true);
+      inputTo.removeEventListener('blur', handleBlur, true);
+    }
 
-      if (inputTo) {
-        inputTo.addEventListener('keydown', handleKeydown, true);
-        inputTo.addEventListener('blur', handleBlur, true);
-      }
-    };
-    /**
-     * Registers this Flatpickr plugin.
-     */
+    inputFrom.removeEventListener('keydown', handleKeydown, true);
+  };
+  /**
+   * Sets up event listeners used for this Flatpickr plugin.
+   */
+
+
+  const init = () => {
+    release();
+    const {
+      inputFrom,
+      inputTo
+    } = config;
+    inputFrom.addEventListener('keydown', handleKeydown, true);
+
+    if (inputTo) {
+      inputTo.addEventListener('keydown', handleKeydown, true);
+      inputTo.addEventListener('blur', handleBlur, true);
+    }
+  };
+  /**
+   * Registers this Flatpickr plugin.
+   */
 
 
-    var register = function register() {
-      fp.loadedPlugins.push('carbonFlatpickrFixEventsPlugin');
-    };
+  const register = () => {
+    fp.loadedPlugins.push('carbonFlatpickrFixEventsPlugin');
+  };
 
-    return {
-      onReady: [register, init],
-      onDestroy: [release]
-    };
+  return {
+    onReady: [register, init],
+    onDestroy: [release]
   };
 });
 

package/es/components/DatePicker/plugins/rangePlugin.js

@@ -15,22 +15,26 @@ import rangePlugin from 'flatpickr/dist/plugins/rangePlugin';
  *   * A logic to ensure `fp.setDate()` call won't end up with "startDate to endDate" set to the first `<input>`
  */
 
-var carbonFlatpickrRangePlugin = (function (config) {
-  var factory = rangePlugin(Object.assign({
+var carbonFlatpickrRangePlugin = (config => {
+  const factory = rangePlugin(Object.assign({
     position: 'left'
   }, config));
-  return function (fp) {
-    var origSetDate = fp.setDate;
+  return fp => {
+    const origSetDate = fp.setDate;
 
-    var init = function init() {
+    const init = () => {
       fp.setDate = function setDate(dates, triggerChange, format) {
         origSetDate.call(this, dates, triggerChange, format); // If `triggerChange` is `true`, `onValueUpdate` Flatpickr event is fired
         // where Flatpickr's range plugin takes care of fixing the first `<input>`
 
         if (!triggerChange) {
-          var inputFrom = fp._input;
-          var inputTo = config.input;
-          [inputFrom, inputTo].forEach(function (input, i) {
+          const {
+            _input: inputFrom
+          } = fp;
+          const {
+            input: inputTo
+          } = config;
+          [inputFrom, inputTo].forEach((input, i) => {
             if (input) {
               input.value = !dates[i] ? '' : fp.formatDate(new Date(dates[i]), fp.config.dateFormat);
             }
@@ -39,11 +43,15 @@ var carbonFlatpickrRangePlugin = (function (config) {
       };
     };
 
-    var origRangePlugin = factory(fp);
-    var origOnReady = origRangePlugin.onReady;
+    const origRangePlugin = factory(fp);
+    const {
+      onReady: origOnReady
+    } = origRangePlugin;
     return Object.assign(origRangePlugin, {
       onReady: [init, origOnReady],
-      onPreCalendarPosition: function onPreCalendarPosition() {}
+
+      onPreCalendarPosition() {}
+
     });
   };
 });

package/es/components/DatePickerInput/DatePickerInput.js

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { WarningFilled, WarningAltFilled, Calendar } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
@@ -15,76 +14,84 @@ import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
 
-var _excluded = ["datePickerType", "disabled", "helperText", "hideLabel", "id", "invalid", "invalidText", "labelText", "onClick", "onChange", "pattern", "placeholder", "size", "type", "warn", "warnText"];
-var getInstanceId = setupGetInstanceId();
-var DatePickerInput = /*#__PURE__*/React__default.forwardRef(function DatePickerInput(props, ref) {
-  var _cx, _cx2, _cx4, _cx5;
-
-  var datePickerType = props.datePickerType,
-      _props$disabled = props.disabled,
-      disabled = _props$disabled === void 0 ? false : _props$disabled,
-      helperText = props.helperText,
-      hideLabel = props.hideLabel,
-      id = props.id,
-      _props$invalid = props.invalid,
-      invalid = _props$invalid === void 0 ? false : _props$invalid,
-      invalidText = props.invalidText,
-      labelText = props.labelText,
-      _props$onClick = props.onClick,
-      _onClick = _props$onClick === void 0 ? function () {} : _props$onClick,
-      _props$onChange = props.onChange,
-      _onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
-      _props$pattern = props.pattern,
-      pattern = _props$pattern === void 0 ? '\\d{1,2}\\/\\d{1,2}\\/\\d{4}' : _props$pattern,
-      placeholder = props.placeholder,
-      _props$size = props.size,
-      size = _props$size === void 0 ? 'md' : _props$size,
-      _props$type = props.type,
-      type = _props$type === void 0 ? 'text' : _props$type,
-      warn = props.warn,
-      warnText = props.warnText,
-      rest = _objectWithoutProperties(props, _excluded);
-
-  var prefix = usePrefix();
-
-  var _useContext = useContext(FormContext),
-      isFluid = _useContext.isFluid;
-
-  var datePickerInputInstanceId = getInstanceId();
-  var datePickerInputProps = {
-    id: id,
-    onChange: function onChange(event) {
+const getInstanceId = setupGetInstanceId();
+const DatePickerInput = /*#__PURE__*/React__default.forwardRef(function DatePickerInput(props, ref) {
+  const {
+    datePickerType,
+    disabled = false,
+    helperText,
+    hideLabel,
+    id,
+    invalid = false,
+    invalidText,
+    labelText,
+    onClick = () => {},
+    onChange = () => {},
+    pattern = '\\d{1,2}\\/\\d{1,2}\\/\\d{4}',
+    placeholder,
+    size = 'md',
+    type = 'text',
+    warn,
+    warnText,
+    ...rest
+  } = props;
+  const prefix = usePrefix();
+  const {
+    isFluid
+  } = useContext(FormContext);
+  const datePickerInputInstanceId = getInstanceId();
+  const datePickerInputProps = {
+    id,
+    onChange: event => {
       if (!disabled) {
-        _onChange(event);
+        onChange(event);
       }
     },
-    onClick: function onClick(event) {
+    onClick: event => {
       if (!disabled) {
-        _onClick(event);
+        onClick(event);
       }
     },
-    pattern: pattern,
-    placeholder: placeholder,
-    type: type
+    pattern,
+    placeholder,
+    type
   };
-  var wrapperClasses = cx("".concat(prefix, "--date-picker-input__wrapper"), (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--date-picker-input__wrapper--invalid"), invalid), _defineProperty(_cx, "".concat(prefix, "--date-picker-input__wrapper--warn"), warn), _cx));
-  var labelClasses = cx("".concat(prefix, "--label"), (_cx2 = {}, _defineProperty(_cx2, "".concat(prefix, "--visually-hidden"), hideLabel), _defineProperty(_cx2, "".concat(prefix, "--label--disabled"), disabled), _defineProperty(_cx2, "".concat(prefix, "--label--readonly"), rest.readOnly), _cx2));
-  var helperTextClasses = cx("".concat(prefix, "--form__helper-text"), _defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
-  var inputClasses = cx("".concat(prefix, "--date-picker__input"), (_cx4 = {}, _defineProperty(_cx4, "".concat(prefix, "--date-picker__input--").concat(size), size), _defineProperty(_cx4, "".concat(prefix, "--date-picker__input--invalid"), invalid), _defineProperty(_cx4, "".concat(prefix, "--date-picker__input--warn"), warn), _cx4));
-  var containerClasses = cx("".concat(prefix, "--date-picker-container"), (_cx5 = {}, _defineProperty(_cx5, "".concat(prefix, "--date-picker--nolabel"), !labelText), _defineProperty(_cx5, "".concat(prefix, "--date-picker--fluid--invalid"), isFluid && invalid), _defineProperty(_cx5, "".concat(prefix, "--date-picker--fluid--warn"), isFluid && warn), _cx5));
-  var datePickerInputHelperId = !helperText ? undefined : "detepicker-input-helper-text-".concat(datePickerInputInstanceId);
-
-  var inputProps = _objectSpread2(_objectSpread2(_objectSpread2({}, rest), datePickerInputProps), {}, _defineProperty({
+  const wrapperClasses = cx(`${prefix}--date-picker-input__wrapper`, {
+    [`${prefix}--date-picker-input__wrapper--invalid`]: invalid,
+    [`${prefix}--date-picker-input__wrapper--warn`]: warn
+  });
+  const labelClasses = cx(`${prefix}--label`, {
+    [`${prefix}--visually-hidden`]: hideLabel,
+    [`${prefix}--label--disabled`]: disabled,
+    [`${prefix}--label--readonly`]: rest.readOnly
+  });
+  const helperTextClasses = cx(`${prefix}--form__helper-text`, {
+    [`${prefix}--form__helper-text--disabled`]: disabled
+  });
+  const inputClasses = cx(`${prefix}--date-picker__input`, {
+    [`${prefix}--date-picker__input--${size}`]: size,
+    [`${prefix}--date-picker__input--invalid`]: invalid,
+    [`${prefix}--date-picker__input--warn`]: warn
+  });
+  const containerClasses = cx(`${prefix}--date-picker-container`, {
+    [`${prefix}--date-picker--nolabel`]: !labelText,
+    [`${prefix}--date-picker--fluid--invalid`]: isFluid && invalid,
+    [`${prefix}--date-picker--fluid--warn`]: isFluid && warn
+  });
+  const datePickerInputHelperId = !helperText ? undefined : `detepicker-input-helper-text-${datePickerInputInstanceId}`;
+  const inputProps = { ...rest,
+    ...datePickerInputProps,
     className: inputClasses,
-    disabled: disabled,
-    ref: ref
-  }, 'aria-describedby', helperText ? datePickerInputHelperId : undefined));
+    disabled,
+    ref,
+    ['aria-describedby']: helperText ? datePickerInputHelperId : undefined
+  };
 
   if (invalid) {
     inputProps['data-invalid'] = true;
   }
 
-  var input = /*#__PURE__*/React__default.createElement("input", inputProps);
+  const input = /*#__PURE__*/React__default.createElement("input", inputProps);
   return /*#__PURE__*/React__default.createElement("div", {
     className: containerClasses
   }, labelText && /*#__PURE__*/React__default.createElement("label", {
@@ -99,13 +106,13 @@ var DatePickerInput = /*#__PURE__*/React__default.forwardRef(function DatePicker
     invalid: invalid,
     warn: warn
   })), invalid && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isFluid && /*#__PURE__*/React__default.createElement("hr", {
-    className: "".concat(prefix, "--date-picker__divider")
+    className: `${prefix}--date-picker__divider`
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--form-requirement")
+    className: `${prefix}--form-requirement`
   }, invalidText)), warn && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isFluid && /*#__PURE__*/React__default.createElement("hr", {
-    className: "".concat(prefix, "--date-picker__divider")
+    className: `${prefix}--date-picker__divider`
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--form-requirement")
+    className: `${prefix}--form-requirement`
   }, warnText)), helperText && /*#__PURE__*/React__default.createElement("div", {
     id: datePickerInputHelperId,
     className: helperTextClasses
@@ -171,7 +178,7 @@ DatePickerInput.propTypes = {
   /**
    * Provide a regular expression that the input value must match
    */
-  pattern: function pattern(props, propName, componentName) {
+  pattern: (props, propName, componentName) => {
     if (props[propName] === undefined) {
       return;
     }
@@ -179,7 +186,7 @@ DatePickerInput.propTypes = {
     try {
       new RegExp(props[propName]);
     } catch (e) {
-      return new Error("Invalid value of prop '".concat(propName, "' supplied to '").concat(componentName, "', it should be a valid regular expression"));
+      return new Error(`Invalid value of prop '${propName}' supplied to '${componentName}', it should be a valid regular expression`);
     }
   },
 
@@ -215,13 +222,15 @@ DatePickerInput.propTypes = {
 };
 
 function DatePickerIcon(_ref) {
-  var datePickerType = _ref.datePickerType,
-      invalid = _ref.invalid,
-      warn = _ref.warn;
-  var prefix = usePrefix();
-
-  var _useContext2 = useContext(FormContext),
-      isFluid = _useContext2.isFluid;
+  let {
+    datePickerType,
+    invalid,
+    warn
+  } = _ref;
+  const prefix = usePrefix();
+  const {
+    isFluid
+  } = useContext(FormContext);
 
   if (datePickerType === 'simple' && !invalid && !warn) {
     if (!isFluid) {
@@ -231,18 +240,18 @@ function DatePickerIcon(_ref) {
 
   if (invalid) {
     return /*#__PURE__*/React__default.createElement(WarningFilled, {
-      className: "".concat(prefix, "--date-picker__icon ").concat(prefix, "--date-picker__icon--invalid")
+      className: `${prefix}--date-picker__icon ${prefix}--date-picker__icon--invalid`
     });
   }
 
   if (!invalid && warn) {
     return /*#__PURE__*/React__default.createElement(WarningAltFilled, {
-      className: "".concat(prefix, "--date-picker__icon ").concat(prefix, "--date-picker__icon--warn")
+      className: `${prefix}--date-picker__icon ${prefix}--date-picker__icon--warn`
     });
   }
 
   return /*#__PURE__*/React__default.createElement(Calendar, {
-    className: "".concat(prefix, "--date-picker__icon"),
+    className: `${prefix}--date-picker__icon`,
     role: "img",
     "aria-hidden": "true"
   });