lecom-ui 5.4.32 → 5.4.34

package/dist/components/MultiSelect/MultiSelect.js

@@ -56,14 +56,19 @@ const MultiSelect = React.forwardRef(
     allowTypoDistance = 0,
     groupedOptions,
     classNameContent,
-    size = "medium"
+    size = "medium",
+    disabled = false,
+    readOnly = false
   }, ref) => {
     const { t } = useTranslation();
     const [selectedValues, setSelectedValues] = React.useState(value);
     const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
     const [query, setQuery] = React.useState("");
-    const [dynamicMaxCount, setDynamicMaxCount] = React.useState(selectedValues.length || 1);
+    const [dynamicMaxCount, setDynamicMaxCount] = React.useState(
+      selectedValues.length || 1
+    );
     const buttonRef = React.useRef(null);
+    const tagsContainerRef = React.useRef(null);
     React.useEffect(() => {
       const shallowEqual = (a, b) => {
         if (a === b) return true;
@@ -80,7 +85,7 @@ const MultiSelect = React.forwardRef(
       }
       if (selectedValues.length === 0) return;
       const calculateMaxCount = () => {
-        if (!buttonRef.current) {
+        if (!buttonRef.current || !tagsContainerRef.current) {
           setTimeout(() => calculateMaxCount(), 10);
           return;
         }
@@ -89,57 +94,59 @@ const MultiSelect = React.forwardRef(
           setTimeout(() => calculateMaxCount(), 10);
           return;
         }
-        const CONTROLS_WIDTH = 80;
-        const COUNTER_TAG_WIDTH = 41;
         const TAG_GAP = 4;
-        const CONTAINER_PADDING = 8;
-        const AVG_CHAR_WIDTH = 8;
-        const TAG_PADDING = 24;
-        const availableWidth = buttonWidth - CONTAINER_PADDING * 2 - CONTROLS_WIDTH;
+        const BUTTON_PADDING = 4;
+        const TAGS_CONTAINER_PADDING = 8;
+        const COUNTER_TAG_MAX_WIDTH = 65;
+        const ICONS_WIDTH = !disabled && !readOnly ? 48 : 20;
+        const availableWidth = buttonWidth - ICONS_WIDTH - BUTTON_PADDING * 2 - TAGS_CONTAINER_PADDING * 2 - TAG_GAP;
         if (availableWidth <= 0) {
           setDynamicMaxCount(1);
           return;
         }
-        const getTreeLabel = (val) => {
-          if (!treeOptions) return void 0;
-          const stack = [...treeOptions];
-          while (stack.length) {
-            const n = stack.pop();
-            if (n.value === val) return n.label;
-            if (n.children) stack.push(...n.children);
+        const tagElements = tagsContainerRef.current.querySelectorAll("[data-tag-item]");
+        if (tagElements.length === 0) {
+          setDynamicMaxCount(selectedValues.length);
+          return;
+        }
+        const tagWidths = [];
+        tagElements.forEach((element) => {
+          if (!element.hasAttribute("data-counter-tag")) {
+            tagWidths.push(element.offsetWidth);
           }
-          return void 0;
-        };
-        const estimatedWidths = [];
-        for (let i = 0; i < selectedValues.length; i++) {
-          const label = getTreeLabel(selectedValues[i]) || options.find((o) => o.value === selectedValues[i])?.label || selectedValues[i];
-          const estimatedWidth = Math.min(
-            label.length * AVG_CHAR_WIDTH + TAG_PADDING,
-            250
-          );
-          estimatedWidths.push(estimatedWidth);
+        });
+        if (tagWidths.length === 0) {
+          setTimeout(() => calculateMaxCount(), 10);
+          return;
         }
-        let totalWidth = 0;
-        for (let i = 0; i < estimatedWidths.length; i++) {
-          totalWidth += estimatedWidths[i] + (i > 0 ? TAG_GAP : 0);
+        let totalWidthWithoutCounter = 0;
+        let countWithoutCounter = 0;
+        for (let i = 0; i < tagWidths.length; i++) {
+          const widthNeeded = tagWidths[i] + (i > 0 ? TAG_GAP : 0);
+          if (totalWidthWithoutCounter + widthNeeded <= availableWidth) {
+            totalWidthWithoutCounter += widthNeeded;
+            countWithoutCounter++;
+          } else {
+            break;
+          }
         }
-        if (totalWidth <= availableWidth) {
+        if (countWithoutCounter >= selectedValues.length) {
           setDynamicMaxCount(selectedValues.length);
           return;
         }
-        const availableWithCounter = availableWidth - COUNTER_TAG_WIDTH - TAG_GAP;
-        let count = 0;
-        totalWidth = 0;
-        for (let i = 0; i < estimatedWidths.length; i++) {
-          const tagWidth = estimatedWidths[i] + (i > 0 ? TAG_GAP : 0);
-          if (totalWidth + tagWidth <= availableWithCounter) {
-            totalWidth += tagWidth;
-            count++;
+        const availableWidthWithCounter = availableWidth - COUNTER_TAG_MAX_WIDTH - TAG_GAP;
+        let totalWidthWithCounter = 0;
+        let countWithCounter = 0;
+        for (let i = 0; i < tagWidths.length; i++) {
+          const widthNeeded = tagWidths[i] + (i > 0 ? TAG_GAP : 0);
+          if (totalWidthWithCounter + widthNeeded <= availableWidthWithCounter) {
+            totalWidthWithCounter += widthNeeded;
+            countWithCounter++;
           } else {
             break;
           }
         }
-        setDynamicMaxCount(Math.max(1, count));
+        setDynamicMaxCount(Math.max(1, countWithCounter));
       };
       const rafId = requestAnimationFrame(() => {
         calculateMaxCount();
@@ -154,7 +161,7 @@ const MultiSelect = React.forwardRef(
         cancelAnimationFrame(rafId);
         resizeObserver.disconnect();
       };
-    }, [maxCount, selectedValues, treeOptions, options]);
+    }, [maxCount, selectedValues, treeOptions, options, disabled, readOnly]);
     const handleInputKeyDown = (event) => {
       if (event.key === "Enter") {
         setIsPopoverOpen(true);
@@ -166,11 +173,13 @@ const MultiSelect = React.forwardRef(
       }
     };
     const toggleOption = (option) => {
+      if (readOnly) return;
       const newSelectedValues = selectedValues.includes(option) ? selectedValues.filter((value2) => value2 !== option) : [...selectedValues, option];
       setSelectedValues(newSelectedValues);
       onValueChange(newSelectedValues);
     };
     const handleClear = () => {
+      if (readOnly) return;
       setSelectedValues([]);
       onValueChange([]);
     };
@@ -178,6 +187,7 @@ const MultiSelect = React.forwardRef(
       setIsPopoverOpen((prev) => !prev);
     };
     const toggleAll = () => {
+      if (readOnly) return;
       if (treeOptions && treeOptions.length) {
         const gather = (acc, nodes) => {
           for (const n of nodes) {
@@ -340,7 +350,10 @@ const MultiSelect = React.forwardRef(
         if (!node.children || node.children.length === 0) {
           return [node.value];
         }
-        return [node.value, ...node.children.flatMap((c) => collectAllValues(c))];
+        return [
+          node.value,
+          ...node.children.flatMap((c) => collectAllValues(c))
+        ];
       }
     };
     const isNodeFullySelected = (node) => {
@@ -371,6 +384,7 @@ const MultiSelect = React.forwardRef(
       }
     };
     const toggleTreeNode = (node) => {
+      if (readOnly) return;
       if (treeSelectionStrategy === "all") {
         const isSelected = selectedValues.includes(node.value);
         const next = isSelected ? selectedValues.filter((v) => v !== node.value) : [...selectedValues, node.value];
@@ -454,7 +468,8 @@ const MultiSelect = React.forwardRef(
         {
           className: cn(
             "flex items-center gap-2 px-2 py-1 cursor-pointer rounded-sm text-grey-800 hover:bg-grey-100",
-            (fully || isSelectedLeaf) && "bg-blue-50"
+            (fully || isSelectedLeaf) && "bg-blue-50",
+            readOnly && "cursor-default hover:bg-transparent"
           ),
           style: { paddingLeft: depth * 14 + 8 }
         },
@@ -467,7 +482,9 @@ const MultiSelect = React.forwardRef(
             ),
             onClick: (e) => {
               e.stopPropagation();
-              toggleTreeNode(n);
+              if (!readOnly) {
+                toggleTreeNode(n);
+              }
             }
           },
           fully && /* @__PURE__ */ React.createElement(Check, { className: "!h-3 !w-3 !text-white", strokeWidth: 3 }),
@@ -480,7 +497,9 @@ const MultiSelect = React.forwardRef(
             className: "flex-1 truncate cursor-pointer overflow-hidden",
             onClick: (e) => {
               e.stopPropagation();
-              toggleTreeNode(n);
+              if (!readOnly) {
+                toggleTreeNode(n);
+              }
             },
             title: n.label
           },
@@ -514,43 +533,65 @@ const MultiSelect = React.forwardRef(
               transition-all duration-300 outline-none
               [&_svg]:pointer-events-auto`,
             maxCount === void 0 && TRIGGER_HEIGHT_CLASSES[size],
+            disabled && "opacity-50 cursor-not-allowed pointer-events-none",
+            readOnly && !disabled && "opacity-50 hover:border-grey-400",
             className
           ),
-          "aria-expanded": isPopoverOpen
+          "aria-expanded": isPopoverOpen,
+          disabled
         },
-        selectedValues.length > 0 ? /* @__PURE__ */ React.createElement("div", { className: "flex justify-between items-center w-full" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-center gap-1" }, selectedValues.slice(0, dynamicMaxCount).map((value2) => {
-          const selectedOption = options.find((option) => option.value === value2);
+        selectedValues.length > 0 ? /* @__PURE__ */ React.createElement("div", { className: "flex justify-between items-center w-full px-2" }, /* @__PURE__ */ React.createElement("div", { ref: tagsContainerRef, className: "flex items-center gap-1 flex-nowrap overflow-hidden" }, selectedValues.slice(0, dynamicMaxCount).map((value2) => {
+          const selectedOption = options.find(
+            (option) => option.value === value2
+          );
           const label = findTreeLabel(value2) || selectedOption?.label || value2;
           const prefix = selectedOption?.prefix;
-          return /* @__PURE__ */ React.createElement(Tag, { key: value2, color: "blue", className: "focus:ring-0 flex items-center gap-2 max-w-[15.625rem]" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 truncate min-w-0" }, prefix && /* @__PURE__ */ React.createElement(
-            Typography,
-            {
-              className: "flex items-center flex-shrink-0 [&_svg]:text-blue-600",
-              textColor: "text-blue-600"
-            },
-            prefix
-          ), /* @__PURE__ */ React.createElement(
-            Typography,
+          return /* @__PURE__ */ React.createElement(
+            Tag,
             {
-              variant: getFontVariant(size),
-              textColor: "text-blue-600",
-              className: "truncate"
+              key: value2,
+              color: "blue",
+              className: "focus:ring-0 flex items-center gap-2 max-w-[15.625rem]",
+              "data-tag-item": true
             },
-            label
-          )), /* @__PURE__ */ React.createElement(
-            X,
-            {
-              className: "h-4 w-4 cursor-pointer flex-shrink-0",
-              onClick: (event) => {
-                event.stopPropagation();
-                toggleOption(value2);
+            /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 truncate min-w-0" }, prefix && /* @__PURE__ */ React.createElement(
+              Typography,
+              {
+                className: "flex items-center flex-shrink-0 [&_svg]:text-blue-600",
+                textColor: "text-blue-600"
+              },
+              prefix
+            ), /* @__PURE__ */ React.createElement(
+              Typography,
+              {
+                variant: getFontVariant(size),
+                textColor: "text-blue-600",
+                className: "truncate"
+              },
+              label
+            )),
+            !disabled && !readOnly && /* @__PURE__ */ React.createElement(
+              X,
+              {
+                className: "h-5 w-5 cursor-pointer flex-shrink-0",
+                onClick: (event) => {
+                  event.stopPropagation();
+                  toggleOption(value2);
+                }
               }
-            }
-          ));
-        }), selectedValues.length > dynamicMaxCount && /* @__PURE__ */ React.createElement(Tag, { color: "blue", className: "focus:ring-0" }, /* @__PURE__ */ React.createElement(Typography, { variant: getFontVariant(size), className: "text-blue-600" }, `+ ${selectedValues.length - dynamicMaxCount}`))), /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React.createElement(
+            )
+          );
+        }), selectedValues.length > dynamicMaxCount && /* @__PURE__ */ React.createElement(Tag, { color: "blue", className: "focus:ring-0", "data-tag-item": true, "data-counter-tag": true }, /* @__PURE__ */ React.createElement(
+          Typography,
+          {
+            variant: getFontVariant(size),
+            className: "text-blue-600"
+          },
+          `+ ${selectedValues.length - dynamicMaxCount}`
+        ))), /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between" }, !disabled && !readOnly && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
           X,
           {
-            className: "h-4 w-4 cursor-pointer text-grey-800",
+            className: "h-5 w-5 cursor-pointer text-grey-800",
             onClick: (event) => {
               event.stopPropagation();
               handleClear();
@@ -560,13 +601,13 @@ const MultiSelect = React.forwardRef(
           Separator,
           {
             orientation: "vertical",
-            className: "flex min-h-4 mx-1 h-full"
+            className: "flex min-h-5 mx-1 h-full"
           }
-        ), isPopoverOpen ? /* @__PURE__ */ React.createElement(ChevronUp, { className: "h-4 w-4 cursor-pointer text-grey-800" }) : /* @__PURE__ */ React.createElement(ChevronDown, { className: "h-4 w-4 cursor-pointer text-grey-800" }))) : /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between w-full mx-auto" }, /* @__PURE__ */ React.createElement(
+        )), isPopoverOpen ? /* @__PURE__ */ React.createElement(ChevronUp, { className: "h-5 w-5 cursor-pointer text-grey-800" }) : /* @__PURE__ */ React.createElement(ChevronDown, { className: "h-5 w-5 cursor-pointer text-grey-800" }))) : /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between w-full mx-auto" }, /* @__PURE__ */ React.createElement(
           Typography,
           {
             variant: getFontVariant(size),
-            className: "text-grey-800 mx-3"
+            className: "text-grey-500 mx-3"
           },
           placeholder
         ), isPopoverOpen ? /* @__PURE__ */ React.createElement(ChevronUp, { className: "h-4 cursor-pointer text-grey-800 mx-2" }) : /* @__PURE__ */ React.createElement(ChevronDown, { className: "h-4 cursor-pointer text-grey-800 mx-2" }))
@@ -583,114 +624,165 @@ const MultiSelect = React.forwardRef(
           align: "start",
           onEscapeKeyDown: () => setIsPopoverOpen(false)
         },
-        !isTree && /* @__PURE__ */ React.createElement(Command, { shouldFilter: false, className: SEARCH_INPUT_CLASSES[size] }, /* @__PURE__ */ React.createElement(
-          CommandInput,
-          {
-            placeholder: treeSearchPlaceholder || t("multiSelect.search"),
-            onKeyDown: handleInputKeyDown,
-            value: query,
-            onValueChange: (v) => setQuery(v)
-          }
-        ), /* @__PURE__ */ React.createElement(CommandList, null, /* @__PURE__ */ React.createElement(CommandGroup, null, (effectiveOptions.length === 0 || query && filteredOptions.length === 0) && /* @__PURE__ */ React.createElement(CommandEmpty, { className: cn("p-4 text-center text-grey-800", getFontVariant(size)) }, t("multiSelect.empty")), !query && effectiveOptions.length > 0 && /* @__PURE__ */ React.createElement(
-          CommandItem,
+        !isTree && /* @__PURE__ */ React.createElement(
+          Command,
           {
-            key: "all",
-            onSelect: toggleAll,
-            className: "cursor-pointer"
+            shouldFilter: false,
+            className: SEARCH_INPUT_CLASSES[size]
           },
           /* @__PURE__ */ React.createElement(
-            "div",
+            CommandInput,
             {
-              className: cn(
-                "flex h-4 w-4 items-center justify-center rounded-sm border border-grey-800",
-                selectedValues.length > 0 ? "bg-blue-600 border-blue-600 text-primary-foreground" : "opacity-50 [&_svg]:invisible"
-              )
-            },
-            selectedValues.length === effectiveOptions.length ? /* @__PURE__ */ React.createElement(Check, { className: "!h-3 !w-3 !text-white", strokeWidth: 3 }) : /* @__PURE__ */ React.createElement(Minus, { className: "!h-3 !w-3 !text-white", strokeWidth: 3 })
+              placeholder: treeSearchPlaceholder || t("multiSelect.search"),
+              onKeyDown: handleInputKeyDown,
+              value: query,
+              onValueChange: (v) => setQuery(v),
+              disabled: readOnly
+            }
           ),
-          /* @__PURE__ */ React.createElement(
-            Typography,
+          /* @__PURE__ */ React.createElement(CommandList, null, /* @__PURE__ */ React.createElement(CommandGroup, null, (effectiveOptions.length === 0 || query && filteredOptions.length === 0) && /* @__PURE__ */ React.createElement(
+            CommandEmpty,
             {
-              variant: getFontVariant(size),
-              className: "text-grey-800"
-            },
-            selectAllLabel ?? t("multiSelect.selectAll")
-          )
-        ), isGrouped ? Object.entries(groupedOptions).map(
-          ([categoryName, categoryOptions]) => {
-            const filtered = categoryOptions.filter(
-              (opt) => !query || effectiveOptions.some(
-                (eff) => eff.value === opt.value && filteredOptions.some(
-                  (filt) => filt.value === opt.value
-                )
+              className: cn(
+                "p-4 text-center text-grey-800",
+                getFontVariant(size)
               )
-            );
-            if (!filtered.length) return null;
-            return /* @__PURE__ */ React.createElement("div", { key: categoryName }, /* @__PURE__ */ React.createElement("div", { className: "px-2 py-2 text-xs font-medium text-muted-foreground" }, categoryName), filtered.map((option) => {
-              const isSelected = selectedValues.includes(
-                option.value
-              );
-              return /* @__PURE__ */ React.createElement(
-                CommandItem,
-                {
-                  key: option.value,
-                  onSelect: () => toggleOption(option.value),
-                  className: "cursor-pointer"
-                },
-                /* @__PURE__ */ React.createElement(
-                  "div",
-                  {
-                    className: cn(
-                      "flex h-4 w-4 items-center justify-center rounded-sm border-2 border-grey-400 flex-shrink-0",
-                      isSelected ? "bg-blue-600 border-blue-600 text-primary-foreground" : "opacity-50 [&_svg]:invisible"
-                    )
-                  },
-                  /* @__PURE__ */ React.createElement(Check, { className: "!h-3 !w-3 !text-white", strokeWidth: 3 })
-                ),
-                /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 truncate min-w-0" }, option.prefix && /* @__PURE__ */ React.createElement(Typography, { className: "flex items-center flex-shrink-0" }, option.prefix), /* @__PURE__ */ React.createElement(
-                  Typography,
-                  {
-                    variant: getFontVariant(size),
-                    className: "text-grey-800 truncate overflow-hidden",
-                    title: option.label
-                  },
-                  highlight(option.label, query)
-                ))
-              );
-            }));
-          }
-        ) : filteredOptions.map((option) => {
-          const isSelected = selectedValues.includes(
-            option.value
-          );
-          return /* @__PURE__ */ React.createElement(
+            },
+            t("multiSelect.empty")
+          ), !query && effectiveOptions.length > 0 && /* @__PURE__ */ React.createElement(
             CommandItem,
             {
-              key: option.value,
-              onSelect: () => toggleOption(option.value),
-              className: "cursor-pointer"
+              key: "all",
+              onSelect: readOnly ? void 0 : toggleAll,
+              className: cn(
+                "cursor-pointer",
+                readOnly && "cursor-default pointer-events-none hover:bg-transparent"
+              )
             },
             /* @__PURE__ */ React.createElement(
               "div",
               {
                 className: cn(
-                  "flex h-4 w-4 items-center justify-center rounded-sm border border-grey-800 flex-shrink-0",
-                  isSelected ? "bg-blue-600 border-blue-600 text-primary-foreground" : "opacity-50 [&_svg]:invisible"
+                  "flex h-4 w-4 items-center justify-center rounded-sm border border-grey-800",
+                  selectedValues.length > 0 ? "bg-blue-600 border-blue-600 text-primary-foreground" : "opacity-50 [&_svg]:invisible"
                 )
               },
-              /* @__PURE__ */ React.createElement(Check, { className: "!h-3 !w-3 !text-white", strokeWidth: 3 })
+              selectedValues.length === effectiveOptions.length ? /* @__PURE__ */ React.createElement(
+                Check,
+                {
+                  className: "!h-3 !w-3 !text-white",
+                  strokeWidth: 3
+                }
+              ) : /* @__PURE__ */ React.createElement(
+                Minus,
+                {
+                  className: "!h-3 !w-3 !text-white",
+                  strokeWidth: 3
+                }
+              )
             ),
-            /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 truncate min-w-0" }, option.prefix && /* @__PURE__ */ React.createElement(Typography, { className: "flex items-center flex-shrink-0" }, option.prefix), /* @__PURE__ */ React.createElement(
+            /* @__PURE__ */ React.createElement(
               Typography,
               {
                 variant: getFontVariant(size),
-                className: "text-grey-800 truncate overflow-hidden",
-                title: option.label
+                className: "text-grey-800"
               },
-              highlight(option.label, query)
-            ))
-          );
-        })))),
+              selectAllLabel ?? t("multiSelect.selectAll")
+            )
+          ), isGrouped ? Object.entries(groupedOptions).map(
+            ([categoryName, categoryOptions]) => {
+              const filtered = categoryOptions.filter(
+                (opt) => !query || effectiveOptions.some(
+                  (eff) => eff.value === opt.value && filteredOptions.some(
+                    (filt) => filt.value === opt.value
+                  )
+                )
+              );
+              if (!filtered.length) return null;
+              return /* @__PURE__ */ React.createElement("div", { key: categoryName }, /* @__PURE__ */ React.createElement("div", { className: "px-2 py-2 text-xs font-medium text-muted-foreground" }, categoryName), filtered.map((option) => {
+                const isSelected = selectedValues.includes(
+                  option.value
+                );
+                return /* @__PURE__ */ React.createElement(
+                  CommandItem,
+                  {
+                    key: option.value,
+                    onSelect: readOnly ? void 0 : () => toggleOption(option.value),
+                    className: cn(
+                      "cursor-pointer",
+                      readOnly && "cursor-default pointer-events-none hover:bg-transparent"
+                    )
+                  },
+                  /* @__PURE__ */ React.createElement(
+                    "div",
+                    {
+                      className: cn(
+                        "flex h-4 w-4 items-center justify-center rounded-sm border-2 border-grey-400 flex-shrink-0",
+                        isSelected ? "bg-blue-600 border-blue-600 text-primary-foreground" : "opacity-50 [&_svg]:invisible"
+                      )
+                    },
+                    /* @__PURE__ */ React.createElement(
+                      Check,
+                      {
+                        className: "!h-3 !w-3 !text-white",
+                        strokeWidth: 3
+                      }
+                    )
+                  ),
+                  /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 min-w-0" }, option.prefix && /* @__PURE__ */ React.createElement(Typography, { className: "flex items-center flex-shrink-0" }, option.prefix), /* @__PURE__ */ React.createElement(
+                    Typography,
+                    {
+                      variant: getFontVariant(size),
+                      className: "text-grey-800 break-words",
+                      title: option.label
+                    },
+                    highlight(option.label, query)
+                  ))
+                );
+              }));
+            }
+          ) : filteredOptions.map((option) => {
+            const isSelected = selectedValues.includes(
+              option.value
+            );
+            return /* @__PURE__ */ React.createElement(
+              CommandItem,
+              {
+                key: option.value,
+                onSelect: readOnly ? void 0 : () => toggleOption(option.value),
+                className: cn(
+                  "cursor-pointer",
+                  readOnly && "cursor-default pointer-events-none hover:bg-transparent"
+                )
+              },
+              /* @__PURE__ */ React.createElement(
+                "div",
+                {
+                  className: cn(
+                    "flex h-4 w-4 items-center justify-center rounded-sm border border-grey-800 flex-shrink-0",
+                    isSelected ? "bg-blue-600 border-blue-600 text-primary-foreground" : "opacity-50 [&_svg]:invisible"
+                  )
+                },
+                /* @__PURE__ */ React.createElement(
+                  Check,
+                  {
+                    className: "!h-3 !w-3 !text-white",
+                    strokeWidth: 3
+                  }
+                )
+              ),
+              /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 min-w-0" }, option.prefix && /* @__PURE__ */ React.createElement(Typography, { className: "flex items-center flex-shrink-0" }, option.prefix), /* @__PURE__ */ React.createElement(
+                Typography,
+                {
+                  variant: getFontVariant(size),
+                  className: "text-grey-800 break-words",
+                  title: option.label
+                },
+                highlight(option.label, query)
+              ))
+            );
+          })))
+        ),
         isTree && /* @__PURE__ */ React.createElement("div", { className: "min-w-[260px] max-h-80 overflow-hidden flex flex-col" }, treeSearch && /* @__PURE__ */ React.createElement("div", { className: "px-1 pt-2 pb-0 border-b border-grey-300 flex-shrink-0" }, /* @__PURE__ */ React.createElement("div", { className: "relative" }, /* @__PURE__ */ React.createElement(
           "svg",
           {
@@ -715,6 +807,7 @@ const MultiSelect = React.forwardRef(
             value: treeQuery,
             onChange: (e) => setTreeQuery(e.target.value),
             placeholder: treeSearchPlaceholder || t("multiSelect.search"),
+            disabled: readOnly,
             className: cn(
               "w-full pl-9 pr-3 border-0 focus:outline-none focus:ring-0 bg-transparent placeholder:text-muted-foreground",
               getFontVariant(size),
@@ -724,8 +817,11 @@ const MultiSelect = React.forwardRef(
         ))), /* @__PURE__ */ React.createElement("div", { className: "px-2 pb-1 overflow-y-auto overflow-x-hidden [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-grey-300 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb:hover]:bg-grey-400" }, !treeQuery && treeOptions && treeOptions.length > 0 && /* @__PURE__ */ React.createElement(
           "div",
           {
-            className: "flex items-center gap-2 px-2 py-1 cursor-pointer rounded-sm hover:bg-accent",
-            onClick: toggleAll
+            className: cn(
+              "flex items-center gap-2 px-2 py-1 cursor-pointer rounded-sm hover:bg-accent",
+              readOnly && "cursor-default hover:bg-transparent pointer-events-none"
+            ),
+            onClick: readOnly ? void 0 : toggleAll
           },
           /* @__PURE__ */ React.createElement(
             "div",
@@ -745,7 +841,19 @@ const MultiSelect = React.forwardRef(
                   acc += treeSelectionStrategy === "all" ? 1 + countAll(n.children) : countAll(n.children);
               }
               return acc;
-            }(treeOptions) ? /* @__PURE__ */ React.createElement(Check, { className: "!h-3 !w-3 !text-white", strokeWidth: 3 }) : /* @__PURE__ */ React.createElement(Minus, { className: "!h-3 !w-3 !text-white", strokeWidth: 3 })
+            }(treeOptions) ? /* @__PURE__ */ React.createElement(
+              Check,
+              {
+                className: "!h-3 !w-3 !text-white",
+                strokeWidth: 3
+              }
+            ) : /* @__PURE__ */ React.createElement(
+              Minus,
+              {
+                className: "!h-3 !w-3 !text-white",
+                strokeWidth: 3
+              }
+            )
           ),
           /* @__PURE__ */ React.createElement(
             Typography,
@@ -755,7 +863,16 @@ const MultiSelect = React.forwardRef(
             },
             selectAllLabel ?? t("multiSelect.selectAll")
           )
-        ), !treeOptions || treeOptions.length === 0 || treeQuery && displayedTree.length === 0 ? /* @__PURE__ */ React.createElement("div", { className: cn("p-4 text-center text-grey-800", getFontVariant(size)) }, t("multiSelect.empty")) : renderTree(displayedTree)))
+        ), !treeOptions || treeOptions.length === 0 || treeQuery && displayedTree.length === 0 ? /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: cn(
+              "p-4 text-center text-grey-800",
+              getFontVariant(size)
+            )
+          },
+          t("multiSelect.empty")
+        ) : renderTree(displayedTree)))
       )
     );
   }