@connectif/ui-components 6.0.6 → 6.0.7

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## [6.0.7] - 2026-04-09
+
+### Fixed
+
+- Fixed crash when rendering a chip with a tooltip.
+
+### Changed
+
+- `DateIntervalPicker` with input variant now supports selecting future dates.
+
 ## [6.0.6] - 2026-04-08
 
 ### Fixed

package/dist/components/input/date-interval-picker/DateIntervalPicker.d.ts

@@ -95,12 +95,16 @@ export type DateIntervalPickerProps = (DateIntervalPickerDefault | DateIntervalP
     disabled?: boolean;
     /**
      * The minimum date allowed to be selected in the date interval.
-     * By default it will be the maxDate minus the maxSelectableDays
+     * By default:
+     * Input variant: it will allow selecting dates from 1900-01-01 in input.
+     * Other variant: it will be the maxDate minus the maxSelectableDays
      */
     minDate?: Date;
     /**
      * The maximum date allowed to be selected in the date interval.
-     * By default it will be the current date
+     * By default:
+     * Input variant: it will be the current date, or 2100-12-31 when maxDate is not provided.
+     * Other variant: it will be the current date
      */
     maxDate?: Date;
 };

package/dist/components/input/date-interval-picker/DateIntervalRangeSelector.d.ts

@@ -4,10 +4,12 @@ export type DateIntervalRangeSelectorProps = {
     color: string;
     minDate: Date;
     maxDate: Date;
+    maxSelectableDays: number;
+    handleSelectionLimits?: boolean;
     comparisonColor: string;
     intersectionColor: string;
     showTime: boolean;
     onChange: (state: DateIntervalPickerState) => void;
 };
-declare const DateIntervalRangeSelector: ({ state, color, minDate, maxDate, comparisonColor, intersectionColor, showTime, onChange }: DateIntervalRangeSelectorProps) => import("react/jsx-runtime").JSX.Element;
+declare const DateIntervalRangeSelector: ({ state, color, minDate, maxDate, maxSelectableDays, handleSelectionLimits, comparisonColor, intersectionColor, showTime, onChange }: DateIntervalRangeSelectorProps) => import("react/jsx-runtime").JSX.Element;
 export default DateIntervalRangeSelector;

package/dist/index.js

@@ -11126,17 +11126,20 @@ var Chip = React28.forwardRef(function Chip2({
   };
   const iconSizeCurrent = iconSize ?? iconSizes3[size];
   const variantStyles3 = getVariantStyles(theme2, variant);
-  const getIcon = (iconId2) => /* @__PURE__ */ jsx55(Tooltip_default, { title: iconTooltip || "", children: /* @__PURE__ */ jsx55(
-    Icon_default,
-    {
-      id: iconId2,
-      size: iconSizeCurrent,
-      sx: {
-        color: iconColor ?? variantStyles3.iconColor,
-        cursor: !onClick ? "default" : void 0
+  const getIcon = (iconId2) => {
+    const icon = /* @__PURE__ */ jsx55(
+      Icon_default,
+      {
+        id: iconId2,
+        size: iconSizeCurrent,
+        sx: {
+          color: iconColor ?? variantStyles3.iconColor,
+          cursor: !onClick ? "default" : void 0
+        }
       }
-    }
-  ) });
+    );
+    return iconTooltip ? /* @__PURE__ */ jsx55(Tooltip_default, { title: iconTooltip, children: icon }) : icon;
+  };
   const deleteIcon = /* @__PURE__ */ jsxs21(Stack_default, { direction: "row", alignItems: "center", children: [
     iconId && iconRight && getIcon(iconId),
     isDeleteable && onDelete && /* @__PURE__ */ jsx55(
@@ -20481,6 +20484,8 @@ var DateIntervalRangeSelector = ({
   color: color2,
   minDate,
   maxDate,
+  maxSelectableDays,
+  handleSelectionLimits = false,
   comparisonColor,
   intersectionColor,
   showTime,
@@ -20490,8 +20495,14 @@ var DateIntervalRangeSelector = ({
   const dateInputFormat = getDateInputFormatForLocale(locale);
   const { t } = useTranslation();
   const dateInputFormatPlaceholder = dateInputFormat.replace(/Y/g, t("DATE_COMPONENTS.YEAR_LETTER")).replace(/M/g, t("DATE_COMPONENTS.MONTH_LETTER")).replace(/D/g, t("DATE_COMPONENTS.DAY_LETTER"));
-  const minDateTz = tz4(minDate, timezone);
-  const maxDateTz = tz4(maxDate, timezone);
+  const [minDateTz, setMinDateTz] = React58.useState(tz4(minDate, timezone));
+  const [maxDateTz, setMaxDateTz] = React58.useState(tz4(maxDate, timezone));
+  React58.useEffect(() => {
+    setMinDateTz(tz4(minDate, timezone));
+  }, [minDate, timezone]);
+  React58.useEffect(() => {
+    setMaxDateTz(tz4(maxDate, timezone));
+  }, [maxDate, timezone]);
   const formatSimpleDate = (date) => tz4(
     { year: date.year, month: date.month, date: date.day },
     timezone
@@ -20701,7 +20712,25 @@ var DateIntervalRangeSelector = ({
     const date = getSimpleDateFromString(value);
     onChange(setDateOnFocusableInput(date, focusableInput));
   };
+  const setLimitDates = (date) => {
+    if (!date || !maxSelectableDays) {
+      setMinDateTz(tz4(minDate, timezone));
+      setMaxDateTz(tz4(maxDate, timezone));
+      return;
+    }
+    const baseDate = tz4(
+      { year: date.year, month: date.month, date: date.day },
+      timezone
+    );
+    setMinDateTz(baseDate);
+    setMaxDateTz(tz4(baseDate, timezone).add(maxSelectableDays - 1, "days"));
+  };
   const handleSelectDate = (date) => {
+    if (handleSelectionLimits) {
+      setLimitDates(
+        state.highlightedInput === "startDate" ? date : void 0
+      );
+    }
     const newState = setDateOnFocusableInput(date, state.highlightedInput);
     moveFocusToFollowingInput(newState);
   };
@@ -20859,7 +20888,7 @@ var DateIntervalRangeSelector = ({
               ] : []
             ],
             intersectionColor,
-            focusedDate: state.focusedDateInCalendar,
+            focusedDate: state.focusedDateInCalendar ?? dateToSimpleDate(tz4(timezone).toDate(), timezone),
             onSelect: handleSelectDate
           }
         )
@@ -21160,6 +21189,8 @@ var DateIntervalPickerPopover = ({
               intersectionColor,
               maxDate,
               minDate,
+              maxSelectableDays,
+              handleSelectionLimits: variant === "input",
               showTime: !!showTime,
               onChange: setState
             }
@@ -21395,6 +21426,8 @@ var DateIntervalPickerInputButton_default = DateIntervalPickerInputButton;
 
 // src/components/input/date-interval-picker/DateIntervalPicker.tsx
 import { jsx as jsx116, jsxs as jsxs54 } from "react/jsx-runtime";
+var DEFAULT_MIN_DATE = { year: 1900, month: 0, date: 1 };
+var DEFAULT_MAX_DATE = { year: 2100, month: 11, date: 31 };
 var DateIntervalPicker = ({
   color: color2,
   maxSelectableDays,
@@ -21425,8 +21458,8 @@ var DateIntervalPicker = ({
     }
     setAnchorEl(null);
   };
-  const internalMaxDate = maxDate ?? tz7(timezone).toDate();
-  const internalMinDate = minDate ?? tz7(internalMaxDate, timezone).subtract(maxSelectableDays - 1, "days").toDate();
+  const internalMaxDate = maxDate ?? (rest.variant !== "input" ? tz7(timezone).toDate() : tz7(DEFAULT_MAX_DATE, timezone).toDate());
+  const internalMinDate = minDate ?? (rest.variant !== "input" ? tz7(internalMaxDate, timezone).subtract(maxSelectableDays - 1, "days").toDate() : tz7(DEFAULT_MIN_DATE, timezone).toDate());
   const displayEndDate = rest.endDate !== void 0 ? rest.variant !== "input" ? getDisplayEndDate(rest.endDate, timezone, !!rest.showTime) : rest.endDate : void 0;
   const isEndDateVisible = displayEndDate !== void 0 && !isSameDate(rest.startDate, displayEndDate);
   return /* @__PURE__ */ jsxs54("div", { style: { display: "inline-flex" }, children: [
@@ -23175,7 +23208,7 @@ import * as React71 from "react";
 // src/components/input/SelectPopover.tsx
 import * as React70 from "react";
 import { Grid as Grid4, Stack as Stack12 } from "@mui/material";
-import { useState as useState27 } from "react";
+import { useState as useState28 } from "react";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { jsx as jsx130, jsxs as jsxs60 } from "react/jsx-runtime";
 var defaultItemsColorStyles = {
@@ -23213,9 +23246,9 @@ var SelectPopover = function SelectPopover2({
   itemsTitle
 }) {
   const { t } = useTranslation();
-  const [searchText, setSearchText] = useState27("");
-  const [isScrollBottom, setIsScrollBottom] = useState27(false);
-  const [currentItems, setCurrentItems] = useState27([]);
+  const [searchText, setSearchText] = useState28("");
+  const [isScrollBottom, setIsScrollBottom] = useState28(false);
+  const [currentItems, setCurrentItems] = useState28([]);
   const [currentSelectedItems, setCurrentSelectedItems] = React70.useState([]);
   const prevSelectedItemsIdsRef = React70.useRef([]);
   const onSearchTextChanged = (text) => {
@@ -27746,7 +27779,7 @@ import MuiTabs from "@mui/material/Tabs";
 
 // src/components/layout/SwipeableViews.tsx
 import * as React93 from "react";
-import { useEffect as useEffect26, useRef as useRef32, useState as useState38 } from "react";
+import { useEffect as useEffect27, useRef as useRef32, useState as useState39 } from "react";
 import { jsx as jsx165 } from "react/jsx-runtime";
 var styles = {
   container: {
@@ -27783,9 +27816,9 @@ function SwipeableViews({
   const containerRef = useRef32(null);
   const scrollTimeout = useRef32(null);
   const scrollingMethod = useRef32("none");
-  const [previousIndex, setPreviousIndex] = useState38(index);
+  const [previousIndex, setPreviousIndex] = useState39(index);
   const hideScrollAnimation = useRef32(true);
-  useEffect26(() => {
+  useEffect27(() => {
     if (containerRef.current) {
       if (scrollingMethod.current === "manual") {
         scrollingMethod.current = "none";
@@ -28410,7 +28443,7 @@ var Toolbar_default = Toolbar;
 
 // src/components/toolbar/ToolbarTitle.tsx
 import * as React97 from "react";
-import { useState as useState41 } from "react";
+import { useState as useState42 } from "react";
 import { jsx as jsx180, jsxs as jsxs87 } from "react/jsx-runtime";
 var ToolbarTitle = React97.forwardRef(function ToolbarTitle2({
   title,
@@ -28422,7 +28455,7 @@ var ToolbarTitle = React97.forwardRef(function ToolbarTitle2({
   const textElementRef = React97.useRef(
     null
   );
-  const [showHoverActions, setShowHoverActions] = useState41(false);
+  const [showHoverActions, setShowHoverActions] = useState42(false);
   return /* @__PURE__ */ jsx180(Box_default2, { sx: { maxWidth: "100%" }, children: /* @__PURE__ */ jsx180(
     TextEllipsisTooltip_default,
     {