lecom-ui 5.4.27 → 5.4.29

package/dist/components/MultiSelect/MultiSelect.js

@@ -63,7 +63,9 @@ const MultiSelect = React.forwardRef(
     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);
     React.useEffect(() => {
       const shallowEqual = (a, b) => {
@@ -341,7 +343,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) => {
@@ -522,35 +527,53 @@ const MultiSelect = React.forwardRef(
           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);
+          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]"
             },
-            label
-          )), !disabled && /* @__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 && /* @__PURE__ */ React.createElement(
+              X,
+              {
+                className: "h-4 w-4 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" }, !disabled && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+            )
+          );
+        }), 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" }, !disabled && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
           X,
           {
             className: "h-4 w-4 cursor-pointer text-grey-800",
@@ -569,7 +592,7 @@ const MultiSelect = React.forwardRef(
           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" }))
@@ -586,114 +609,155 @@ 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)
+            }
           ),
-          /* @__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),
+              key: "all",
+              onSelect: toggleAll,
               className: "cursor-pointer"
             },
             /* @__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: () => 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(
+              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 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 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)
+              ))
+            );
+          })))
+        ),
         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",
           {
@@ -748,7 +812,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,
@@ -758,7 +834,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)))
       )
     );
   }

package/dist/components/TagInput/TagInput.js

@@ -13,15 +13,31 @@ function TagItem({ item, onRemove, readOnly }) {
     },
     [item.value, onRemove]
   );
-  return /* @__PURE__ */ React.createElement(Tag, { "data-tag": "true", color: "blue", className: "max-w-[15.625rem] h-6 !px-2 !py-0.5" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body-small-400", className: "text-blue-600 truncate p-0" }, item.label), !readOnly && /* @__PURE__ */ React.createElement(
-    X,
+  return /* @__PURE__ */ React.createElement(
+    Tag,
     {
-      className: "w-4 h-4 cursor-pointer flex-shrink-0",
-      onClick: handleRemove,
-      "aria-label": `Remover ${item.label}`,
-      tabIndex: 0
-    }
-  ));
+      "data-tag": "true",
+      color: "blue",
+      className: "max-w-[15.625rem] h-6 !px-2 !py-0.5"
+    },
+    /* @__PURE__ */ React.createElement(
+      Typography,
+      {
+        variant: "body-small-400",
+        className: "text-blue-600 truncate p-0"
+      },
+      item.label
+    ),
+    !readOnly && /* @__PURE__ */ React.createElement(
+      X,
+      {
+        className: "w-4 h-4 cursor-pointer flex-shrink-0",
+        onClick: handleRemove,
+        "aria-label": `Remover ${item.label}`,
+        tabIndex: 0
+      }
+    )
+  );
 }
 function HiddenCountTag({ count }) {
   return /* @__PURE__ */ React.createElement(Tag, { color: "blue", "data-tag": "true" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body-small-400", className: "text-blue-600" }, "+", count));
@@ -69,7 +85,8 @@ function useDynamicMaxCount(ref, value, maxDisplayCount) {
   const [maxLines, setMaxLines] = React.useState(null);
   const hasCalculatedMaxLines = React.useRef(false);
   React.useEffect(() => {
-    if (hasCalculatedMaxLines.current || !ref.current || value.length === 0) return;
+    if (hasCalculatedMaxLines.current || !ref.current || value.length === 0)
+      return;
     const calculateMaxLines = () => {
       if (!ref.current) {
         setTimeout(calculateMaxLines, 10);
@@ -83,7 +100,10 @@ function useDynamicMaxCount(ref, value, maxDisplayCount) {
       const TAG_HEIGHT = 24;
       const CONTAINER_PADDING_VERTICAL = 4;
       const availableHeight = containerHeight - CONTAINER_PADDING_VERTICAL * 2;
-      const calculatedMaxLines = Math.max(1, Math.floor(availableHeight / TAG_HEIGHT));
+      const calculatedMaxLines = Math.max(
+        1,
+        Math.floor(availableHeight / TAG_HEIGHT)
+      );
       setMaxLines(calculatedMaxLines);
       hasCalculatedMaxLines.current = true;
     };
@@ -126,7 +146,11 @@ function useDynamicMaxCount(ref, value, maxDisplayCount) {
         setDynamicMaxCount(value.length);
         return;
       }
-      const count = simulateTagLayout(estimatedWidths, availableWidth, maxLines);
+      const count = simulateTagLayout(
+        estimatedWidths,
+        availableWidth,
+        maxLines
+      );
       setDynamicMaxCount(count);
     };
     const rafId = requestAnimationFrame(() => {
@@ -192,7 +216,7 @@ function TagInput(props) {
       style: containerStyles,
       ...restProps
     },
-    value.length === 0 && /* @__PURE__ */ React.createElement(Typography, { variant: "body-small-400", className: "text-grey-400" }, placeholder),
+    value.length === 0 && /* @__PURE__ */ React.createElement(Typography, { variant: "body-small-400", className: "text-grey-500" }, placeholder),
     displayTags.map((item) => /* @__PURE__ */ React.createElement(
       TagItem,
       {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lecom-ui",
-  "version": "5.4.27",
+  "version": "5.4.29",
   "license": "MIT",
   "type": "module",
   "module": "dist/index.js",
@@ -50,7 +50,7 @@
     "hex-color-opacity": "^0.4.2",
     "i18next": "^24.2.2",
     "lucide-react": "^0.488.0",
-    "next": "^15.1.4",
+    "next": "15.5.9",
     "react": ">=18.0.0",
     "react-colorful": "^5.6.1",
     "react-day-picker": "^9.8.0",