@connectif/ui-components 6.0.5 → 6.0.6

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [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/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",
@@ -11472,8 +11476,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 +11496,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 +11527,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 +11558,12 @@ var globalStyles = {
       background: "transparent"
     },
     "&::-webkit-scrollbar-thumb": {
-      background: "silver"
+      background: "transparent"
+    },
+    "&:hover": {
+      "&::-webkit-scrollbar-thumb": {
+        background: "silver"
+      }
     }
   },
   ".Fade-In-Out": {
@@ -21810,6 +21838,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 +21947,8 @@ var Select = function Select2({
       sx: {
         ...variant !== "transparent" && {
           "&.Mui-focused": {
-            backgroundColor: "white"
+            backgroundColor: "white",
+            borderColor: palette2.primary.main
           }
         },
         ...variant === "transparent" && {
@@ -23825,37 +23860,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 +23968,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 +23985,6 @@ var AutocompleteInput = function AutocompleteInput2({
                   value.length - 1
                 )
               );
-            } else if (!inputValue && !Array.isArray(value) && value) {
-              onRemoveValue(event, "");
             }
             break;
           case "Enter":
@@ -23985,7 +24006,7 @@ var AutocompleteInput = function AutocompleteInput2({
         }
       },
       containerRef,
-      startAdornment: /* @__PURE__ */ jsx133(
+      startAdornment: multiple ? /* @__PURE__ */ jsx133(
         AutocompleteInputSelection_default,
         {
           value,
@@ -23996,7 +24017,7 @@ var AutocompleteInput = function AutocompleteInput2({
           onRemoveValue,
           disabled
         }
-      ),
+      ) : void 0,
       endAdornment: /* @__PURE__ */ jsxs63(
         Stack_default,
         {
@@ -24449,12 +24470,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;
     }