@connectif/ui-components 6.0.5 → 6.0.7

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # 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
+
+- Audit issues.
+- Focus border state in `SelectComponent`.
+
+### Changed
+
+- Scrollbars are hidden by default and shown on hover within the container.
+
+### Added
+
+- `mdiEmailPlus` and `mdiEmailRemove` icons.
+
 ## [6.0.5] - 2026-03-31
 
 ### Added

package/dist/components/icon/icons.d.ts

@@ -649,7 +649,9 @@ export declare const icons: {
     'email-open': string;
     'email-open-outline': string;
     'email-outline': string;
+    'email-plus': string;
     'email-plus-outline': string;
+    'email-remove': string;
     'email-secure': string;
     'email-variant': string;
     emby: string;

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

@@ -1508,8 +1508,10 @@ import {
   mdiEmailOpen,
   mdiEmailOpenOutline,
   mdiEmailOutline,
+  mdiEmailPlus,
   mdiEmailPlusOutline,
   mdiEmailLock,
+  mdiEmailRemove,
   mdiEmailVariant,
   mdiEmoticon,
   mdiEmoticonCool,
@@ -3311,7 +3313,9 @@ var icons = {
   "email-open": mdiEmailOpen,
   "email-open-outline": mdiEmailOpenOutline,
   "email-outline": mdiEmailOutline,
+  "email-plus": mdiEmailPlus,
   "email-plus-outline": mdiEmailPlusOutline,
+  "email-remove": mdiEmailRemove,
   "email-secure": mdiEmailLock,
   "email-variant": mdiEmailVariant,
   emby: "M11,2L6,7L7,8L2,13L7,18L8,17L13,22L18,17L17,16L22,11L17,6L16,7L11,2M10,8.5L16,12L10,15.5V8.5Z",
@@ -11122,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(
@@ -11472,8 +11479,11 @@ var globalStyles = {
   ".Slim-Vertical-Scroll": {
     "@-moz-document url-prefix()": {
       "&": {
-        scrollbarColor: "silver transparent",
+        scrollbarColor: "transparent transparent",
         scrollbarWidth: "auto"
+      },
+      "&:hover": {
+        scrollbarColor: "silver transparent"
       }
     },
     overflow: "auto",
@@ -11489,15 +11499,23 @@ var globalStyles = {
       borderRadius: "4px"
     },
     "&::-webkit-scrollbar-thumb": {
-      background: "silver",
+      background: "transparent",
       borderRadius: "4px"
+    },
+    "&:hover": {
+      "&::-webkit-scrollbar-thumb": {
+        background: "silver"
+      }
     }
   },
   ".Slim-Horizontal-Scroll": {
     "@-moz-document url-prefix()": {
       "&": {
-        scrollbarColor: "silver transparent",
+        scrollbarColor: "transparent transparent",
         scrollbarWidth: "auto"
+      },
+      "&:hover": {
+        scrollbarColor: "silver transparent"
       }
     },
     overflow: "auto",
@@ -11512,14 +11530,22 @@ var globalStyles = {
       background: "transparent"
     },
     "&::-webkit-scrollbar-thumb": {
-      background: "silver"
+      background: "transparent"
+    },
+    "&:hover": {
+      "&::-webkit-scrollbar-thumb": {
+        background: "silver"
+      }
     }
   },
   ".Slim-Vertical-Horizontal-Scroll": {
     "@-moz-document url-prefix()": {
       "&": {
-        scrollbarColor: "silver transparent",
+        scrollbarColor: "transparent transparent",
         scrollbarWidth: "auto"
+      },
+      "&:hover": {
+        scrollbarColor: "silver transparent"
       }
     },
     overflow: "auto",
@@ -11535,7 +11561,12 @@ var globalStyles = {
       background: "transparent"
     },
     "&::-webkit-scrollbar-thumb": {
-      background: "silver"
+      background: "transparent"
+    },
+    "&:hover": {
+      "&::-webkit-scrollbar-thumb": {
+        background: "silver"
+      }
     }
   },
   ".Fade-In-Out": {
@@ -20453,6 +20484,8 @@ var DateIntervalRangeSelector = ({
   color: color2,
   minDate,
   maxDate,
+  maxSelectableDays,
+  handleSelectionLimits = false,
   comparisonColor,
   intersectionColor,
   showTime,
@@ -20462,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
@@ -20673,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);
   };
@@ -20831,7 +20888,7 @@ var DateIntervalRangeSelector = ({
               ] : []
             ],
             intersectionColor,
-            focusedDate: state.focusedDateInCalendar,
+            focusedDate: state.focusedDateInCalendar ?? dateToSimpleDate(tz4(timezone).toDate(), timezone),
             onSelect: handleSelectDate
           }
         )
@@ -21132,6 +21189,8 @@ var DateIntervalPickerPopover = ({
               intersectionColor,
               maxDate,
               minDate,
+              maxSelectableDays,
+              handleSelectionLimits: variant === "input",
               showTime: !!showTime,
               onChange: setState
             }
@@ -21367,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,
@@ -21397,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: [
@@ -21810,6 +21871,12 @@ var Select = function Select2({
     {
       className: `Cn-Select ${className}`,
       sx: {
+        ...variant !== "transparent" && {
+          "&.Mui-focused": {
+            backgroundColor: "white",
+            borderColor: palette2.primary.main
+          }
+        },
         ...variant === "transparent" && {
           backgroundColor: "transparent",
           borderColor: "transparent",
@@ -21913,7 +21980,8 @@ var Select = function Select2({
       sx: {
         ...variant !== "transparent" && {
           "&.Mui-focused": {
-            backgroundColor: "white"
+            backgroundColor: "white",
+            borderColor: palette2.primary.main
           }
         },
         ...variant === "transparent" && {
@@ -23140,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 = {
@@ -23178,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) => {
@@ -23825,37 +23893,25 @@ var AutocompleteInputSelection = function AutocompleteInputSelection2({
             }
           }
         ),
-        /* @__PURE__ */ jsxs62(Stack_default, { whiteSpace: "nowrap", flex: "1 1 auto", minWidth: 0, children: [
-          !Array.isArray(value) && !!value && /* @__PURE__ */ jsx132(
-            TextEllipsis_default,
-            {
-              typographyVariant: "body2",
-              color: palette2.grey[900],
-              text: renderLabel(
-                value
-              )
-            }
-          ),
-          Array.isArray(value) && /* @__PURE__ */ jsx132(
-            ChipViewer_default,
-            {
-              values: value,
-              ...!disabled && {
-                onRemoveChip: (event, id) => {
-                  onRemoveValue(
-                    event,
-                    Array.isArray(value) ? value.filter(
-                      (v) => v !== id
-                    ) : ""
-                  );
-                }
-              },
-              numberLines: 1,
-              renderChipLabel: (id) => renderLabel(id),
-              forceRecalculate: disabled
-            }
-          )
-        ] })
+        /* @__PURE__ */ jsx132(Stack_default, { whiteSpace: "nowrap", flex: "1 1 auto", minWidth: 0, children: Array.isArray(value) && /* @__PURE__ */ jsx132(
+          ChipViewer_default,
+          {
+            values: value,
+            ...!disabled && {
+              onRemoveChip: (event, id) => {
+                onRemoveValue(
+                  event,
+                  Array.isArray(value) ? value.filter(
+                    (v) => v !== id
+                  ) : ""
+                );
+              }
+            },
+            numberLines: 1,
+            renderChipLabel: (id) => renderLabel(id),
+            forceRecalculate: disabled
+          }
+        ) })
       ]
     }
   );
@@ -23945,7 +24001,7 @@ var AutocompleteInput = function AutocompleteInput2({
       },
       maxLength: maxValueLength,
       placeholder: !canAddValues ? maxValuesText || t("AUTOCOMPLETE.MAX_VALUES") : Array.isArray(value) && value.length > 0 || !Array.isArray(value) && !!value ? "" : placeholder,
-      value: inputValue,
+      value: inputValue || (!Array.isArray(value) ? renderLabel(value) : ""),
       multiline: false,
       disabled: disabled || !canAddValues,
       onChange: (event) => {
@@ -23962,8 +24018,6 @@ var AutocompleteInput = function AutocompleteInput2({
                   value.length - 1
                 )
               );
-            } else if (!inputValue && !Array.isArray(value) && value) {
-              onRemoveValue(event, "");
             }
             break;
           case "Enter":
@@ -23985,7 +24039,7 @@ var AutocompleteInput = function AutocompleteInput2({
         }
       },
       containerRef,
-      startAdornment: /* @__PURE__ */ jsx133(
+      startAdornment: multiple ? /* @__PURE__ */ jsx133(
         AutocompleteInputSelection_default,
         {
           value,
@@ -23996,7 +24050,7 @@ var AutocompleteInput = function AutocompleteInput2({
           onRemoveValue,
           disabled
         }
-      ),
+      ) : void 0,
       endAdornment: /* @__PURE__ */ jsxs63(
         Stack_default,
         {
@@ -24449,12 +24503,13 @@ var Autocomplete = function Autocomplete2({
   const onSearchValueChange = (event, inputValue2) => {
     setInputValue(inputValue2);
     setDirty(true);
+    if (!inputValue2 && !multiple && value) {
+      onChange && onChange(event, "");
+    }
     if (onSearch) {
       onSearch(inputValue2);
       if (inputValue2 && !isOpenPopover) {
         openPopover();
-      } else if (!inputValue2 && !multiple && value) {
-        onChange && onChange(event, "");
       }
       return;
     }
@@ -27724,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: {
@@ -27761,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";
@@ -28388,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,
@@ -28400,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,
     {