@itwin/itwinui-react 3.17.4 → 3.18.1

package/DEV-esm/utils/hooks/useWarningLogger.js

@@ -3,30 +3,32 @@ import { isUnitTest } from '../functions/dev.js';
 import { getWindow } from '../functions/dom.js';
 let _React = React;
 let ReactInternals = _React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-export const useWarningLogger = isUnitTest
-  ? () => () => {}
-  : function () {
-      let loggedRef = React.useRef(false);
-      let timeoutRef = React.useRef(void 0);
-      let stack = ReactInternals?.ReactDebugCurrentFrame?.getCurrentStack?.();
-      let componentName = stack?.trim().split('\n')[1]?.trim();
-      let prefix = componentName ? `Warning (${componentName}):` : 'Warning:';
-      let logWarning = React.useCallback(
-        (message) => {
-          timeoutRef.current = getWindow()?.setTimeout(() => {
-            if (!loggedRef.current) {
-              console.error(prefix, message);
-              loggedRef.current = true;
-            }
-          });
-        },
-        [prefix],
-      );
-      React.useEffect(
-        () => () => {
-          if (timeoutRef.current) getWindow()?.clearTimeout(timeoutRef.current);
-        },
-        [],
-      );
-      return logWarning;
-    };
+export const useWarningLogger =
+  'development' !== process.env.NODE_ENV || isUnitTest
+    ? () => () => {}
+    : function () {
+        let loggedRef = React.useRef(false);
+        let timeoutRef = React.useRef(void 0);
+        let stack = ReactInternals?.ReactDebugCurrentFrame?.getCurrentStack?.();
+        let componentName = stack?.trim().split('\n')[1]?.trim();
+        let prefix = componentName ? `Warning (${componentName}):` : 'Warning:';
+        let logWarning = React.useCallback(
+          (message) => {
+            timeoutRef.current = getWindow()?.setTimeout(() => {
+              if (!loggedRef.current) {
+                console.error(prefix, message);
+                loggedRef.current = true;
+              }
+            });
+          },
+          [prefix],
+        );
+        React.useEffect(
+          () => () => {
+            if (timeoutRef.current)
+              getWindow()?.clearTimeout(timeoutRef.current);
+          },
+          [],
+        );
+        return logWarning;
+      };

package/DEV-esm/utils/providers/index.js

@@ -1,2 +1 @@
 export * from './HydrationProvider.js';
-export * from './ScopeProvider.js';

package/cjs/core/Alert/Alert.js

@@ -53,6 +53,8 @@ const AlertComponent = _react.forwardRef((props, forwardedRef) => {
       : null,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  AlertComponent.displayName = 'Alert';
 const AlertWrapper = _react.forwardRef((props, ref) => {
   let {
     children,
@@ -81,6 +83,8 @@ const AlertWrapper = _react.forwardRef((props, ref) => {
     ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  AlertWrapper.displayName = 'Alert.Wrapper';
 const AlertIcon = _react.forwardRef((props, ref) => {
   let { children, ...rest } = props;
   let { type } = (0, _index.useSafeContext)(AlertContext);
@@ -95,7 +99,11 @@ const AlertIcon = _react.forwardRef((props, ref) => {
     children ?? _react.createElement(StatusIcon, null),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  AlertIcon.displayName = 'Alert.Icon';
 const AlertMessage = _index.polymorphic.span('iui-alert-message');
+if ('development' === process.env.NODE_ENV)
+  AlertMessage.displayName = 'Alert.Message';
 const AlertAction = _react.forwardRef((props, ref) => {
   let { children, className, ...rest } = props;
   let { type } = (0, _index.useSafeContext)(AlertContext);
@@ -116,6 +124,8 @@ const AlertAction = _react.forwardRef((props, ref) => {
     children,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  AlertAction.displayName = 'Alert.Action';
 const AlertCloseButton = _react.forwardRef((props, ref) => {
   let { children, ...rest } = props;
   return _react.createElement(
@@ -130,6 +140,8 @@ const AlertCloseButton = _react.forwardRef((props, ref) => {
     children ?? _react.createElement(_index.SvgCloseSmall, null),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  AlertCloseButton.displayName = 'Alert.CloseButton';
 const Alert = Object.assign(AlertComponent, {
   Wrapper: AlertWrapper,
   Icon: AlertIcon,

package/cjs/core/Avatar/Avatar.js

@@ -80,3 +80,4 @@ const Avatar = _react.forwardRef((props, ref) => {
       : null,
   );
 });
+if ('development' === process.env.NODE_ENV) Avatar.displayName = 'Avatar';

package/cjs/core/AvatarGroup/AvatarGroup.js

@@ -74,3 +74,5 @@ const AvatarGroup = _react.forwardRef((props, ref) => {
       ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  AvatarGroup.displayName = 'AvatarGroup';

package/cjs/core/Backdrop/Backdrop.js

@@ -29,3 +29,4 @@ const Backdrop = _react.forwardRef((props, ref) => {
     ...rest,
   });
 });
+if ('development' === process.env.NODE_ENV) Backdrop.displayName = 'Backdrop';

package/cjs/core/Badge/Badge.js

@@ -54,3 +54,4 @@ const Badge = _react.forwardRef((props, forwardedRef) => {
     children,
   );
 });
+if ('development' === process.env.NODE_ENV) Badge.displayName = 'Badge';

package/cjs/core/Breadcrumbs/Breadcrumbs.js

@@ -58,6 +58,8 @@ const BreadcrumbsComponent = _react.forwardRef((props, forwardedRef) => {
     ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  BreadcrumbsComponent.displayName = 'Breadcrumbs';
 const BreadcrumbContent = (props) => {
   let { children: items, currentIndex, overflowButton, separator } = props;
   let { visibleCount } = _index.OverflowContainer.useContext();
@@ -134,8 +136,13 @@ const ListItem = ({ item, isActive }) => {
     children?.type === 'span' ||
     children?.type === 'a' ||
     children?.type === _Button.Button
-  )
+  ) {
+    if ('development' === process.env.NODE_ENV)
+      logWarning(
+        'Directly using Button/a/span as Breadcrumbs children is deprecated, please use `Breadcrumbs.Item` instead.',
+      );
     children = _react.createElement(BreadcrumbsItem, children.props);
+  }
   return _react.createElement(
     _index.Box,
     {
@@ -186,6 +193,8 @@ const BreadcrumbsItem = _react.forwardRef((props, forwardedRef) => {
     ...commonProps,
   });
 });
+if ('development' === process.env.NODE_ENV)
+  BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
 const Breadcrumbs = Object.assign(BreadcrumbsComponent, {
   Item: BreadcrumbsItem,
 });

package/cjs/core/ButtonGroup/ButtonGroup.js

@@ -27,6 +27,8 @@ const _index = require('../../utils/index.js');
 const _react1 = require('@floating-ui/react');
 const _Tooltip = require('../Tooltip/Tooltip.js');
 const ButtonGroupContext = _react.createContext(void 0);
+if ('development' === process.env.NODE_ENV)
+  ButtonGroupContext.displayName = 'ButtonGroupContext';
 const ButtonGroup = _react.forwardRef((props, forwardedRef) => {
   let {
     children: childrenProp,
@@ -87,6 +89,8 @@ const ButtonGroup = _react.forwardRef((props, forwardedRef) => {
     ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  ButtonGroup.displayName = 'ButtonGroup';
 const BaseGroup = _react.forwardRef((props, forwardedRef) => {
   let { orientation, className, ...rest } = props;
   return _react.createElement(_index.Box, {

package/cjs/core/Buttons/Button.js

@@ -99,3 +99,4 @@ const Button = _react.forwardRef((props, ref) => {
       }),
   );
 });
+if ('development' === process.env.NODE_ENV) Button.displayName = 'Button';

package/cjs/core/Buttons/DropdownButton.js

@@ -60,3 +60,5 @@ const DropdownButton = _react.forwardRef((props, forwardedRef) => {
     ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  DropdownButton.displayName = 'DropdownButton';

package/cjs/core/Buttons/IconButton.js

@@ -37,6 +37,13 @@ const IconButton = _react.forwardRef((props, ref) => {
   );
   let hasPopoverOpen = _react.useContext(_Popover.PopoverOpenContext);
   let logWarning = (0, _index.useWarningLogger)();
+  if (
+    'development' === process.env.NODE_ENV &&
+    !label &&
+    !props['aria-label'] &&
+    !props['aria-labelledby']
+  )
+    logWarning('IconButton is missing the `label` prop.');
   let button = _react.createElement(
     _index.ButtonBase,
     {
@@ -79,3 +86,5 @@ const IconButton = _react.forwardRef((props, ref) => {
       )
     : button;
 });
+if ('development' === process.env.NODE_ENV)
+  IconButton.displayName = 'IconButton';

package/cjs/core/Buttons/IdeasButton.js

@@ -33,3 +33,5 @@ const IdeasButton = _react.forwardRef((props, ref) => {
     feedbackLabel,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  IdeasButton.displayName = 'IdeasButton';

package/cjs/core/Buttons/SplitButton.js

@@ -111,3 +111,5 @@ const SplitButton = _react.forwardRef((props, forwardedRef) => {
     ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  SplitButton.displayName = 'SplitButton';

package/cjs/core/Carousel/Carousel.js

@@ -76,6 +76,8 @@ const CarouselComponent = _react.forwardRef((props, ref) => {
     ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  CarouselComponent.displayName = 'Carousel';
 const Carousel = Object.assign(CarouselComponent, {
   Slider: _CarouselSlider.CarouselSlider,
   Slide: _CarouselSlide.CarouselSlide,

package/cjs/core/Carousel/CarouselContext.js

@@ -11,3 +11,5 @@ Object.defineProperty(exports, 'CarouselContext', {
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
 const CarouselContext = _react.createContext(void 0);
+if ('development' === process.env.NODE_ENV)
+  CarouselContext.displayName = 'CarouselContext';

package/cjs/core/Carousel/CarouselDot.js

@@ -34,3 +34,5 @@ const CarouselDot = _react.forwardRef((props, ref) => {
     ...rest,
   });
 });
+if ('development' === process.env.NODE_ENV)
+  CarouselDot.displayName = 'Carousel.Dot';

package/cjs/core/Carousel/CarouselDotsList.js

@@ -163,3 +163,5 @@ const CarouselDotsList = _react.forwardRef((props, ref) => {
     ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  CarouselDotsList.displayName = 'Carousel.DotsList';

package/cjs/core/Carousel/CarouselNavigation.js

@@ -49,6 +49,8 @@ const CarouselNavigationComponent = _react.forwardRef((props, ref) => {
       ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  CarouselNavigationComponent.displayName = 'Carousel.Navigation';
 const PreviousButton = _react.forwardRef((props, ref) => {
   let context = _react.useContext(_CarouselContext.CarouselContext);
   if (!context)
@@ -75,6 +77,8 @@ const PreviousButton = _react.forwardRef((props, ref) => {
     _react.createElement(_index.SvgChevronLeft, null),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  PreviousButton.displayName = 'Carousel.Navigation.PreviousButton';
 const NextButton = _react.forwardRef((props, ref) => {
   let context = _react.useContext(_CarouselContext.CarouselContext);
   if (!context)
@@ -101,6 +105,8 @@ const NextButton = _react.forwardRef((props, ref) => {
     _react.createElement(_index.SvgChevronRight, null),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  NextButton.displayName = 'Carousel.Navigation.NextButton';
 const CarouselNavigation = Object.assign(CarouselNavigationComponent, {
   PreviousButton,
   NextButton,

package/cjs/core/Carousel/CarouselSlide.js

@@ -54,3 +54,5 @@ const CarouselSlide = _react.forwardRef((props, ref) => {
     children,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  CarouselSlide.displayName = 'Carousel.Slide';

package/cjs/core/Carousel/CarouselSlider.js

@@ -71,3 +71,5 @@ const CarouselSlider = _react.forwardRef((props, ref) => {
     items,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  CarouselSlider.displayName = 'Carousel.Slider';

package/cjs/core/Checkbox/Checkbox.js

@@ -98,3 +98,4 @@ const Checkbox = _react.forwardRef((props, ref) => {
       )
     : checkbox;
 });
+if ('development' === process.env.NODE_ENV) Checkbox.displayName = 'Checkbox';

package/cjs/core/ColorPicker/ColorBuilder.js

@@ -343,3 +343,5 @@ const ColorBuilder = _react.forwardRef((props, ref) => {
       }),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  ColorBuilder.displayName = 'ColorBuilder';

package/cjs/core/ColorPicker/ColorInputPanel.js

@@ -82,7 +82,7 @@ const ColorInputPanel = _react.forwardRef((props, ref) => {
     );
   let handleColorInputChange = () => {
     let color;
-    if ('hex' === currentFormat)
+    if ('hex' === currentFormat) {
       try {
         let value = input[0].replace(/ /g, '').toLowerCase();
         color = _index.ColorValue.create(value);
@@ -92,6 +92,7 @@ const ColorInputPanel = _react.forwardRef((props, ref) => {
         setValidHexInput(false);
         return;
       }
+    }
     if ('hsl' === currentFormat) {
       let [h, s, l, a] = input.map(Number);
       if (
@@ -443,3 +444,5 @@ const ColorInputPanel = _react.forwardRef((props, ref) => {
     ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  ColorInputPanel.displayName = 'ColorInputPanel';

package/cjs/core/ColorPicker/ColorPalette.js

@@ -80,3 +80,5 @@ const ColorPalette = _react.forwardRef((props, ref) => {
     ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  ColorPalette.displayName = 'ColorPalette';

package/cjs/core/ColorPicker/ColorPicker.js

@@ -97,3 +97,5 @@ const ColorPicker = _react.forwardRef((props, forwardedRef) => {
     ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  ColorPicker.displayName = 'ColorPicker';

package/cjs/core/ColorPicker/ColorSwatch.js

@@ -54,3 +54,5 @@ const ColorSwatch = _react.forwardRef((props, ref) => {
       ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  ColorSwatch.displayName = 'ColorSwatch';

package/cjs/core/ComboBox/ComboBox.js

@@ -71,7 +71,9 @@ const ComboBox = _react.forwardRef((props, forwardedRef) => {
   let getSelectedIndexes = _react.useCallback(
     (value) => {
       if (void 0 === value) return;
-      if (isMultipleEnabled(value, multiple)) {
+      if (!isMultipleEnabled(value, multiple))
+        return options.findIndex((option) => option.value === value);
+      {
         let indexArray = [];
         value?.forEach((value) => {
           let indexToAdd = options.findIndex(
@@ -81,7 +83,6 @@ const ComboBox = _react.forwardRef((props, forwardedRef) => {
         });
         return indexArray;
       }
-      return options.findIndex((option) => option.value === value);
     },
     [multiple, options],
   );
@@ -199,7 +200,7 @@ const ComboBox = _react.forwardRef((props, forwardedRef) => {
     },
     [multiple, onChangeProp, optionsRef],
   );
-  let onClickHandler = _react.useCallback(
+  let handleOptionSelection = _react.useCallback(
     (__originalIndex) => {
       inputRef.current?.focus({
         preventScroll: true,
@@ -260,7 +261,7 @@ const ComboBox = _react.forwardRef((props, forwardedRef) => {
       return customItem
         ? _react.cloneElement(customItem, {
             onClick: (e) => {
-              onClickHandler(__originalIndex);
+              handleOptionSelection(__originalIndex);
               customItem.props.onClick?.(e);
             },
             focused: focusedIndex === __originalIndex,
@@ -282,7 +283,7 @@ const ComboBox = _react.forwardRef((props, forwardedRef) => {
               ...restOptions,
               isSelected: isMenuItemSelected(__originalIndex),
               onClick: () => {
-                onClickHandler(__originalIndex);
+                handleOptionSelection(__originalIndex);
               },
               index: __originalIndex,
               'data-iui-filtered-index': filteredIndex,
@@ -296,7 +297,7 @@ const ComboBox = _react.forwardRef((props, forwardedRef) => {
       id,
       isMenuItemSelected,
       itemRenderer,
-      onClickHandler,
+      handleOptionSelection,
       optionsExtraInfo,
     ],
   );
@@ -340,29 +341,47 @@ const ComboBox = _react.forwardRef((props, forwardedRef) => {
   return _react.createElement(
     _helpers.ComboBoxRefsContext.Provider,
     {
-      value: {
-        inputRef,
-        menuRef,
-        optionsExtraInfo,
-      },
+      value: _react.useMemo(
+        () => ({
+          inputRef,
+          menuRef,
+          optionsExtraInfo,
+        }),
+        [optionsExtraInfo],
+      ),
     },
     _react.createElement(
       _helpers.ComboBoxStateContext.Provider,
       {
-        value: {
-          id,
-          isOpen,
-          focusedIndex,
-          setFocusedIndex,
-          onClickHandler,
-          enableVirtualization,
-          filteredOptions,
-          getMenuItem,
-          multiple,
-          popover,
-          show,
-          hide,
-        },
+        value: _react.useMemo(
+          () => ({
+            id,
+            isOpen,
+            focusedIndex,
+            setFocusedIndex,
+            onClickHandler: handleOptionSelection,
+            enableVirtualization,
+            filteredOptions,
+            getMenuItem,
+            multiple,
+            popover,
+            show,
+            hide,
+          }),
+          [
+            enableVirtualization,
+            filteredOptions,
+            focusedIndex,
+            getMenuItem,
+            handleOptionSelection,
+            hide,
+            id,
+            isOpen,
+            multiple,
+            popover,
+            show,
+          ],
+        ),
       },
       _react.createElement(
         _ComboBoxInputContainer.ComboBoxInputContainer,
@@ -376,13 +395,25 @@ const ComboBox = _react.forwardRef((props, forwardedRef) => {
           disabled: inputProps?.disabled,
           ...inputProps,
           onChange: handleOnInput,
+          'aria-describedby': [
+            multiple ? `${id}-selected-live` : void 0,
+            inputProps?.['aria-describedby'],
+          ]
+            .filter(Boolean)
+            .join(' '),
           selectTags: isMultipleEnabled(selectedIndexes, multiple)
             ? selectedIndexes
                 ?.map((index) => {
-                  let item = options[index];
+                  let option = options[index];
+                  let optionId = getOptionId(option, id);
+                  let { __originalIndex } = optionsExtraInfo[optionId];
                   return _react.createElement(_SelectTag.SelectTag, {
-                    key: item.label,
-                    label: item.label,
+                    key: option.label,
+                    label: option.label,
+                    onRemove: () => {
+                      handleOptionSelection(__originalIndex);
+                      hide();
+                    },
                   });
                 })
                 .filter(Boolean)
@@ -396,6 +427,7 @@ const ComboBox = _react.forwardRef((props, forwardedRef) => {
         multiple
           ? _react.createElement(_index.AutoclearingHiddenLiveRegion, {
               text: liveRegionSelection,
+              id: `${id}-selected-live`,
             })
           : null,
       ),
@@ -412,3 +444,4 @@ const ComboBox = _react.forwardRef((props, forwardedRef) => {
     ),
   );
 });
+if ('development' === process.env.NODE_ENV) ComboBox.displayName = 'ComboBox';

package/cjs/core/ComboBox/ComboBoxEndIcon.js

@@ -39,3 +39,5 @@ const ComboBoxEndIcon = _react.forwardRef((props, forwardedRef) => {
       }),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  ComboBoxEndIcon.displayName = 'ComboBoxEndIcon';

package/cjs/core/ComboBox/ComboBoxInput.js

@@ -165,7 +165,6 @@ const ComboBoxInput = _react.forwardRef((props, forwardedRef) => {
         }),
         ...style,
       },
-      'aria-describedby': multiple ? `${id}-selected-live` : void 0,
       size: size,
       ...popover.getReferenceProps({
         ...rest,
@@ -186,9 +185,10 @@ const ComboBoxInput = _react.forwardRef((props, forwardedRef) => {
           {
             ref: tagContainerWidthRef,
             selectedItems: selectTags,
-            id: `${id}-selected-live`,
           },
         )
       : null,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  ComboBoxInput.displayName = 'ComboBoxInput';

package/cjs/core/ComboBox/ComboBoxInputContainer.js

@@ -41,3 +41,5 @@ const ComboBoxInputContainer = _react.forwardRef((props, forwardedRef) => {
     _react.createElement(_index.InputWithIcon, null, children),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  ComboBoxInputContainer.displayName = 'ComboBoxInputContainer';

package/cjs/core/ComboBox/ComboBoxMenu.js

@@ -142,3 +142,5 @@ const ComboBoxMenu = _react.forwardRef((props, forwardedRef) => {
     )
   );
 });
+if ('development' === process.env.NODE_ENV)
+  ComboBoxMenu.displayName = 'ComboBoxMenu';

package/cjs/core/ComboBox/ComboBoxMenuItem.js

@@ -22,7 +22,7 @@ const ComboBoxMenuItem = _react.memo(
       value,
       onClick,
       sublabel,
-      size = sublabel ? 'large' : 'default',
+      size = !!sublabel ? 'large' : 'default',
       startIcon,
       endIcon,
       role = 'option',
@@ -86,3 +86,5 @@ const ComboBoxMenuItem = _react.memo(
     );
   }),
 );
+if ('development' === process.env.NODE_ENV)
+  ComboBoxMenuItem.displayName = 'ComboBoxMenuItem';

package/cjs/core/ComboBox/ComboBoxMultipleContainer.js

@@ -19,3 +19,5 @@ const ComboBoxMultipleContainer = _react.forwardRef((props, ref) => {
     ...rest,
   });
 });
+if ('development' === process.env.NODE_ENV)
+  ComboBoxMultipleContainer.displayName = 'ComboBoxMultipleContainer';

package/cjs/core/ComboBox/helpers.js

@@ -20,4 +20,8 @@ _export(exports, {
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
 const ComboBoxRefsContext = _react.createContext(void 0);
+if ('development' === process.env.NODE_ENV)
+  ComboBoxRefsContext.displayName = 'ComboBoxRefsContext';
 const ComboBoxStateContext = _react.createContext(void 0);
+if ('development' === process.env.NODE_ENV)
+  ComboBoxStateContext.displayName = 'ComboBoxStateContext';

package/cjs/core/DatePicker/DatePicker.js

@@ -151,6 +151,13 @@ const DatePicker = _react.forwardRef((props, forwardedRef) => {
     ...rest
   } = props;
   let logWarning = (0, _index.useWarningLogger)();
+  if ('development' === process.env.NODE_ENV) {
+    let onlyOneRangePropPassed = (startDate ? 1 : 0) + (endDate ? 1 : 0) === 1;
+    if (enableRangeSelect && onlyOneRangePropPassed)
+      logWarning(
+        '`DatePicker` with `enableRangeSelect` needs *both* `startDate` and `endDate` to either be `Date` or `undefined`. Passing `Date` to just one of them is not allowed.',
+      );
+  }
   let monthNames = localizedNames?.months ?? defaultMonths;
   let shortDays = localizedNames?.shortDays ?? defaultShortDays;
   let longDays = localizedNames?.days ?? defaultLongDays;
@@ -258,7 +265,7 @@ const DatePicker = _react.forwardRef((props, forwardedRef) => {
     setFocusedDay(getNewFocusedDate(newYear, newMonth));
   };
   let onDayClick = (day) => {
-    if (enableRangeSelect) {
+    if (enableRangeSelect)
       if (isSelectingStartDate) {
         if (day.getMonth() !== selectedStartDay?.getMonth())
           setMonthAndYear(day.getMonth(), day.getFullYear());
@@ -302,7 +309,7 @@ const DatePicker = _react.forwardRef((props, forwardedRef) => {
           setIsSelectingStartDate(true);
         }
       }
-    } else {
+    else {
       if (day.getMonth() !== selectedDay?.getMonth())
         setMonthAndYear(day.getMonth(), day.getFullYear());
       let currentDate = selectedDay ?? new Date();
@@ -595,3 +602,5 @@ const DatePicker = _react.forwardRef((props, forwardedRef) => {
       }),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  DatePicker.displayName = 'DatePicker';