@carbon/react 1.27.0 → 1.28.0

package/es/components/DatePicker/DatePicker.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, typeof as _typeof, objectSpread2 as _objectSpread2, extends as _extends, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default, { useContext, useState, useCallback, useRef, useEffect, useImperativeHandle } from 'react';
 import cx from 'classnames';
@@ -24,10 +24,9 @@ import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import { match } from '../../internal/keyboard/match.js';
 import { Escape, ArrowDown } from '../../internal/keyboard/keys.js';
 
-var _excluded = ["allowInput", "appendTo", "children", "className", "closeOnSelect", "dateFormat", "datePickerType", "disable", "enable", "inline", "invalid", "invalidText", "warn", "warnText", "light", "locale", "maxDate", "minDate", "onChange", "onClose", "onOpen", "readOnly", "short", "value"];
-
-l10n.en.weekdays.shorthand.forEach(function (_day, index) {
-  var currentDay = l10n.en.weekdays.shorthand;
+// Weekdays shorthand for english locale
+l10n.en.weekdays.shorthand.forEach((_day, index) => {
+  const currentDay = l10n.en.weekdays.shorthand;
 
   if (currentDay[index] === 'Thu' || currentDay[index] === 'Th') {
     currentDay[index] = 'Th';
@@ -35,7 +34,7 @@ l10n.en.weekdays.shorthand.forEach(function (_day, index) {
     currentDay[index] = currentDay[index].charAt(0);
   }
 });
-var forEach = Array.prototype.forEach;
+const forEach = Array.prototype.forEach;
 /**
  * @param {number} monthNumber The month number.
  * @param {boolean} shorthand `true` to use shorthand month.
@@ -43,9 +42,7 @@ var forEach = Array.prototype.forEach;
  * @returns {string} The month string.
  */
 
-var monthToStr = function monthToStr(monthNumber, shorthand, locale) {
-  return locale.months[shorthand ? 'shorthand' : 'longhand'][monthNumber];
-};
+const monthToStr = (monthNumber, shorthand, locale) => locale.months[shorthand ? 'shorthand' : 'longhand'][monthNumber];
 /**
  * @param {object} config Plugin configuration.
  * @param {boolean} [config.shorthand] `true` to use shorthand month.
@@ -57,55 +54,50 @@ var monthToStr = function monthToStr(monthNumber, shorthand, locale) {
  */
 
 
-var carbonFlatpickrMonthSelectPlugin = function carbonFlatpickrMonthSelectPlugin(config) {
-  return function (fp) {
-    var setupElements = function setupElements() {
-      var _fp$monthElements;
+const carbonFlatpickrMonthSelectPlugin = config => fp => {
+  const setupElements = () => {
+    if (!fp.monthElements) {
+      return;
+    }
 
-      if (!fp.monthElements) {
+    fp.monthElements.forEach(elem => {
+      if (!elem.parentNode) {
         return;
       }
 
-      fp.monthElements.forEach(function (elem) {
-        if (!elem.parentNode) {
-          return;
-        }
-
-        elem.parentNode.removeChild(elem);
-      });
-
-      (_fp$monthElements = fp.monthElements).splice.apply(_fp$monthElements, [0, fp.monthElements.length].concat(_toConsumableArray(fp.monthElements.map(function () {
-        // eslint-disable-next-line no-underscore-dangle
-        var monthElement = fp._createElement('span', config.classFlatpickrCurrentMonth);
-
-        monthElement.textContent = monthToStr(fp.currentMonth, config.shorthand === true, fp.l10n);
-        fp.yearElements[0].closest(config.selectorFlatpickrMonthYearContainer).insertBefore(monthElement, fp.yearElements[0].closest(config.selectorFlatpickrYearContainer));
-        return monthElement;
-      }))));
-    };
+      elem.parentNode.removeChild(elem);
+    });
+    fp.monthElements.splice(0, fp.monthElements.length, ...fp.monthElements.map(() => {
+      // eslint-disable-next-line no-underscore-dangle
+      const monthElement = fp._createElement('span', config.classFlatpickrCurrentMonth);
+
+      monthElement.textContent = monthToStr(fp.currentMonth, config.shorthand === true, fp.l10n);
+      fp.yearElements[0].closest(config.selectorFlatpickrMonthYearContainer).insertBefore(monthElement, fp.yearElements[0].closest(config.selectorFlatpickrYearContainer));
+      return monthElement;
+    }));
+  };
 
-    var updateCurrentMonth = function updateCurrentMonth() {
-      if (fp.monthElements) {
-        var monthStr = monthToStr(fp.currentMonth, config.shorthand === true, fp.l10n);
-        fp.yearElements.forEach(function (elem) {
-          var currentMonthContainer = elem.closest(config.selectorFlatpickrMonthYearContainer);
-          Array.prototype.forEach.call(currentMonthContainer.querySelectorAll('.cur-month'), function (monthElement) {
-            monthElement.textContent = monthStr;
-          });
+  const updateCurrentMonth = () => {
+    if (fp.monthElements) {
+      const monthStr = monthToStr(fp.currentMonth, config.shorthand === true, fp.l10n);
+      fp.yearElements.forEach(elem => {
+        const currentMonthContainer = elem.closest(config.selectorFlatpickrMonthYearContainer);
+        Array.prototype.forEach.call(currentMonthContainer.querySelectorAll('.cur-month'), monthElement => {
+          monthElement.textContent = monthStr;
         });
-      }
-    };
+      });
+    }
+  };
 
-    var register = function register() {
-      fp.loadedPlugins.push('carbonFlatpickrMonthSelectPlugin');
-    };
+  const register = () => {
+    fp.loadedPlugins.push('carbonFlatpickrMonthSelectPlugin');
+  };
 
-    return {
-      onMonthChange: updateCurrentMonth,
-      onValueUpdate: updateCurrentMonth,
-      onOpen: updateCurrentMonth,
-      onReady: [setupElements, updateCurrentMonth, register]
-    };
+  return {
+    onMonthChange: updateCurrentMonth,
+    onValueUpdate: updateCurrentMonth,
+    onOpen: updateCurrentMonth,
+    onReady: [setupElements, updateCurrentMonth, register]
   };
 };
 /**
@@ -116,31 +108,33 @@ var carbonFlatpickrMonthSelectPlugin = function carbonFlatpickrMonthSelectPlugin
 
 
 function isLabelTextEmpty(children) {
-  return children.every(function (child) {
-    return !child.props.labelText;
-  });
+  return children.every(child => !child.props.labelText);
 }
 
-var rightArrowHTML = "<svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n  <polygon points=\"11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3 \"/>\n</svg>";
-var leftArrowHTML = "<svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n  <polygon points=\"5,8 10,3 10.7,3.7 6.4,8 10.7,12.3 10,13 \"/>\n</svg>";
+const rightArrowHTML = `<svg width="16px" height="16px" viewBox="0 0 16 16">
+  <polygon points="11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3 "/>
+</svg>`;
+const leftArrowHTML = `<svg width="16px" height="16px" viewBox="0 0 16 16">
+  <polygon points="5,8 10,3 10.7,3.7 6.4,8 10.7,12.3 10,13 "/>
+</svg>`;
 
 function updateClassNames(calendar, prefix) {
-  var calendarContainer = calendar.calendarContainer;
-  var daysContainer = calendar.days;
+  const calendarContainer = calendar.calendarContainer;
+  const daysContainer = calendar.days;
 
   if (calendarContainer && daysContainer) {
     // calendarContainer and daysContainer are undefined if flatpickr detects a mobile device
-    calendarContainer.classList.add("".concat(prefix, "--date-picker__calendar"));
-    calendarContainer.querySelector('.flatpickr-month').classList.add("".concat(prefix, "--date-picker__month"));
-    calendarContainer.querySelector('.flatpickr-weekdays').classList.add("".concat(prefix, "--date-picker__weekdays"));
-    calendarContainer.querySelector('.flatpickr-days').classList.add("".concat(prefix, "--date-picker__days"));
-    forEach.call(calendarContainer.querySelectorAll('.flatpickr-weekday'), function (item) {
-      var currentItem = item;
+    calendarContainer.classList.add(`${prefix}--date-picker__calendar`);
+    calendarContainer.querySelector('.flatpickr-month').classList.add(`${prefix}--date-picker__month`);
+    calendarContainer.querySelector('.flatpickr-weekdays').classList.add(`${prefix}--date-picker__weekdays`);
+    calendarContainer.querySelector('.flatpickr-days').classList.add(`${prefix}--date-picker__days`);
+    forEach.call(calendarContainer.querySelectorAll('.flatpickr-weekday'), item => {
+      const currentItem = item;
       currentItem.innerHTML = currentItem.innerHTML.replace(/\s+/g, '');
-      currentItem.classList.add("".concat(prefix, "--date-picker__weekday"));
+      currentItem.classList.add(`${prefix}--date-picker__weekday`);
     });
-    forEach.call(daysContainer.querySelectorAll('.flatpickr-day'), function (item) {
-      item.classList.add("".concat(prefix, "--date-picker__day"));
+    forEach.call(daysContainer.querySelectorAll('.flatpickr-day'), item => {
+      item.classList.add(`${prefix}--date-picker__day`);
 
       if (item.classList.contains('today') && calendar.selectedDates.length > 0) {
         item.classList.add('no-border');
@@ -151,113 +145,111 @@ function updateClassNames(calendar, prefix) {
   }
 }
 
-var DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_ref, ref) {
-  var _cx;
-
-  var allowInput = _ref.allowInput,
-      appendTo = _ref.appendTo,
-      children = _ref.children,
-      className = _ref.className,
-      _ref$closeOnSelect = _ref.closeOnSelect,
-      closeOnSelect = _ref$closeOnSelect === void 0 ? true : _ref$closeOnSelect,
-      _ref$dateFormat = _ref.dateFormat,
-      dateFormat = _ref$dateFormat === void 0 ? 'm/d/Y' : _ref$dateFormat,
-      datePickerType = _ref.datePickerType,
-      disable = _ref.disable,
-      enable = _ref.enable,
-      inline = _ref.inline,
-      invalid = _ref.invalid,
-      invalidText = _ref.invalidText,
-      warn = _ref.warn,
-      warnText = _ref.warnText,
-      _ref$light = _ref.light,
-      light = _ref$light === void 0 ? false : _ref$light,
-      _ref$locale = _ref.locale,
-      locale = _ref$locale === void 0 ? 'en' : _ref$locale,
-      maxDate = _ref.maxDate,
-      minDate = _ref.minDate,
-      onChange = _ref.onChange,
-      onClose = _ref.onClose,
-      onOpen = _ref.onOpen,
-      _ref$readOnly = _ref.readOnly,
-      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-      _ref$short = _ref.short,
-      short = _ref$short === void 0 ? false : _ref$short,
-      value = _ref.value,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
-
-  var _useContext = useContext(FormContext),
-      isFluid = _useContext.isFluid;
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      hasInput = _useState2[0],
-      setHasInput = _useState2[1];
-
-  var startInputField = useCallback(function (node) {
+const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_ref, ref) {
+  let {
+    allowInput,
+    appendTo,
+    children,
+    className,
+    closeOnSelect = true,
+    dateFormat = 'm/d/Y',
+    datePickerType,
+    disable,
+    enable,
+    inline,
+    invalid,
+    invalidText,
+    warn,
+    warnText,
+    light = false,
+    locale = 'en',
+    maxDate,
+    minDate,
+    onChange,
+    onClose,
+    onOpen,
+    readOnly = false,
+    short = false,
+    value,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
+  const {
+    isFluid
+  } = useContext(FormContext);
+  const [hasInput, setHasInput] = useState(false);
+  const startInputField = useCallback(node => {
     if (node !== null) {
       startInputField.current = node;
       setHasInput(true);
     }
   }, []);
-  var endInputField = useRef(null);
-  var lastStartValue = useRef(''); // fix datepicker deleting the selectedDate when the calendar closes
+  const lastStartValue = useRef(''); // fix datepicker deleting the selectedDate when the calendar closes
 
-  var onCalendarClose = function onCalendarClose(selectedDates, dateStr) {
-    setTimeout(function () {
+  const onCalendarClose = (selectedDates, dateStr) => {
+    setTimeout(() => {
       if (lastStartValue.current && selectedDates[0] && !startInputField.current.value) {
+        var _endInputField$curren;
+
         startInputField.current.value = lastStartValue.current;
-        calendarRef.current.setDate([startInputField.current.value, endInputField.current.value], true, calendarRef.current.config.dateFormat);
+        calendarRef.current.setDate([startInputField.current.value, endInputField === null || endInputField === void 0 ? void 0 : (_endInputField$curren = endInputField.current) === null || _endInputField$curren === void 0 ? void 0 : _endInputField$curren.value], true, calendarRef.current.config.dateFormat);
       }
 
       if (onClose) {
         onClose(calendarRef.current.selectedDates, dateStr, calendarRef.current);
       }
     });
-  };
-
-  var calendarRef = useRef(null);
-  var savedOnChange = useSavedCallback(onChange);
-  var savedOnClose = useSavedCallback(datePickerType === 'range' ? onCalendarClose : onClose);
-  var savedOnOpen = useSavedCallback(onOpen);
-  var datePickerClasses = cx("".concat(prefix, "--date-picker"), (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--date-picker--short"), short), _defineProperty(_cx, "".concat(prefix, "--date-picker--light"), light), _defineProperty(_cx, "".concat(prefix, "--date-picker--simple"), datePickerType === 'simple'), _defineProperty(_cx, "".concat(prefix, "--date-picker--single"), datePickerType === 'single'), _defineProperty(_cx, "".concat(prefix, "--date-picker--range"), datePickerType === 'range'), _defineProperty(_cx, "".concat(prefix, "--date-picker--nolabel"), datePickerType === 'range' && isLabelTextEmpty(children)), _cx));
-  var wrapperClasses = cx("".concat(prefix, "--form-item"), _defineProperty({}, className, className));
-  var childrenWithProps = React__default.Children.toArray(children).map(function (child, index) {
+  }; //const savedOnOpen = useSavedCallback(onOpen);
+
+
+  const endInputField = useRef(null);
+  const calendarRef = useRef(null);
+  const savedOnChange = useSavedCallback(() => onChange);
+  const savedOnClose = useSavedCallback(datePickerType === 'range' ? onCalendarClose : onClose);
+  const savedOnOpen = useSavedCallback(() => onOpen);
+  const datePickerClasses = cx(`${prefix}--date-picker`, {
+    [`${prefix}--date-picker--short`]: short,
+    [`${prefix}--date-picker--light`]: light,
+    [`${prefix}--date-picker--simple`]: datePickerType === 'simple',
+    [`${prefix}--date-picker--single`]: datePickerType === 'single',
+    [`${prefix}--date-picker--range`]: datePickerType === 'range',
+    [`${prefix}--date-picker--nolabel`]: datePickerType === 'range' && isLabelTextEmpty(children)
+  });
+  const wrapperClasses = cx(`${prefix}--form-item`, {
+    [String(className)]: className
+  });
+  const childrenWithProps = React__default.Children.toArray(children).map((child, index) => {
     if (index === 0 && child.type === React__default.createElement(DatePickerInput, child.props).type) {
       return /*#__PURE__*/React__default.cloneElement(child, {
-        datePickerType: datePickerType,
+        datePickerType,
         ref: startInputField,
-        readOnly: readOnly
+        readOnly
       });
     }
 
     if (index === 1 && child.type === React__default.createElement(DatePickerInput, child.props).type) {
       return /*#__PURE__*/React__default.cloneElement(child, {
-        datePickerType: datePickerType,
+        datePickerType,
         ref: endInputField,
-        readOnly: readOnly
+        readOnly
       });
     }
 
     if (index === 0) {
       return /*#__PURE__*/React__default.cloneElement(child, {
         ref: startInputField,
-        readOnly: readOnly
+        readOnly
       });
     }
 
     if (index === 1) {
       return /*#__PURE__*/React__default.cloneElement(child, {
         ref: endInputField,
-        readOnly: readOnly
+        readOnly
       });
     }
   });
-  useEffect(function () {
-    var _flatpickr;
-
+  useEffect(() => {
     if (datePickerType !== 'single' && datePickerType !== 'range') {
       return;
     }
@@ -266,7 +258,7 @@ var DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_ref
       return;
     }
 
-    var onHook = function onHook(_electedDates, _dateStr, instance, prefix) {
+    const onHook = (_electedDates, _dateStr, instance, prefix) => {
       updateClassNames(instance, prefix);
 
       if (startInputField !== null && startInputField !== void 0 && startInputField.current) {
@@ -280,8 +272,8 @@ var DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_ref
     // is provided, we return the default empty disabled array, allowing all dates.
 
 
-    var enableOrDisable = enable ? 'enable' : 'disable';
-    var enableOrDisableArr;
+    const enableOrDisable = enable ? 'enable' : 'disable';
+    let enableOrDisableArr;
 
     if (!enable && !disable) {
       enableOrDisableArr = [];
@@ -291,47 +283,69 @@ var DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_ref
       enableOrDisableArr = disable;
     }
 
-    var localeData;
+    let localeData;
 
-    if (_typeof(locale) === 'object') {
-      var location = locale.locale ? locale.locale : 'en';
-      localeData = _objectSpread2(_objectSpread2({}, l10n[location]), locale);
+    if (typeof locale === 'object') {
+      const location = locale.locale ? locale.locale : 'en';
+      localeData = { ...l10n[location],
+        ...locale
+      };
     } else {
       localeData = l10n[locale];
     }
 
-    var start = startInputField.current;
-    var end = endInputField.current;
-    var calendar = new flatpickr(start, (_flatpickr = {
-      inline: inline !== null && inline !== void 0 ? inline : false,
+    const {
+      current: start
+    } = startInputField;
+    const {
+      current: end
+    } = endInputField;
+    const flatpickerconfig = {
+      inline: inline ?? false,
       disableMobile: true,
       defaultDate: value,
       closeOnSelect: closeOnSelect,
       mode: datePickerType,
-      allowInput: allowInput !== null && allowInput !== void 0 ? allowInput : true,
+      allowInput: allowInput ?? true,
       dateFormat: dateFormat,
-      locale: localeData
-    }, _defineProperty(_flatpickr, enableOrDisable, enableOrDisableArr), _defineProperty(_flatpickr, "minDate", minDate), _defineProperty(_flatpickr, "maxDate", maxDate), _defineProperty(_flatpickr, "plugins", [datePickerType === 'range' ? new carbonFlatpickrRangePlugin({
-      input: endInputField.current
-    }) : function () {}, appendTo ? carbonFlatpickrAppendToPlugin({
-      appendTo: appendTo
-    }) : function () {}, carbonFlatpickrMonthSelectPlugin({
-      selectorFlatpickrMonthYearContainer: '.flatpickr-current-month',
-      selectorFlatpickrYearContainer: '.numInputWrapper',
-      selectorFlatpickrCurrentMonth: '.cur-month',
-      classFlatpickrCurrentMonth: 'cur-month'
-    }), carbonFlatpickrFixEventsPlugin({
-      inputFrom: startInputField.current,
-      inputTo: endInputField.current,
-      lastStartValue: lastStartValue
-    })]), _defineProperty(_flatpickr, "clickOpens", !readOnly), _defineProperty(_flatpickr, "noCalendar", readOnly), _defineProperty(_flatpickr, "nextArrow", rightArrowHTML), _defineProperty(_flatpickr, "prevArrow", leftArrowHTML), _defineProperty(_flatpickr, "onChange", function onChange() {
-      if (savedOnChange && !readOnly) {
-        savedOnChange.apply(void 0, arguments);
-      }
-    }), _defineProperty(_flatpickr, "onClose", savedOnClose), _defineProperty(_flatpickr, "onReady", onHook), _defineProperty(_flatpickr, "onMonthChange", onHook), _defineProperty(_flatpickr, "onYearChange", onHook), _defineProperty(_flatpickr, "onOpen", function onOpen() {
-      onHook.apply(void 0, arguments);
-      savedOnOpen.apply(void 0, arguments);
-    }), _defineProperty(_flatpickr, "onValueUpdate", onHook), _flatpickr));
+      locale: localeData,
+      [enableOrDisable]: enableOrDisableArr,
+      minDate: minDate,
+      maxDate: maxDate,
+      plugins: [datePickerType === 'range' ? carbonFlatpickrRangePlugin({
+        input: endInputField.current
+      }) : () => {}, appendTo ? carbonFlatpickrAppendToPlugin({
+        appendTo
+      }) : () => {}, carbonFlatpickrMonthSelectPlugin({
+        selectorFlatpickrMonthYearContainer: '.flatpickr-current-month',
+        selectorFlatpickrYearContainer: '.numInputWrapper',
+        selectorFlatpickrCurrentMonth: '.cur-month',
+        classFlatpickrCurrentMonth: 'cur-month'
+      }), carbonFlatpickrFixEventsPlugin({
+        inputFrom: startInputField.current,
+        inputTo: endInputField.current,
+        lastStartValue
+      })],
+      clickOpens: !readOnly,
+      noCalendar: readOnly,
+      nextArrow: rightArrowHTML,
+      prevArrow: leftArrowHTML,
+      onChange: function () {
+        if (savedOnChange && !readOnly) {
+          savedOnChange(...arguments);
+        }
+      },
+      onClose: savedOnClose,
+      onReady: onHook,
+      onMonthChange: onHook,
+      onYearChange: onHook,
+      onOpen: function () {
+        onHook(...arguments);
+        savedOnOpen(...arguments);
+      },
+      onValueUpdate: onHook
+    };
+    const calendar = flatpickr(start, flatpickerconfig);
     calendarRef.current = calendar;
 
     function handleArrowDown(event) {
@@ -340,11 +354,13 @@ var DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_ref
       }
 
       if (match(event, ArrowDown)) {
-        var calendarContainer = calendar.calendarContainer,
-            fpSelectedDateElem = calendar.selectedDateElem,
-            fptodayDateElem = calendar.todayDateElem;
-        var selectedDateElem = calendarContainer.querySelector('.selected') && fpSelectedDateElem;
-        var todayDateElem = calendarContainer.querySelector('.today') && fptodayDateElem;
+        const {
+          calendarContainer,
+          selectedDateElem: fpSelectedDateElem,
+          todayDateElem: fptodayDateElem
+        } = calendar;
+        const selectedDateElem = calendarContainer.querySelector('.selected') && fpSelectedDateElem;
+        const todayDateElem = calendarContainer.querySelector('.today') && fptodayDateElem;
         (selectedDateElem || todayDateElem || calendarContainer.querySelector('.flatpickr-day[tabindex]') || calendarContainer).focus();
       }
     }
@@ -354,7 +370,9 @@ var DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_ref
         calendar.calendarContainer.classList.remove('open');
       }
 
-      var target = event.target;
+      const {
+        target
+      } = event;
 
       if (target === start) {
         lastStartValue.current = start.value;
@@ -396,7 +414,7 @@ var DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_ref
     } //component did unmount equivalent
 
 
-    return function () {
+    return () => {
       // Note: if the `startInputField` ref is undefined then calendar will be
       // of type: Array and `destroy` will not be defined
       if (calendar && calendar.destroy) {
@@ -430,59 +448,57 @@ var DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_ref
   // instance for cases where functions like open() or close()
   // need to be imperatively called on the calendar
 
-  useImperativeHandle(ref, function () {
-    return {
-      get calendar() {
-        return calendarRef.current;
-      }
+  useImperativeHandle(ref, () => ({
+    get calendar() {
+      return calendarRef.current;
+    }
 
-    };
-  });
-  useEffect(function () {
+  }));
+  useEffect(() => {
     var _calendarRef$current;
 
     if (calendarRef !== null && calendarRef !== void 0 && (_calendarRef$current = calendarRef.current) !== null && _calendarRef$current !== void 0 && _calendarRef$current.set) {
       calendarRef.current.set({
-        dateFormat: dateFormat
+        dateFormat
       });
     }
   }, [dateFormat]);
-  useEffect(function () {
+  useEffect(() => {
     var _calendarRef$current2;
 
     if (calendarRef !== null && calendarRef !== void 0 && (_calendarRef$current2 = calendarRef.current) !== null && _calendarRef$current2 !== void 0 && _calendarRef$current2.set) {
       calendarRef.current.set('minDate', minDate);
     }
   }, [minDate]);
-  useEffect(function () {
+  useEffect(() => {
     var _calendarRef$current3;
 
     if (calendarRef !== null && calendarRef !== void 0 && (_calendarRef$current3 = calendarRef.current) !== null && _calendarRef$current3 !== void 0 && _calendarRef$current3.set) {
       calendarRef.current.set('maxDate', maxDate);
     }
   }, [maxDate]);
-  useEffect(function () {
+  useEffect(() => {
     var _calendarRef$current4;
 
     if (calendarRef !== null && calendarRef !== void 0 && (_calendarRef$current4 = calendarRef.current) !== null && _calendarRef$current4 !== void 0 && _calendarRef$current4.set && disable) {
       calendarRef.current.set('disable', disable);
     }
   }, [disable]);
-  useEffect(function () {
+  useEffect(() => {
     var _calendarRef$current5;
 
     if (calendarRef !== null && calendarRef !== void 0 && (_calendarRef$current5 = calendarRef.current) !== null && _calendarRef$current5 !== void 0 && _calendarRef$current5.set && enable) {
       calendarRef.current.set('enable', enable);
     }
   }, [enable]);
-  useEffect(function () {
+  useEffect(() => {
     var _calendarRef$current6;
 
     if (calendarRef !== null && calendarRef !== void 0 && (_calendarRef$current6 = calendarRef.current) !== null && _calendarRef$current6 !== void 0 && _calendarRef$current6.set && inline) {
       calendarRef.current.set('inline', inline);
     }
   }, [inline]);
-  useEffect(function () {
+  useEffect(() => {
     var _calendarRef$current7;
 
     if (calendarRef !== null && calendarRef !== void 0 && (_calendarRef$current7 = calendarRef.current) !== null && _calendarRef$current7 !== void 0 && _calendarRef$current7.set) {
@@ -496,26 +512,26 @@ var DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_ref
     }
   }, [value, prefix]); //eslint-disable-line react-hooks/exhaustive-deps
 
-  var fluidError;
+  let fluidError;
 
   if (isFluid) {
     if (invalid) {
       fluidError = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__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`
       }), /*#__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));
     }
 
     if (warn && !invalid) {
       fluidError = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__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`
       }), /*#__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));
     }
   }
@@ -717,6 +733,5 @@ DatePicker.propTypes = {
    */
   warnText: PropTypes.node
 };
-var DatePicker$1 = DatePicker;
 
-export { DatePicker$1 as default };
+export { DatePicker as default };

package/es/components/DatePicker/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 DatePicker from './DatePicker';
+export { default as DatePickerSkeleton, type DatePickerSkeletonProps, } from './DatePicker.Skeleton';
+export default DatePicker;
+export { DatePicker };