@carbon/react 1.83.0-rc.0 → 1.84.0-rc.0

package/es/components/DataTableSkeleton/DataTableSkeleton.js

@@ -7,23 +7,22 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 var _span, _span2;
-const DataTableSkeleton = _ref => {
-  let {
-    headers,
-    rowCount = 5,
-    columnCount = 5,
-    zebra = false,
-    compact = false,
-    className,
-    showHeader = true,
-    showToolbar = true,
-    ...rest
-  } = _ref;
+const DataTableSkeleton = ({
+  headers,
+  rowCount = 5,
+  columnCount = 5,
+  zebra = false,
+  compact = false,
+  className,
+  showHeader = true,
+  showToolbar = true,
+  ...rest
+}) => {
   const prefix = usePrefix();
   const dataTableSkeletonClasses = cx(className, {
     [`${prefix}--skeleton`]: true,
@@ -37,34 +36,34 @@ const DataTableSkeleton = _ref => {
     length: columnCount
   }, (_, index) => index);
   for (let i = 0; i < rowRepeat; i++) {
-    rows[i] = /*#__PURE__*/React__default.createElement("tr", {
+    rows[i] = /*#__PURE__*/React.createElement("tr", {
       key: i
-    }, columnsArray.map(j => /*#__PURE__*/React__default.createElement("td", {
+    }, columnsArray.map(j => /*#__PURE__*/React.createElement("td", {
       key: j
-    }, _span || (_span = /*#__PURE__*/React__default.createElement("span", null)))));
+    }, _span || (_span = /*#__PURE__*/React.createElement("span", null)))));
   }
-  return /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--skeleton ${prefix}--data-table-container`
-  }, showHeader ? /*#__PURE__*/React__default.createElement("div", {
+  }, showHeader ? /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--data-table-header`
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--data-table-header__title`
-  }), /*#__PURE__*/React__default.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--data-table-header__description`
-  })) : null, showToolbar ? /*#__PURE__*/React__default.createElement("section", {
+  })) : null, showToolbar ? /*#__PURE__*/React.createElement("section", {
     "aria-label": "data table toolbar",
     className: `${prefix}--table-toolbar`
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--toolbar-content`
-  }, /*#__PURE__*/React__default.createElement("span", {
+  }, /*#__PURE__*/React.createElement("span", {
     className: `${prefix}--skeleton ${prefix}--btn ${prefix}--btn--sm`
-  }))) : null, /*#__PURE__*/React__default.createElement("table", _extends({
+  }))) : null, /*#__PURE__*/React.createElement("table", _extends({
     className: dataTableSkeletonClasses
-  }, rest), /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, columnsArray.map(i => /*#__PURE__*/React__default.createElement("th", {
+  }, rest), /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, columnsArray.map(i => /*#__PURE__*/React.createElement("th", {
     key: i
-  }, headers ? /*#__PURE__*/React__default.createElement("div", {
+  }, headers ? /*#__PURE__*/React.createElement("div", {
     className: "cds--table-header-label"
-  }, headers[i]?.header) : _span2 || (_span2 = /*#__PURE__*/React__default.createElement("span", null)))))), /*#__PURE__*/React__default.createElement("tbody", null, rows)));
+  }, headers[i]?.header) : _span2 || (_span2 = /*#__PURE__*/React.createElement("span", null)))))), /*#__PURE__*/React.createElement("tbody", null, rows)));
 };
 DataTableSkeleton.propTypes = {
   /**

package/es/components/DatePicker/DatePicker.Skeleton.js

@@ -7,37 +7,36 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const DatePickerSkeleton = _ref => {
-  let {
-    range,
-    id,
-    hideLabel,
-    className,
-    ...rest
-  } = _ref;
+const DatePickerSkeleton = ({
+  range,
+  id,
+  hideLabel,
+  className,
+  ...rest
+}) => {
   const prefix = usePrefix();
-  const dateInput = /*#__PURE__*/React__default.createElement("div", {
+  const dateInput = /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--date-picker-container`
-  }, !hideLabel && /*#__PURE__*/React__default.createElement("span", {
+  }, !hideLabel && /*#__PURE__*/React.createElement("span", {
     className: `${prefix}--label`,
     id: id
-  }), /*#__PURE__*/React__default.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--date-picker__input ${prefix}--skeleton`
   }));
   if (range) {
-    return /*#__PURE__*/React__default.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       className: `${prefix}--form-item`
-    }, /*#__PURE__*/React__default.createElement("div", _extends({
+    }, /*#__PURE__*/React.createElement("div", _extends({
       className: cx(`${prefix}--date-picker`, `${prefix}--date-picker--range`, `${prefix}--skeleton`, className)
     }, rest), dateInput, dateInput));
   }
-  return /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--form-item`
-  }, /*#__PURE__*/React__default.createElement("div", _extends({
+  }, /*#__PURE__*/React.createElement("div", _extends({
     className: cx(`${prefix}--date-picker`, `${prefix}--date-picker--short`, `${prefix}--date-picker--simple`, `${prefix}--skeleton`, className)
   }, rest), dateInput));
 };

package/es/components/DatePicker/DatePicker.js

@@ -7,7 +7,7 @@
 
 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 React, { useContext, useState, useCallback, useRef, useEffect, useImperativeHandle } from 'react';
 import cx from 'classnames';
 import flatpickr from 'flatpickr';
 import l10n from 'flatpickr/dist/l10n/index';
@@ -16,7 +16,7 @@ import carbonFlatpickrAppendToPlugin from './plugins/appendToPlugin.js';
 import carbonFlatpickrFixEventsPlugin from './plugins/fixEventsPlugin.js';
 import carbonFlatpickrRangePlugin from './plugins/rangePlugin.js';
 import deprecate from '../../prop-types/deprecate.js';
-import { Escape, ArrowDown, Enter, Tab } from '../../internal/keyboard/keys.js';
+import { Escape, Tab, Enter } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useSavedCallback } from '../../internal/useSavedCallback.js';
@@ -132,35 +132,34 @@ function updateClassNames(calendar, prefix) {
     });
   }
 }
-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,
-    parseDate: parseDateProp,
-    ...rest
-  } = _ref;
+const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
+  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,
+  parseDate: parseDateProp,
+  ...rest
+}, ref) {
   const prefix = usePrefix();
   const {
     isFluid
@@ -208,6 +207,7 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
     }
   }, [calendarCloseEvent, handleCalendarClose]);
   const endInputField = useRef(null);
+  const lastFocusedField = useRef(null);
   const savedOnChange = useSavedCallback(onChange);
   const savedOnOpen = useSavedCallback(onOpen);
   const datePickerClasses = cx(`${prefix}--date-picker`, {
@@ -221,29 +221,29 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
   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, {
+  const childrenWithProps = React.Children.toArray(children).map((child, index) => {
+    if (index === 0 && child.type === React.createElement(DatePickerInput, child.props).type) {
+      return /*#__PURE__*/React.cloneElement(child, {
         datePickerType,
         ref: startInputField,
         readOnly
       });
     }
-    if (index === 1 && child.type === React__default.createElement(DatePickerInput, child.props).type) {
-      return /*#__PURE__*/React__default.cloneElement(child, {
+    if (index === 1 && child.type === React.createElement(DatePickerInput, child.props).type) {
+      return /*#__PURE__*/React.cloneElement(child, {
         datePickerType,
         ref: endInputField,
         readOnly
       });
     }
     if (index === 0) {
-      return /*#__PURE__*/React__default.cloneElement(child, {
+      return /*#__PURE__*/React.cloneElement(child, {
         ref: startInputField,
         readOnly
       });
     }
     if (index === 1) {
-      return /*#__PURE__*/React__default.cloneElement(child, {
+      return /*#__PURE__*/React.cloneElement(child, {
         ref: endInputField,
         readOnly
       });
@@ -356,40 +356,68 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
       noCalendar: readOnly,
       nextArrow: rightArrowHTML,
       prevArrow: leftArrowHTML,
-      onChange: function () {
+      onChange: (...args) => {
         if (!readOnly) {
-          savedOnChange(...arguments);
+          savedOnChange(...args);
         }
       },
       onReady: onHook,
       onMonthChange: onHook,
       onYearChange: onHook,
-      onOpen: function () {
-        onHook(...arguments);
-        savedOnOpen(...arguments);
+      onOpen: (...args) => {
+        onHook(...args);
+        savedOnOpen(...args);
       },
       onValueUpdate: onHook
     };
     const calendar = flatpickr(start, flatpickerConfig);
     calendarRef.current = calendar;
-    function handleArrowDown(event) {
+    const handleInputFieldKeyDown = event => {
+      const {
+        calendarContainer,
+        selectedDateElem: fpSelectedDateElem,
+        todayDateElem: fpTodayDateElem
+      } = calendar;
       if (match(event, Escape)) {
-        calendar?.calendarContainer?.classList.remove('open');
+        calendarContainer.classList.remove('open');
       }
-      if (match(event, ArrowDown)) {
-        if (event.target == endInputField.current) {
-          calendar?.calendarContainer?.classList.add('open');
+      if (match(event, Tab)) {
+        if (!event.shiftKey) {
+          event.preventDefault();
+          calendarContainer.classList.add('open');
+          const selectedDateElem = calendarContainer.querySelector('.selected') && fpSelectedDateElem;
+          const todayDateElem = calendarContainer.querySelector('.today') && fpTodayDateElem;
+          (selectedDateElem || todayDateElem || calendarContainer.querySelector('.flatpickr-day[tabindex]') || calendarContainer).focus();
+          if (event.target === startInputField.current) {
+            lastFocusedField.current = startInputField.current;
+          } else if (event.target === endInputField.current) {
+            lastFocusedField.current = endInputField.current;
+          }
+        } else if (calendarRef.current?.isOpen && event.target === startInputField.current) {
+          calendarRef.current.close();
+          onCalendarClose(calendarRef.current.selectedDates, '', calendarRef.current, event);
         }
-        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();
       }
-    }
+    };
+    const handleCalendarKeyDown = event => {
+      if (!calendarRef.current || !startInputField.current) return;
+      const lastInputField = datePickerType == 'range' ? endInputField.current : startInputField.current;
+      if (match(event, Tab)) {
+        if (!event.shiftKey) {
+          if (lastFocusedField.current === lastInputField) {
+            lastInputField.focus();
+            calendarRef.current.close();
+            onCalendarClose(calendarRef.current.selectedDates, '', calendarRef.current, event);
+          } else {
+            event.preventDefault();
+            lastInputField.focus();
+          }
+        } else {
+          event.preventDefault();
+          (lastFocusedField.current || startInputField.current).focus();
+        }
+      }
+    };
     function handleOnChange(event) {
       const {
         target
@@ -413,7 +441,7 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
       }
     }
     if (start) {
-      start.addEventListener('keydown', handleArrowDown);
+      start.addEventListener('keydown', handleInputFieldKeyDown);
       start.addEventListener('change', handleOnChange);
       start.addEventListener('keypress', handleKeyPress);
       if (calendar && calendar.calendarContainer) {
@@ -426,10 +454,13 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
       }
     }
     if (end) {
-      end.addEventListener('keydown', handleArrowDown);
+      end.addEventListener('keydown', handleInputFieldKeyDown);
       end.addEventListener('change', handleOnChange);
       end.addEventListener('keypress', handleKeyPress);
     }
+    if (calendar.calendarContainer) {
+      calendar.calendarContainer.addEventListener('keydown', handleCalendarKeyDown);
+    }
 
     //component did unmount equivalent
     return () => {
@@ -450,14 +481,17 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
         }
       }
       if (start) {
-        start.removeEventListener('keydown', handleArrowDown);
+        start.removeEventListener('keydown', handleInputFieldKeyDown);
         start.removeEventListener('change', handleOnChange);
         start.removeEventListener('keypress', handleKeyPress);
       }
       if (end) {
-        end.removeEventListener('keydown', handleArrowDown);
+        end.removeEventListener('keydown', handleInputFieldKeyDown);
         end.removeEventListener('change', handleOnChange);
-        end.removeEventListener('change', handleKeyPress);
+        end.removeEventListener('keypress', handleKeyPress);
+      }
+      if (calendar.calendarContainer) {
+        calendar.calendarContainer.removeEventListener('keydown', handleCalendarKeyDown);
       }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -554,42 +588,31 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
     }
   }, [value, prefix]); //eslint-disable-line react-hooks/exhaustive-deps
 
-  useEffect(() => {
-    if (!calendarRef.current || !startInputField.current) return;
-    const handleKeyDown = event => {
-      if (match(event, Tab) && !event.shiftKey && document.activeElement === endInputField.current && calendarRef.current?.isOpen) {
-        calendarRef.current.close();
-        onCalendarClose(calendarRef.current.selectedDates, '', calendarRef.current, event);
-      }
-    };
-    document.addEventListener('keydown', handleKeyDown, true);
-    return () => document.removeEventListener('keydown', handleKeyDown, true);
-  }, [calendarRef, startInputField, endInputField, onCalendarClose]);
   let fluidError;
   if (isFluid) {
     if (invalid) {
-      fluidError = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(WarningFilled, {
+      fluidError = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(WarningFilled, {
         className: `${prefix}--date-picker__icon ${prefix}--date-picker__icon--invalid`
-      }), /*#__PURE__*/React__default.createElement("hr", {
+      }), /*#__PURE__*/React.createElement("hr", {
         className: `${prefix}--date-picker__divider`
-      }), /*#__PURE__*/React__default.createElement("div", {
+      }), /*#__PURE__*/React.createElement("div", {
         className: `${prefix}--form-requirement`
       }, invalidText));
     }
     if (warn && !invalid) {
-      fluidError = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(WarningAltFilled, {
+      fluidError = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(WarningAltFilled, {
         className: `${prefix}--date-picker__icon ${prefix}--date-picker__icon--warn`
-      }), /*#__PURE__*/React__default.createElement("hr", {
+      }), /*#__PURE__*/React.createElement("hr", {
         className: `${prefix}--date-picker__divider`
-      }), /*#__PURE__*/React__default.createElement("div", {
+      }), /*#__PURE__*/React.createElement("div", {
         className: `${prefix}--form-requirement`
       }, warnText));
     }
   }
-  return /*#__PURE__*/React__default.createElement("div", _extends({
+  return /*#__PURE__*/React.createElement("div", _extends({
     className: wrapperClasses,
     ref: ref
-  }, rest), /*#__PURE__*/React__default.createElement("div", {
+  }, rest), /*#__PURE__*/React.createElement("div", {
     className: datePickerClasses
   }, childrenWithProps), fluidError);
 });

package/es/components/DatePickerInput/DatePickerInput.d.ts

@@ -1,16 +1,15 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * 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 { ReactElementLike } from 'prop-types';
-import React, { ReactNode } from 'react';
-import { ReactAttr } from '../../types/common';
+import React, { type HTMLAttributes, type ReactNode } from 'react';
 type ExcludedAttributes = 'value' | 'onChange' | 'locale' | 'children';
 export type ReactNodeLike = ReactElementLike | ReadonlyArray<ReactNode> | string | number | boolean | null | undefined;
 export type func = (...args: any[]) => any;
-export interface DatePickerInputProps extends Omit<ReactAttr<HTMLInputElement>, ExcludedAttributes> {
+export interface DatePickerInputProps extends Omit<HTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
     /**
      * The type of the date picker:
      *

package/es/components/DatePickerInput/DatePickerInput.js

@@ -8,7 +8,7 @@
 import { WarningFilled, WarningAltFilled, Calendar } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default, { useContext } from 'react';
+import React, { useContext } from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
@@ -17,7 +17,7 @@ import '../Text/index.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { Text } from '../Text/Text.js';
 
-const DatePickerInput = /*#__PURE__*/React__default.forwardRef(function DatePickerInput(props, ref) {
+const DatePickerInput = /*#__PURE__*/React.forwardRef(function DatePickerInput(props, ref) {
   const {
     datePickerType,
     decorator,
@@ -96,42 +96,42 @@ const DatePickerInput = /*#__PURE__*/React__default.forwardRef(function DatePick
   if (invalid) {
     inputProps['data-invalid'] = true;
   }
-  const input = /*#__PURE__*/React__default.createElement("input", inputProps);
+  const input = /*#__PURE__*/React.createElement("input", inputProps);
 
   // AILabel always size `mini`
-  let normalizedDecorator = /*#__PURE__*/React__default.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  let normalizedDecorator = /*#__PURE__*/React.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
   if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
-    normalizedDecorator = /*#__PURE__*/React__default.cloneElement(normalizedDecorator, {
+    normalizedDecorator = /*#__PURE__*/React.cloneElement(normalizedDecorator, {
       size: 'mini'
     });
   }
-  return /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: containerClasses
-  }, labelText && /*#__PURE__*/React__default.createElement(Text, {
+  }, labelText && /*#__PURE__*/React.createElement(Text, {
     as: "label",
     htmlFor: id,
     className: labelClasses
-  }, labelText), /*#__PURE__*/React__default.createElement("div", {
+  }, labelText), /*#__PURE__*/React.createElement("div", {
     className: wrapperClasses
-  }, /*#__PURE__*/React__default.createElement("span", null, input, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("span", null, input, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--date-picker-input-inner-wrapper--decorator`
-  }, normalizedDecorator) : '', isFluid && /*#__PURE__*/React__default.createElement(DatePickerIcon, {
+  }, normalizedDecorator) : '', isFluid && /*#__PURE__*/React.createElement(DatePickerIcon, {
     datePickerType: datePickerType
-  }), /*#__PURE__*/React__default.createElement(DatePickerIcon, {
+  }), /*#__PURE__*/React.createElement(DatePickerIcon, {
     datePickerType: datePickerType,
     invalid: invalid,
     warn: warn
-  }))), invalid && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isFluid && /*#__PURE__*/React__default.createElement("hr", {
+  }))), invalid && /*#__PURE__*/React.createElement(React.Fragment, null, isFluid && /*#__PURE__*/React.createElement("hr", {
     className: `${prefix}--date-picker__divider`
-  }), /*#__PURE__*/React__default.createElement(Text, {
+  }), /*#__PURE__*/React.createElement(Text, {
     as: "div",
     className: `${prefix}--form-requirement`
-  }, invalidText)), warn && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isFluid && /*#__PURE__*/React__default.createElement("hr", {
+  }, invalidText)), warn && /*#__PURE__*/React.createElement(React.Fragment, null, isFluid && /*#__PURE__*/React.createElement("hr", {
     className: `${prefix}--date-picker__divider`
-  }), /*#__PURE__*/React__default.createElement(Text, {
+  }), /*#__PURE__*/React.createElement(Text, {
     as: "div",
     className: `${prefix}--form-requirement`
-  }, warnText)), helperText && !invalid && /*#__PURE__*/React__default.createElement(Text, {
+  }, warnText)), helperText && !invalid && /*#__PURE__*/React.createElement(Text, {
     as: "div",
     id: datePickerInputHelperId,
     className: helperTextClasses
@@ -227,12 +227,11 @@ DatePickerInput.propTypes = {
    */
   warnText: PropTypes.node
 };
-function DatePickerIcon(_ref) {
-  let {
-    datePickerType,
-    invalid,
-    warn
-  } = _ref;
+function DatePickerIcon({
+  datePickerType,
+  invalid,
+  warn
+}) {
   const prefix = usePrefix();
   const {
     isFluid
@@ -243,16 +242,16 @@ function DatePickerIcon(_ref) {
     }
   }
   if (invalid) {
-    return /*#__PURE__*/React__default.createElement(WarningFilled, {
+    return /*#__PURE__*/React.createElement(WarningFilled, {
       className: `${prefix}--date-picker__icon ${prefix}--date-picker__icon--invalid`
     });
   }
   if (!invalid && warn) {
-    return /*#__PURE__*/React__default.createElement(WarningAltFilled, {
+    return /*#__PURE__*/React.createElement(WarningAltFilled, {
       className: `${prefix}--date-picker__icon ${prefix}--date-picker__icon--warn`
     });
   }
-  return /*#__PURE__*/React__default.createElement(Calendar, {
+  return /*#__PURE__*/React.createElement(Calendar, {
     className: `${prefix}--date-picker__icon`,
     role: "img",
     "aria-hidden": "true"