@connectif/ui-components 6.0.6 → 7.0.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [7.0.0] - 2026-04-10
+
+### Deprecated
+
+- Deprecated `minimizeIconId` and `onMinimize` props in the `MinimizableWindow` component.
+
+## [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/components/window/MinimizableWindow.d.ts

@@ -27,7 +27,7 @@ export type MinimizableWindowProps = React.PropsWithChildren<{
      */
     backButton?: React.ReactNode;
     /**
-     * Coords to the element to minimize window
+     * Coords to the element to close window
      */
     targetElement: {
         x: number;
@@ -41,10 +41,6 @@ export type MinimizableWindowProps = React.PropsWithChildren<{
      * To change icon sizes. Default S
      */
     iconSizes?: IconButtonProps['size'];
-    /**
-     * The icon ID for the minimize button.
-     */
-    minimizeIconId?: IconButtonProps['iconId'];
     /**
      * The icon ID for the close button.
      */
@@ -54,13 +50,9 @@ export type MinimizableWindowProps = React.PropsWithChildren<{
      */
     backIconId?: IconButtonProps['iconId'];
     /**
-     * Custom actions to display on the right side of the header, next to the minimize and close buttons.
+     * Custom actions to display on the right side of the header, next to the close button.
      */
     rightActions?: React.ReactNode;
-    /**
-     * Callback fired when the component requests to be minimized.
-     */
-    onMinimize: () => void;
     /**
      * Callback fired when the component requests to be closed.
      */
@@ -71,8 +63,8 @@ export type MinimizableWindowProps = React.PropsWithChildren<{
     onBack?: () => void;
 } & Pick<StackProps, 'sx'>>;
 /**
- * A component that displays a window with a title, a minimize button, and a close button.
- * The window can be minimized and closed.
+ * A component that displays a window with a title and a close button.
+ * The window closes by shrinking towards a target element.
  * The window can have a back button.
  * The ref object exposes the window and header elements.
  */
@@ -97,7 +89,7 @@ declare const MinimizableWindow: React.ForwardRefExoticComponent<{
      */
     backButton?: React.ReactNode;
     /**
-     * Coords to the element to minimize window
+     * Coords to the element to close window
      */
     targetElement: {
         x: number;
@@ -111,10 +103,6 @@ declare const MinimizableWindow: React.ForwardRefExoticComponent<{
      * To change icon sizes. Default S
      */
     iconSizes?: IconButtonProps["size"];
-    /**
-     * The icon ID for the minimize button.
-     */
-    minimizeIconId?: IconButtonProps["iconId"];
     /**
      * The icon ID for the close button.
      */
@@ -124,13 +112,9 @@ declare const MinimizableWindow: React.ForwardRefExoticComponent<{
      */
     backIconId?: IconButtonProps["iconId"];
     /**
-     * Custom actions to display on the right side of the header, next to the minimize and close buttons.
+     * Custom actions to display on the right side of the header, next to the close button.
      */
     rightActions?: React.ReactNode;
-    /**
-     * Callback fired when the component requests to be minimized.
-     */
-    onMinimize: () => void;
     /**
      * Callback fired when the component requests to be closed.
      */

package/dist/i18n/en.d.ts

@@ -2,7 +2,6 @@ export declare const en: {
     MINIMIZABLE_WINDOW: {
         CLOSE: string;
         GO_BACK: string;
-        MINIMIZE: string;
     };
     IMAGE_EDITOR: {
         ACTUAL_SIZE: string;

package/dist/i18n/es.d.ts

@@ -2,7 +2,6 @@ export declare const es: {
     MINIMIZABLE_WINDOW: {
         CLOSE: string;
         GO_BACK: string;
-        MINIMIZE: string;
     };
     IMAGE_EDITOR: {
         ACTUAL_SIZE: string;

package/dist/i18n/fr.d.ts

@@ -2,7 +2,6 @@ export declare const fr: {
     MINIMIZABLE_WINDOW: {
         CLOSE: string;
         GO_BACK: string;
-        MINIMIZE: string;
     };
     IMAGE_EDITOR: {
         ACTUAL_SIZE: string;

package/dist/i18n/it.d.ts

@@ -2,7 +2,6 @@ export declare const it: {
     MINIMIZABLE_WINDOW: {
         CLOSE: string;
         GO_BACK: string;
-        MINIMIZE: string;
     };
     IMAGE_EDITOR: {
         ACTUAL_SIZE: string;

package/dist/i18n/pt.d.ts

@@ -2,7 +2,6 @@ export declare const pt: {
     MINIMIZABLE_WINDOW: {
         CLOSE: string;
         GO_BACK: string;
-        MINIMIZE: string;
     };
     IMAGE_EDITOR: {
         ACTUAL_SIZE: string;

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(
@@ -15100,8 +15103,7 @@ __export(en_exports6, {
 });
 var MINIMIZABLE_WINDOW = {
   CLOSE: "Close",
-  GO_BACK: "Go back",
-  MINIMIZE: "Minimize"
+  GO_BACK: "Go back"
 };
 var en_default6 = {
   MINIMIZABLE_WINDOW
@@ -15387,8 +15389,7 @@ __export(es_exports6, {
 });
 var MINIMIZABLE_WINDOW2 = {
   CLOSE: "Cerrar",
-  GO_BACK: "Ir atr\xE1s",
-  MINIMIZE: "Minimizar"
+  GO_BACK: "Ir atr\xE1s"
 };
 var es_default6 = {
   MINIMIZABLE_WINDOW: MINIMIZABLE_WINDOW2
@@ -15674,8 +15675,7 @@ __export(fr_exports6, {
 });
 var MINIMIZABLE_WINDOW3 = {
   CLOSE: "Fermer",
-  GO_BACK: "Retourner en arri\xE8re",
-  MINIMIZE: "R\xE9duire"
+  GO_BACK: "Retourner en arri\xE8re"
 };
 var fr_default6 = {
   MINIMIZABLE_WINDOW: MINIMIZABLE_WINDOW3
@@ -15961,8 +15961,7 @@ __export(it_exports6, {
 });
 var MINIMIZABLE_WINDOW4 = {
   CLOSE: "Chiudere",
-  GO_BACK: "Torna indietro",
-  MINIMIZE: "Ridurre al minimo"
+  GO_BACK: "Torna indietro"
 };
 var it_default6 = {
   MINIMIZABLE_WINDOW: MINIMIZABLE_WINDOW4
@@ -16248,8 +16247,7 @@ __export(pt_exports6, {
 });
 var MINIMIZABLE_WINDOW5 = {
   CLOSE: "Fechar",
-  GO_BACK: "Voltar atr\xE1s",
-  MINIMIZE: "Minimizar"
+  GO_BACK: "Voltar atr\xE1s"
 };
 var pt_default6 = {
   MINIMIZABLE_WINDOW: MINIMIZABLE_WINDOW5
@@ -20481,6 +20479,8 @@ var DateIntervalRangeSelector = ({
   color: color2,
   minDate,
   maxDate,
+  maxSelectableDays,
+  handleSelectionLimits = false,
   comparisonColor,
   intersectionColor,
   showTime,
@@ -20490,8 +20490,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 +20707,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 +20883,7 @@ var DateIntervalRangeSelector = ({
               ] : []
             ],
             intersectionColor,
-            focusedDate: state.focusedDateInCalendar,
+            focusedDate: state.focusedDateInCalendar ?? dateToSimpleDate(tz4(timezone).toDate(), timezone),
             onSelect: handleSelectDate
           }
         )
@@ -21160,6 +21184,8 @@ var DateIntervalPickerPopover = ({
               intersectionColor,
               maxDate,
               minDate,
+              maxSelectableDays,
+              handleSelectionLimits: variant === "input",
               showTime: !!showTime,
               onChange: setState
             }
@@ -21395,6 +21421,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 +21453,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 +23203,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 +23241,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 +27774,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 +27811,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 +28438,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 +28450,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,
     {
@@ -28701,11 +28729,9 @@ var MinimizableWindow = React98.forwardRef(function MinimizableWindow2({
   targetElement,
   contentHeight,
   iconSizes: iconSizes4 = "S",
-  minimizeIconId = "minus",
   closeIconId = "close",
   backIconId = "arrow-left",
   rightActions,
-  onMinimize,
   onClose,
   onBack
 }, ref) {
@@ -28762,26 +28788,6 @@ var MinimizableWindow = React98.forwardRef(function MinimizableWindow2({
       overlayRef.current.style.opacity = "0";
     }
   };
-  const onCloseModal = (ev) => {
-    ev.preventDefault();
-    ev.stopPropagation();
-    setTimeout(() => {
-      onClose && onClose();
-    }, 200);
-    setTimeout(() => {
-      if (overlayRef.current) {
-        overlayRef.current.style.display = "none";
-      }
-    }, 500);
-    setTimeout(() => {
-      if (overlayRef.current) {
-        overlayRef.current.style.removeProperty("left");
-        overlayRef.current.style.removeProperty("top");
-        overlayRef.current.style.removeProperty("display");
-        overlayRef.current.style.removeProperty("transition");
-      }
-    }, 750);
-  };
   return /* @__PURE__ */ jsxs89(Fragment44, { children: [
     isDraggingState && /* @__PURE__ */ jsx185(
       Box_default2,
@@ -28885,44 +28891,27 @@ var MinimizableWindow = React98.forwardRef(function MinimizableWindow2({
                         onMouseDown: (ev) => ev.stopPropagation(),
                         children: [
                           rightActions,
-                          /* @__PURE__ */ jsx185(Box_default2, { children: /* @__PURE__ */ jsx185(
+                          closeable && /* @__PURE__ */ jsx185(Box_default2, { children: /* @__PURE__ */ jsx185(
                             Tooltip_default,
                             {
-                              title: t("MINIMIZABLE_WINDOW.MINIMIZE"),
+                              title: t("MINIMIZABLE_WINDOW.CLOSE"),
                               zIndex: 999999,
                               placement: "top",
                               children: /* @__PURE__ */ jsx185(
                                 IconButton_default,
                                 {
                                   size: iconSizes4,
-                                  iconId: minimizeIconId,
+                                  iconId: closeIconId,
                                   onClick: () => {
                                     applyMinimizeTransition();
                                     setTimeout(() => {
-                                      onMinimize();
+                                      onClose && onClose();
                                     }, 500);
                                   },
                                   sx: iconButtonsStyles
                                 }
                               )
                             }
-                          ) }),
-                          closeable && /* @__PURE__ */ jsx185(Box_default2, { sx: { padding: "0 8px" }, children: /* @__PURE__ */ jsx185(
-                            Tooltip_default,
-                            {
-                              title: t("MINIMIZABLE_WINDOW.CLOSE"),
-                              zIndex: 999999,
-                              placement: "top",
-                              children: /* @__PURE__ */ jsx185(
-                                IconButton_default,
-                                {
-                                  size: iconSizes4,
-                                  iconId: closeIconId,
-                                  onClick: onCloseModal,
-                                  sx: iconButtonsStyles
-                                }
-                              )
-                            }
                           ) })
                         ]
                       }