@connectif/ui-components 4.0.0 → 4.0.2

package/dist/index.js

@@ -8466,6 +8466,7 @@ var IconButton = React11.forwardRef(function IconButton2({
   sx,
   className = "",
   "data-test": dataTest,
+  disableInteractionEffects = false,
   ...props
 }, ref) {
   const colorStyle = colorStyles[variant];
@@ -8481,8 +8482,32 @@ var IconButton = React11.forwardRef(function IconButton2({
     {
       className: `Cn-IconButton ${className}`,
       ref,
+      ...disableInteractionEffects && {
+        disableRipple: true,
+        disableFocusRipple: true,
+        disableTouchRipple: true
+      },
       ...props,
-      sx: { ...colorStyle, ...sizeStyle, ...shapeStyle, ...sx },
+      sx: {
+        ...colorStyle,
+        ...sizeStyle,
+        ...shapeStyle,
+        ...disableInteractionEffects && {
+          "&:hover": {
+            backgroundColor: "transparent"
+          },
+          "&:active": {
+            backgroundColor: "transparent"
+          },
+          "&.Mui-focusVisible": {
+            backgroundColor: "transparent"
+          },
+          "& .MuiTouchRipple-root": {
+            display: "none"
+          }
+        },
+        ...sx
+      },
       ...dataTest && {
         "data-test": dataTest
       },
@@ -11181,6 +11206,7 @@ var Chip = React28.forwardRef(function Chip2({
   avatarProps,
   href,
   tooltip,
+  disableDeleteRipple = false,
   onMouseDownDelete,
   ...rest
 }, ref) {
@@ -11215,7 +11241,8 @@ var Chip = React28.forwardRef(function Chip2({
         },
         size,
         onClick: onDelete,
-        onMouseDown: onMouseDownDelete
+        onMouseDown: onMouseDownDelete,
+        disableInteractionEffects: disableDeleteRipple
       }
     )
   ] });
@@ -11402,7 +11429,7 @@ var CardTable = ({ rows }) => /* @__PURE__ */ jsx60(Box_default2, { sx: { p: "0
 var CardTable_default = CardTable;
 
 // src/components/card/EnhancedCard.tsx
-import { Stack as Stack4 } from "@mui/material";
+import { Stack as Stack5 } from "@mui/material";
 import * as React31 from "react";
 
 // src/components/chip/MenuChip.tsx
@@ -11591,8 +11618,10 @@ var ChipContainer = ({
 var ChipContainer_default = ChipContainer;
 
 // src/components/chip/ChipViewer.tsx
+import { Stack as Stack4 } from "@mui/material";
 import { jsx as jsx63 } from "react/jsx-runtime";
 var CHIP_DATA_TEST_ID = "chip-viewer-chip";
+var CHIP_VIEWER_ROOT_ID = "chip-viewer-root";
 var CHIPS_GAP = 4;
 var ROW_HEIGHT = 24;
 var chipViewerStyle = {
@@ -11618,43 +11647,87 @@ var ChipViewer = ({
   variant = "circle",
   preventHiddenChipsTooltip,
   typographyVariant = "body2",
-  maxWidth: maxWidth2,
+  forceRecalculate = false,
   renderChipLabel,
   onRemoveChip,
   onClickChip,
   onHasHiddenChipsChange
 }) => {
+  const rootNodeRef = React30.useRef(null);
   const containerRef = React30.useRef(null);
   const lastDataCalculated = React30.useRef(null);
   const [visibleChips, setVisibleChips] = React30.useState(values2);
   const [hiddenChips, setHiddenChips] = React30.useState([]);
+  const getContainerAndChipCloned = React30.useCallback(() => {
+    if (!containerRef.current) {
+      return;
+    }
+    const clonedContainer = containerRef.current.cloneNode(
+      true
+    );
+    const clonedChip = clonedContainer.children[0];
+    return { clonedContainer, clonedChip };
+  }, []);
+  const getChipLabel = React30.useCallback(
+    (chipName, skipRenderLabel = false) => renderChipLabel && !skipRenderLabel ? renderChipLabel(chipName) : chipName,
+    [renderChipLabel]
+  );
   const getChipWidthByContent = React30.useCallback(
     (chipName, skipRenderLabel = false) => {
-      const referenceChip = containerRef.current?.children[0];
-      if (!referenceChip) {
+      const clonedData = getContainerAndChipCloned();
+      if (!clonedData) {
         return 0;
       }
-      const referenceContainer = containerRef.current?.cloneNode(
-        true
-      );
-      const chip = referenceContainer.children[0];
-      const chipLabel = chip.querySelector(
+      const { clonedContainer, clonedChip } = clonedData;
+      const chipLabel = clonedChip.querySelector(
         ".MuiChip-label"
       );
-      chipLabel.textContent = renderChipLabel && !skipRenderLabel ? renderChipLabel(chipName) : chipName;
-      referenceContainer.style.width = containerRef.current?.offsetWidth + "px";
-      document.body.appendChild(referenceContainer);
-      if (chip.parentElement) {
-        chip.parentElement.style.width = "auto";
+      chipLabel.textContent = getChipLabel(chipName, skipRenderLabel);
+      clonedContainer.style.width = containerRef.current?.offsetWidth + "px";
+      document.body.appendChild(clonedContainer);
+      if (clonedChip.parentElement) {
+        clonedChip.parentElement.style.width = "auto";
       }
-      const { width: width2 } = chip.getBoundingClientRect();
-      document.body.removeChild(referenceContainer);
+      const { width: width2 } = clonedChip.getBoundingClientRect();
+      document.body.removeChild(clonedContainer);
       return width2;
     },
-    [renderChipLabel]
+    [getChipLabel, getContainerAndChipCloned]
   );
+  const getRenderGhostChipsContainer = React30.useCallback(() => {
+    const clonedData = getContainerAndChipCloned();
+    if (!clonedData?.clonedChip) {
+      return;
+    }
+    const { clonedContainer, clonedChip } = clonedData;
+    clonedContainer.replaceChildren();
+    values2.forEach((value) => {
+      const newChip = clonedChip.cloneNode(true);
+      const label = newChip.querySelector(
+        ".MuiChip-label"
+      );
+      if (label) {
+        label.textContent = getChipLabel(value);
+      }
+      clonedContainer.appendChild(newChip);
+    });
+    return clonedContainer;
+  }, [getChipLabel, getContainerAndChipCloned, values2]);
+  const getMaxParentWidth = React30.useCallback(() => {
+    if (!rootNodeRef.current) {
+      return 0;
+    }
+    const clonedContainer = getRenderGhostChipsContainer();
+    if (!clonedContainer) {
+      return 0;
+    }
+    rootNodeRef.current.appendChild(clonedContainer);
+    const parentWidth = rootNodeRef.current.parentElement ? rootNodeRef.current.parentElement.getBoundingClientRect().width : 0;
+    rootNodeRef.current.removeChild(clonedContainer);
+    return parentWidth;
+  }, [getRenderGhostChipsContainer]);
   const getVisibleChipsCounter = React30.useCallback(
-    (chips, maxWidth3) => {
+    (chips, maxWidth2) => {
       if (chips.length === 1) {
         return 1;
       }
@@ -11665,14 +11738,14 @@ var ChipViewer = ({
         const widthChip = getChipWidthByContent(chip);
         const widthGap = count > 0 ? widthChip + CHIPS_GAP : widthChip;
         rowWidth += widthGap;
-        if (rowWidth > maxWidth3) {
+        if (rowWidth > maxWidth2) {
           rows++;
           if (rows > numberLines) {
             const plusNumberWidth = getChipWidthByContent(
               `+${chips.length - count}`,
               true
             );
-            if (Math.ceil(rowWidth - widthChip + plusNumberWidth) >= maxWidth3) {
+            if (Math.ceil(rowWidth - widthChip + plusNumberWidth) >= maxWidth2) {
               count--;
             }
             break;
@@ -11710,8 +11783,8 @@ var ChipViewer = ({
     return true;
   };
   const calculateVisibleChips = React30.useCallback(() => {
-    const container = containerRef.current;
-    if (!container || areArraysEqual(lastDataCalculated.current?.chips ?? [], values2) && lastDataCalculated.current?.numberLines === numberLines && lastDataCalculated.current?.maxWidth === maxWidth2) {
+    const container = rootNodeRef.current;
+    if (!container || areArraysEqual(lastDataCalculated.current?.chips ?? [], values2) && lastDataCalculated.current?.numberLines === numberLines && lastDataCalculated.current?.forceRecalculate === forceRecalculate) {
       return;
     }
     if (numberLines === 0) {
@@ -11720,7 +11793,7 @@ var ChipViewer = ({
       lastDataCalculated.current = {
         chips: values2,
         numberLines,
-        maxWidth: maxWidth2
+        forceRecalculate
       };
       return;
     }
@@ -11730,18 +11803,16 @@ var ChipViewer = ({
       lastDataCalculated.current = {
         chips: values2,
         numberLines,
-        maxWidth: maxWidth2
+        forceRecalculate
       };
       return;
     }
-    const visibleChipsCount = getVisibleChipsCounter(
-      values2,
-      maxWidth2 && maxWidth2 > 0 ? maxWidth2 : containerRef.current?.offsetWidth ?? 0
-    );
+    const maxParentWidth = getMaxParentWidth();
+    const visibleChipsCount = maxParentWidth && maxParentWidth > 0 ? getVisibleChipsCounter(values2, maxParentWidth) : values2.length;
     lastDataCalculated.current = {
       chips: values2,
       numberLines,
-      maxWidth: maxWidth2
+      forceRecalculate
     };
     if (visibleChipsCount < values2.length) {
       setVisibleChips(values2.slice(0, visibleChipsCount));
@@ -11753,8 +11824,9 @@ var ChipViewer = ({
   }, [
     values2,
     numberLines,
+    forceRecalculate,
+    getMaxParentWidth,
     getVisibleChipsCounter,
-    maxWidth2,
     updateHiddenChips
   ]);
   React30.useLayoutEffect(() => {
@@ -11779,7 +11851,7 @@ var ChipViewer = ({
   const getRenderChip = ({
     chipName,
     index,
-    maxWidth: maxWidth3,
+    maxWidth: maxWidth2,
     isCounterLabel
   }) => /* @__PURE__ */ jsx63(
     Chip_default,
@@ -11809,7 +11881,7 @@ var ChipViewer = ({
           lines: 1,
           typographyVariant,
           text: renderChipLabel && !isCounterLabel ? renderChipLabel(chipName) : chipName,
-          ...maxWidth3 && { maxWidth: maxWidth3 }
+          ...maxWidth2 && { maxWidth: maxWidth2 }
         }
       ),
       onClick: onClickChip ? () => onClickChip(chipName) : void 0,
@@ -11817,11 +11889,12 @@ var ChipViewer = ({
       ...onRemoveChip && {
         onDelete: (event) => onRemoveChip(event, chipName)
       },
-      "data-testid": CHIP_DATA_TEST_ID
+      "data-testid": CHIP_DATA_TEST_ID,
+      disableDeleteRipple: true
     },
     `chip-${index}`
   );
-  return /* @__PURE__ */ jsx63(
+  return /* @__PURE__ */ jsx63(Stack4, { ref: rootNodeRef, "data-testid": CHIP_VIEWER_ROOT_ID, children: /* @__PURE__ */ jsx63(
     ChipContainer_default,
     {
       containerRef,
@@ -11837,7 +11910,7 @@ var ChipViewer = ({
       isDeletable: !!onRemoveChip,
       preventHiddenChipsTooltip
     }
-  );
+  ) });
 };
 var ChipViewer_default = ChipViewer;
 
@@ -12046,7 +12119,7 @@ var EnhancedCard = React31.forwardRef(
           }
         },
         children: [
-          !borderless && !isCenterColumnAlone && /* @__PURE__ */ jsx64(Stack4, { sx: sideColumnStyle, children: leftIconId && /* @__PURE__ */ jsx64(
+          !borderless && !isCenterColumnAlone && /* @__PURE__ */ jsx64(Stack5, { sx: sideColumnStyle, children: leftIconId && /* @__PURE__ */ jsx64(
             Icon_default,
             {
               id: leftIconId,
@@ -12057,7 +12130,7 @@ var EnhancedCard = React31.forwardRef(
             }
           ) }),
           /* @__PURE__ */ jsx64(
-            Stack4,
+            Stack5,
             {
               direction: "column",
               alignItems: "center",
@@ -12065,7 +12138,7 @@ var EnhancedCard = React31.forwardRef(
               children: childrenWithProps
             }
           ),
-          !borderless && !isCenterColumnAlone && /* @__PURE__ */ jsx64(Stack4, { sx: sideColumnStyle, children: rightIconId && /* @__PURE__ */ jsx64(
+          !borderless && !isCenterColumnAlone && /* @__PURE__ */ jsx64(Stack5, { sx: sideColumnStyle, children: rightIconId && /* @__PURE__ */ jsx64(
             Icon_default,
             {
               id: rightIconId,
@@ -14404,7 +14477,7 @@ var ChatMessage = React36.forwardRef(function ChatMessage2({
 var ChatMessage_default = ChatMessage;
 
 // src/components/chat/Chat.tsx
-import Stack5 from "@mui/material/Stack";
+import Stack6 from "@mui/material/Stack";
 import * as React37 from "react";
 import { jsx as jsx81, jsxs as jsxs37 } from "react/jsx-runtime";
 var PADDING_BOTTOM = 8;
@@ -14421,21 +14494,6 @@ var Chat = ({
   const innerRef = React37.useRef(null);
   const [isInitialize, setIsInitialize] = React37.useState(false);
   const [hasVerticalScroll, setHasVerticalScroll] = React37.useState(false);
-  React37.useEffect(() => {
-    const container = ref.current;
-    if (!container) {
-      return;
-    }
-    const observer = new ResizeObserver(() => {
-      requestAnimationFrame(() => {
-        const needsScroll = container.scrollHeight > container.clientHeight;
-        setHasVerticalScroll(needsScroll);
-      });
-    });
-    observer.observe(container);
-    setIsInitialize(true);
-    return () => observer.disconnect();
-  }, []);
   const getPaddingBottom = React37.useCallback(
     (lastElementClass, clientHeight) => {
       if (lastElementClass && innerRef.current) {
@@ -14452,24 +14510,44 @@ var Chat = ({
     },
     [gapBetweenElements]
   );
-  React37.useEffect(() => {
+  const updatePaddingBottom = React37.useCallback(() => {
     const container = ref.current;
-    if (!container) {
+    if (!container || !innerRef.current) {
       return;
     }
     const elements = container.querySelectorAll(
       `.${scrollToLastClassName}`
     );
     const lastElementClass = elements[elements.length - 1];
-    if (lastElementClass && innerRef.current && innerRef.current.style.paddingBottom !== `${PADDING_BOTTOM}px`) {
+    if (lastElementClass) {
       const clientHeight = container.clientHeight - PADDING_BOTTOM;
       const paddingBottom = getPaddingBottom(
         lastElementClass,
         clientHeight
       );
-      innerRef.current.style.paddingBottom = paddingBottom >= clientHeight ? `${PADDING_BOTTOM}px` : `${paddingBottom}px`;
+      const paddingToSet = paddingBottom >= clientHeight ? `${PADDING_BOTTOM}px` : `${paddingBottom}px`;
+      innerRef.current.style.paddingBottom = paddingToSet;
+      const needsScroll = container.scrollHeight > container.clientHeight;
+      setHasVerticalScroll(needsScroll);
     }
-  }, [children, getPaddingBottom, scrollToLastClassName]);
+  }, [getPaddingBottom, scrollToLastClassName]);
+  React37.useEffect(() => {
+    const container = ref.current;
+    if (!container) {
+      return;
+    }
+    const observer = new ResizeObserver(() => {
+      requestAnimationFrame(() => {
+        updatePaddingBottom();
+      });
+    });
+    observer.observe(container);
+    setIsInitialize(true);
+    return () => observer.disconnect();
+  }, [updatePaddingBottom]);
+  React37.useEffect(() => {
+    updatePaddingBottom();
+  }, [children, updatePaddingBottom]);
   React37.useEffect(() => {
     const container = ref.current;
     if (!container || !scrollToLastClassName || !triggerScroll) {
@@ -14497,19 +14575,19 @@ var Chat = ({
     triggerScroll
   ]);
   return /* @__PURE__ */ jsxs37(
-    Stack5,
+    Stack6,
     {
       className: "Slim-Vertical-Scroll",
       ref,
       sx: {
         overflow: "hidden",
-        overflowY: "auto",
+        overflowY: "scroll",
         height: "calc(100% - 8px)",
         visibility: !isInitialize ? "hidden" : "visible",
-        width: `calc(100% - ${hasVerticalScroll ? "4px" : "8px"})`,
+        width: `calc(100% - 4px)`,
         paddingBottom: `${PADDING_BOTTOM}px`,
         ...backgroundColor2 && { backgroundColor: backgroundColor2 },
-        paddingRight: hasVerticalScroll ? "4px" : "8px",
+        paddingRight: "4px",
         "::-webkit-scrollbar": {
           width: "4px !important"
         },
@@ -14521,14 +14599,14 @@ var Chat = ({
           visibility: "hidden"
         },
         ":hover::-webkit-scrollbar-thumb": {
-          visibility: "visible"
+          visibility: hasVerticalScroll ? "visible" : "hidden"
         }
       },
       spacing: "12px",
       children: [
         header,
         /* @__PURE__ */ jsx81(
-          Stack5,
+          Stack6,
           {
             ref: innerRef,
             justifyContent: "start",
@@ -19455,14 +19533,14 @@ var Popover = ({
 var Popover_default = Popover;
 
 // src/components/popover/PopoverActions.tsx
-import { Stack as Stack6 } from "@mui/material";
+import { Stack as Stack7 } from "@mui/material";
 import { jsx as jsx103, jsxs as jsxs45 } from "react/jsx-runtime";
 var PopoverActions = ({
   leftContent,
   rightContent,
   sx
 }) => /* @__PURE__ */ jsxs45(
-  Stack6,
+  Stack7,
   {
     className: "PopoverActions",
     direction: "row",
@@ -19999,7 +20077,7 @@ var DateIntervalPickerList = ({
 var DateIntervalPickerList_default = DateIntervalPickerList;
 
 // src/components/input/DateIntervalPickerInputs.tsx
-import { Collapse as Collapse6, Stack as Stack7 } from "@mui/material";
+import { Collapse as Collapse6, Stack as Stack8 } from "@mui/material";
 
 // src/components/input/TimeField.tsx
 import * as React56 from "react";
@@ -20092,7 +20170,7 @@ var DateIntervalPickerInputs = ({
     focusableInput,
     hourLabel,
     color: color3
-  }) => /* @__PURE__ */ jsxs49(Stack7, { children: [
+  }) => /* @__PURE__ */ jsxs49(Stack8, { children: [
     /* @__PURE__ */ jsx110(
       TextField_default,
       {
@@ -20907,7 +20985,7 @@ var DateIntervalPicker = ({
 var DateIntervalPicker_default = DateIntervalPicker;
 
 // src/components/input/SelectPopoverItem.tsx
-import { Grid as Grid2, Stack as Stack8 } from "@mui/material";
+import { Grid as Grid2, Stack as Stack9 } from "@mui/material";
 import { lighten as lighten3 } from "@mui/material";
 import { Fragment as Fragment22, jsx as jsx113, jsxs as jsxs52 } from "react/jsx-runtime";
 var bgColorLightCoefficient2 = 0.9;
@@ -20930,7 +21008,7 @@ var SelectPopoverItem = ({
       xs: 6
     },
     children: /* @__PURE__ */ jsxs52(
-      Stack8,
+      Stack9,
       {
         direction: "row",
         sx: {
@@ -21746,7 +21824,7 @@ var UploadClickableArea_default = UploadClickableArea;
 
 // src/components/input/CategorizedPicker.tsx
 import React63 from "react";
-import { Grid as Grid3, Popover as Popover2, Select as Select3, Stack as Stack9 } from "@mui/material";
+import { Grid as Grid3, Popover as Popover2, Select as Select3, Stack as Stack10 } from "@mui/material";
 import { Fragment as Fragment24, jsx as jsx119, jsxs as jsxs55 } from "react/jsx-runtime";
 var ChevronIcon2 = ({ disabled }) => /* @__PURE__ */ jsx119(
   Icon_default,
@@ -21931,7 +22009,7 @@ var CategorizedPicker = function CategorizedPicker2({
               sx: { borderRight: `1px solid ${grey200}` },
               height: "316px",
               className: "Slim-Vertical-Scroll",
-              children: /* @__PURE__ */ jsx119(Stack9, { children: filteredCategories.map((category, idx) => /* @__PURE__ */ jsx119(
+              children: /* @__PURE__ */ jsx119(Stack10, { children: filteredCategories.map((category, idx) => /* @__PURE__ */ jsx119(
                 ListItemButton_default,
                 {
                   selected: selectedCategory === category,
@@ -21975,7 +22053,7 @@ var CategorizedPicker = function CategorizedPicker2({
               },
               height: "316px",
               className: "Slim-Vertical-Scroll",
-              children: /* @__PURE__ */ jsx119(Stack9, { children: /* @__PURE__ */ jsx119(Stack9, { children: !selectedCategory ? /* @__PURE__ */ jsx119(Stack9, { padding: "12px", alignItems: "center", children: /* @__PURE__ */ jsx119(
+              children: /* @__PURE__ */ jsx119(Stack10, { children: /* @__PURE__ */ jsx119(Stack10, { children: !selectedCategory ? /* @__PURE__ */ jsx119(Stack10, { padding: "12px", alignItems: "center", children: /* @__PURE__ */ jsx119(
                 Typography_default,
                 {
                   variant: "body2",
@@ -22029,7 +22107,7 @@ import * as React65 from "react";
 
 // src/components/input/SelectPopover.tsx
 import * as React64 from "react";
-import { Grid as Grid4, Stack as Stack10 } from "@mui/material";
+import { Grid as Grid4, Stack as Stack11 } from "@mui/material";
 import { useState as useState23 } from "react";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { jsx as jsx120, jsxs as jsxs56 } from "react/jsx-runtime";
@@ -22275,7 +22353,7 @@ var SelectPopover = function SelectPopover2({
                     }
                   ),
                   !isLoading && currentItems.length === 0 ? typeof emptyListPlaceholder === "string" ? /* @__PURE__ */ jsx120(
-                    Stack10,
+                    Stack11,
                     {
                       alignItems: "center",
                       justifyContent: "center",
@@ -22661,108 +22739,66 @@ import * as React67 from "react";
 import * as React66 from "react";
 import { jsx as jsx122, jsxs as jsxs58 } from "react/jsx-runtime";
 var AUTOCOMPLETE_PADDING_RIGHT = 6;
-var AUTOCOMPLETE_CLEAR_BUTTON_WIDTH = 36;
-var AUTOCOMPLETE_INPUT_MIN_WIDTH = 88;
 var AutocompleteInputSelection = function AutocompleteInputSelection2({
   value,
+  canAddValues,
   disabled = false,
   renderLabel,
-  disableClear,
   onOpenPopover,
-  isOpenPopover,
-  inputValue,
-  isHover,
   onRemoveValue
 }) {
   const stackRef = React66.useRef(null);
-  const [maxWidth2, setMaxWidth] = React66.useState(0);
-  const dirty = !!inputValue || Array.isArray(value) && value.length > 0 || !Array.isArray(value) && !!value;
-  const showClearButton = !disabled && dirty && !disableClear && (isOpenPopover || isHover);
-  React66.useLayoutEffect(() => {
-    if (!stackRef.current) {
-      return;
-    }
-    const el = stackRef.current.parentElement || stackRef.current;
-    const compute = () => {
-      const width2 = el.getBoundingClientRect().width;
-      const maxWidth3 = disabled ? width2 - AUTOCOMPLETE_PADDING_RIGHT : !showClearButton ? width2 - (AUTOCOMPLETE_INPUT_MIN_WIDTH + AUTOCOMPLETE_CLEAR_BUTTON_WIDTH) : width2 - AUTOCOMPLETE_INPUT_MIN_WIDTH;
-      setMaxWidth(maxWidth3);
-    };
-    compute();
-    const ro = new ResizeObserver(compute);
-    ro.observe(el);
-    window.addEventListener("resize", compute);
-    return () => {
-      ro.disconnect();
-      window.removeEventListener("resize", compute);
-    };
-  }, [disabled, showClearButton]);
   return /* @__PURE__ */ jsxs58(
     Stack_default,
     {
       ref: stackRef,
       direction: "row",
       gap: "4px",
-      flex: "0 0 auto",
       whiteSpace: "nowrap",
-      maxWidth: maxWidth2,
+      flex: "0 1 auto",
+      minWidth: 0,
+      ...disabled && {
+        maxWidth: `calc(100% - ${AUTOCOMPLETE_PADDING_RIGHT}px)`
+      },
       children: [
         /* @__PURE__ */ jsx122(
           IconButton_default,
           {
             iconId: "plus",
             size: "S",
-            disabled,
+            disabled: disabled || !canAddValues,
             sx: {
               padding: 0,
-              ...disabled && {
+              ...(disabled || !canAddValues) && {
                 color: `${Colors_exports.grey500} !important`,
-                opacity: "1 !important"
+                opacity: "1 !important",
+                flex: "0 0 auto"
               }
             },
             onClick: () => {
-              onOpenPopover();
+              canAddValues && onOpenPopover();
             }
           }
         ),
-        /* @__PURE__ */ jsx122(
-          Stack_default,
+        /* @__PURE__ */ jsx122(Stack_default, { whiteSpace: "nowrap", flex: "1 1 auto", minWidth: 0, children: /* @__PURE__ */ jsx122(
+          ChipViewer_default,
           {
-            maxWidth: "calc(100% - 28px)",
-            sx: { "& > div": { maxWidth: "100%" } },
-            children: /* @__PURE__ */ jsx122(
-              Stack_default,
-              {
-                direction: "row",
-                sx: {
-                  gap: "8px",
-                  justifyContent: "end",
-                  overflow: "hidden",
-                  alignItems: "center"
-                },
-                children: /* @__PURE__ */ jsx122(
-                  ChipViewer_default,
-                  {
-                    values: Array.isArray(value) ? value : !value ? [] : [value],
-                    ...!disabled && {
-                      onRemoveChip: (event, id) => {
-                        onRemoveValue(
-                          event,
-                          Array.isArray(value) ? value.filter(
-                            (v) => v !== id
-                          ) : ""
-                        );
-                      }
-                    },
-                    numberLines: 1,
-                    renderChipLabel: (id) => renderLabel(id),
-                    maxWidth: maxWidth2
-                  }
-                )
+            values: Array.isArray(value) ? value : !value ? [] : [value],
+            ...!disabled && {
+              onRemoveChip: (event, id) => {
+                onRemoveValue(
+                  event,
+                  Array.isArray(value) ? value.filter(
+                    (v) => v !== id
+                  ) : ""
+                );
               }
-            )
+            },
+            numberLines: 1,
+            renderChipLabel: (id) => renderLabel(id),
+            forceRecalculate: disabled
           }
-        )
+        ) })
       ]
     }
   );
@@ -22771,6 +22807,8 @@ var AutocompleteInputSelection_default = AutocompleteInputSelection;
 
 // src/components/input/autocomplete/AutocompleteInput.tsx
 import { Fragment as Fragment26, jsx as jsx123, jsxs as jsxs59 } from "react/jsx-runtime";
+var INPUT_MIN_WIDTH = 80;
+var CLEAR_BUTTON_WIDTH = 36;
 var AutocompleteInput = function AutocompleteInput2({
   variant = "default",
   value,
@@ -22780,7 +22818,7 @@ var AutocompleteInput = function AutocompleteInput2({
   disabled = false,
   renderLabel,
   maxValueLength,
-  maxValues,
+  canAddValues,
   maxValuesText,
   disableClear,
   containerRef,
@@ -22803,6 +22841,7 @@ var AutocompleteInput = function AutocompleteInput2({
     DebouncedTextField_default,
     {
       ref: inputRef,
+      ...textFieldProps,
       sx: {
         ...textFieldProps?.sx,
         minWidth: "328px",
@@ -22821,10 +22860,10 @@ var AutocompleteInput = function AutocompleteInput2({
           minWidth: 0
         }
       },
-      ...textFieldProps,
       inputSx: {
         ...textFieldProps?.inputSx,
         flex: "1 1 auto",
+        minWidth: showClearButton ? `${INPUT_MIN_WIDTH}px` : `${INPUT_MIN_WIDTH + CLEAR_BUTTON_WIDTH}px`,
         ...disabled && {
           color: Colors_exports.grey500
         },
@@ -22836,10 +22875,10 @@ var AutocompleteInput = function AutocompleteInput2({
         }
       },
       maxLength: maxValueLength,
-      placeholder: multiple && maxValues && Array.isArray(value) && value.length >= maxValues ? maxValuesText || t("AUTOCOMPLETE.MAX_VALUES") : Array.isArray(value) && value.length > 0 ? "" : value ? "" : placeholder,
+      placeholder: !canAddValues ? maxValuesText || t("AUTOCOMPLETE.MAX_VALUES") : Array.isArray(value) && value.length > 0 || !Array.isArray(value) && !!value ? "" : placeholder,
       value: inputValue,
       multiline: false,
-      disabled: disabled || (multiple && maxValues && Array.isArray(value) && value.length >= maxValues ? true : false),
+      disabled: disabled || !canAddValues,
       onChange: (event) => {
         onSearchValueChange(event, event.target.value);
       },
@@ -22880,15 +22919,12 @@ var AutocompleteInput = function AutocompleteInput2({
       startAdornment: /* @__PURE__ */ jsx123(
         AutocompleteInputSelection_default,
         {
-          inputValue,
           value,
+          canAddValues,
           renderLabel,
-          isOpenPopover,
-          isHover,
           onOpenPopover,
           onRemoveValue,
-          disabled,
-          disableClear
+          disabled
         }
       ),
       endAdornment: /* @__PURE__ */ jsxs59(
@@ -22938,9 +22974,14 @@ var AutocompleteInput = function AutocompleteInput2({
                   IconButton_default,
                   {
                     iconId: isOpenPopover ? "chevron-up" : "chevron-down",
+                    disabled: !canAddValues,
                     sx: {
                       padding: 0,
-                      marginLeft: 0
+                      marginLeft: 0,
+                      ...!canAddValues && {
+                        color: `${Colors_exports.grey500} !important`,
+                        opacity: "1 !important"
+                      }
                     },
                     onClick: () => {
                       if (isOpenPopover) {
@@ -23107,6 +23148,7 @@ var AutocompleteList_default = AutocompleteList;
 
 // src/components/input/autocomplete/Autocomplete.tsx
 import { Fragment as Fragment28, jsx as jsx125, jsxs as jsxs61 } from "react/jsx-runtime";
+var MIN_AUTOCOMPLETE_WIDTH = "328px";
 var Autocomplete = function Autocomplete2({
   variant = "default",
   value,
@@ -23200,6 +23242,70 @@ var Autocomplete = function Autocomplete2({
   React68.useEffect(() => {
     setFilteredOptions(getOptionsLabeled([...options]));
   }, [options]);
+  const canAddValues = maxValues === void 0 || maxValues === 0 || !!multiple && Array.isArray(value) && value.length < maxValues;
+  React68.useEffect(() => {
+    if (disabled) {
+      setOpenPopover(false);
+    }
+  }, [disabled]);
+  React68.useEffect(() => {
+    if (!canAddValues && isOpenPopover) {
+      closePopover();
+    }
+  }, [canAddValues, isOpenPopover]);
+  const getLastSelectedIndex = React68.useCallback(() => {
+    if (Array.isArray(selectedIndex) && selectedIndex.length > 0) {
+      return selectedIndex[selectedIndex.length - 1];
+    } else if (typeof selectedIndex === "number") {
+      return selectedIndex;
+    }
+    return void 0;
+  }, [selectedIndex]);
+  React68.useEffect(() => {
+    if (isOpenPopover) {
+      if (highlightedIndex > -1) {
+        virtualListRef.current?.scrollToItem(highlightedIndex);
+      } else {
+        const lastSelectedIndex = getLastSelectedIndex();
+        if (lastSelectedIndex !== void 0 && lastSelectedIndex > -1) {
+          virtualListRef.current?.scrollToItem(lastSelectedIndex);
+        }
+      }
+      const keyDownEventListener = (event) => {
+        switch (event.key) {
+          case "ArrowDown": {
+            const isHighlightedIndex = highlightedIndex !== -1;
+            const lastSelectedIndex = getLastSelectedIndex() ?? -1;
+            const index = isHighlightedIndex ? highlightedIndex + 1 : lastSelectedIndex + 1;
+            setHighlightedIndex(index % filteredOptions.length);
+            break;
+          }
+          case "ArrowUp": {
+            const isHighlightedIndex = highlightedIndex !== -1;
+            const lastSelectedIndex = getLastSelectedIndex() ?? filteredOptions.length;
+            const index = isHighlightedIndex ? highlightedIndex - 1 : lastSelectedIndex - 1;
+            setHighlightedIndex(
+              (filteredOptions.length + index) % filteredOptions.length
+            );
+            break;
+          }
+          case "Escape":
+            closePopover();
+            break;
+        }
+      };
+      document.addEventListener("keydown", keyDownEventListener);
+      return () => {
+        document.removeEventListener("keydown", keyDownEventListener);
+      };
+    }
+  }, [
+    isOpenPopover,
+    getLastSelectedIndex,
+    highlightedIndex,
+    filteredOptions.length,
+    virtualListRef
+  ]);
   const setNextIndex = (filteredOptions2) => {
     setNextIndexByValue(value, filteredOptions2);
   };
@@ -23236,6 +23342,9 @@ var Autocomplete = function Autocomplete2({
     inputRef.current?.blur();
   };
   const openPopover = (options2) => {
+    if (!canAddValues) {
+      return;
+    }
     setDirty(false);
     setPlaceholder("");
     setOpenPopover(true);
@@ -23263,64 +23372,6 @@ var Autocomplete = function Autocomplete2({
     setFilteredOptions(currentFilteredOptions);
     setNextIndex(currentFilteredOptions);
   };
-  const getLastSelectedIndex = React68.useCallback(() => {
-    if (Array.isArray(selectedIndex) && selectedIndex.length > 0) {
-      return selectedIndex[selectedIndex.length - 1];
-    } else if (typeof selectedIndex === "number") {
-      return selectedIndex;
-    }
-    return void 0;
-  }, [selectedIndex]);
-  React68.useEffect(() => {
-    if (isOpenPopover) {
-      if (highlightedIndex > -1) {
-        virtualListRef.current?.scrollToItem(highlightedIndex);
-      } else {
-        const lastSelectedIndex = getLastSelectedIndex();
-        if (lastSelectedIndex !== void 0 && lastSelectedIndex > -1) {
-          virtualListRef.current?.scrollToItem(lastSelectedIndex);
-        }
-      }
-      const keyDownEventListener = (event) => {
-        switch (event.key) {
-          case "ArrowDown": {
-            const isHighlightedIndex = highlightedIndex !== -1;
-            const lastSelectedIndex = getLastSelectedIndex() ?? -1;
-            const index = isHighlightedIndex ? highlightedIndex + 1 : lastSelectedIndex + 1;
-            setHighlightedIndex(index % filteredOptions.length);
-            break;
-          }
-          case "ArrowUp": {
-            const isHighlightedIndex = highlightedIndex !== -1;
-            const lastSelectedIndex = getLastSelectedIndex() ?? filteredOptions.length;
-            const index = isHighlightedIndex ? highlightedIndex - 1 : lastSelectedIndex - 1;
-            setHighlightedIndex(
-              (filteredOptions.length + index) % filteredOptions.length
-            );
-            break;
-          }
-          case "Escape":
-            closePopover();
-            break;
-        }
-      };
-      document.addEventListener("keydown", keyDownEventListener);
-      return () => {
-        document.removeEventListener("keydown", keyDownEventListener);
-      };
-    }
-  }, [
-    isOpenPopover,
-    getLastSelectedIndex,
-    highlightedIndex,
-    filteredOptions.length,
-    virtualListRef
-  ]);
-  React68.useEffect(() => {
-    if (multiple && Array.isArray(value) && value.length === maxValues) {
-      closePopover();
-    }
-  }, [multiple, maxValues, value]);
   const onSetSelectedIndex = (index) => {
     setSelectedIndex(index);
     setHighlightedIndex(-1);
@@ -23424,13 +23475,19 @@ var Autocomplete = function Autocomplete2({
         containerRef: anchorRef,
         variant,
         isOpenPopover,
-        textFieldProps,
+        textFieldProps: {
+          ...textFieldProps,
+          sx: {
+            ...textFieldProps?.sx ?? {},
+            minWidth: MIN_AUTOCOMPLETE_WIDTH
+          }
+        },
         disableClear,
         disabled,
         hasFilteredOptions: options.length > 0,
         value,
         maxValueLength,
-        maxValues,
+        canAddValues,
         maxValuesText,
         multiple,
         renderLabel: renderLabel ?? _renderLabel,
@@ -25141,7 +25198,7 @@ var CircularProgress_default = CircularProgress;
 
 // src/components/progress/DonutProgress.tsx
 import Box5 from "@mui/material/Box";
-import { Stack as Stack11 } from "@mui/material";
+import { Stack as Stack12 } from "@mui/material";
 import { jsx as jsx139, jsxs as jsxs72 } from "react/jsx-runtime";
 var CIRCULAR_PROGRESS_PERCENTAGE = 85;
 var variants2 = {
@@ -25178,7 +25235,7 @@ var DonutProgress = ({
   labelChip,
   showPercentageSymbol
 }) => {
-  const getPercentageWithSymbol = () => /* @__PURE__ */ jsxs72(Stack11, { direction: "row", alignItems: "center", position: "relative", children: [
+  const getPercentageWithSymbol = () => /* @__PURE__ */ jsxs72(Stack12, { direction: "row", alignItems: "center", position: "relative", children: [
     /* @__PURE__ */ jsx139(Typography_default, { variant: "h6", component: "div", color: grey800, children: label }),
     /* @__PURE__ */ jsx139(
       Typography_default,
@@ -26580,7 +26637,7 @@ import MuiTabs from "@mui/material/Tabs";
 
 // src/components/layout/SwipeableViews.tsx
 import * as React86 from "react";
-import { useEffect as useEffect23, useRef as useRef25, useState as useState35 } from "react";
+import { useEffect as useEffect23, useRef as useRef25, useState as useState34 } from "react";
 import { jsx as jsx155 } from "react/jsx-runtime";
 var styles = {
   container: {
@@ -26617,7 +26674,7 @@ function SwipeableViews({
   const containerRef = useRef25(null);
   const scrollTimeout = useRef25();
   const scrollingMethod = useRef25("none");
-  const [previousIndex, setPreviousIndex] = useState35(index);
+  const [previousIndex, setPreviousIndex] = useState34(index);
   const hideScrollAnimation = useRef25(true);
   useEffect23(() => {
     if (containerRef.current) {
@@ -27244,7 +27301,7 @@ var Toolbar_default = Toolbar;
 
 // src/components/toolbar/ToolbarTitle.tsx
 import * as React90 from "react";
-import { useState as useState38 } from "react";
+import { useState as useState37 } from "react";
 import { jsx as jsx170, jsxs as jsxs83 } from "react/jsx-runtime";
 var ToolbarTitle = React90.forwardRef(function ToolbarTitle2({
   title,
@@ -27254,7 +27311,7 @@ var ToolbarTitle = React90.forwardRef(function ToolbarTitle2({
   color: color2 = grey900
 }, ref) {
   const textElementRef = React90.useRef(null);
-  const [showHoverActions, setShowHoverActions] = useState38(false);
+  const [showHoverActions, setShowHoverActions] = useState37(false);
   return /* @__PURE__ */ jsx170(Box_default2, { sx: { maxWidth: "100%" }, children: /* @__PURE__ */ jsx170(
     TextEllipsisTooltip_default,
     {