lecom-ui 5.4.44 → 5.4.45

package/dist/components/MultiSelect/MultiSelect.js

@@ -7,6 +7,7 @@ import { Tag } from '../Tag/Tag.js';
 import { Typography } from '../Typography/Typography.js';
 import { cn } from '../../lib/utils.js';
 import { X, ChevronUp, ChevronDown, Check, Minus } from 'lucide-react';
+import { useDynamicMaxHeight } from '../../hooks/useDynamicMaxHeight.js';
 import { initializeI18n } from '../../i18n/index.js';
 
 initializeI18n();
@@ -15,6 +16,10 @@ const TRIGGER_HEIGHT_CLASSES = {
   medium: "!h-10",
   large: "!h-12"
 };
+const STATUS_STYLES = {
+  default: "border-grey-400 hover:border-grey-500 focus:border-grey-400 focus:ring-grey-600",
+  error: "border-red-600 hover:border-red-600 focus:border-red-600 focus:ring-0"
+};
 const SEARCH_INPUT_HEIGHT_CLASSES = {
   small: "h-7",
   medium: "h-8",
@@ -58,7 +63,11 @@ const MultiSelect = React.forwardRef(
     classNameContent,
     size = "medium",
     disabled = false,
-    readOnly = false
+    readOnly = false,
+    status = "default",
+    dynamicHeight = true,
+    dynamicHeightBottomPadding = 50,
+    dynamicHeightMinHeight = 120
   }, ref) => {
     const { t } = useTranslation();
     const [selectedValues, setSelectedValues] = React.useState(value);
@@ -68,6 +77,11 @@ const MultiSelect = React.forwardRef(
       selectedValues.length || 1
     );
     const buttonRef = React.useRef(null);
+    const { ref: dynamicHeightRef, style: dynamicHeightStyle } = useDynamicMaxHeight({
+      enabled: dynamicHeight && isPopoverOpen,
+      bottomPadding: dynamicHeightBottomPadding,
+      minHeight: dynamicHeightMinHeight
+    });
     React.useEffect(() => {
       const shallowEqual = (a, b) => {
         if (a === b) return true;
@@ -535,10 +549,10 @@ const MultiSelect = React.forwardRef(
           onClick: handleTogglePopover,
           className: cn(
             `flex w-full p-1 rounded-sm h-auto items-center justify-between bg-background
-              border border-grey-400
-              hover:border-grey-500 focus:border-grey-400 focus:ring-grey-600 focus:ring-opacity-15 focus:ring-4
+              border focus:ring-opacity-15 focus:ring-4
               transition-all duration-300 outline-none
               [&_svg]:pointer-events-auto`,
+            STATUS_STYLES[status],
             maxCount === void 0 && TRIGGER_HEIGHT_CLASSES[size],
             disabled && "opacity-50 cursor-not-allowed pointer-events-none",
             readOnly && !disabled && "opacity-50 hover:border-grey-400",
@@ -621,8 +635,10 @@ const MultiSelect = React.forwardRef(
       /* @__PURE__ */ React.createElement(
         PopoverContent,
         {
+          ref: dynamicHeightRef,
+          style: dynamicHeightStyle,
           className: cn(
-            "p-0 max-h-80",
+            "p-0 flex flex-col",
             matchTriggerWidth && "w-[var(--radix-popover-trigger-width)]",
             classNameContent
           ),
@@ -646,115 +662,25 @@ const MultiSelect = React.forwardRef(
               disabled: readOnly
             }
           ),
-          /* @__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,
+          /* @__PURE__ */ React.createElement(
+            CommandList,
             {
-              key: "all",
-              onSelect: readOnly ? void 0 : toggleAll,
-              className: cn(
-                "cursor-pointer",
-                readOnly && "cursor-default pointer-events-none hover:bg-transparent"
-              )
+              className: "[&::-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"
             },
-            /* @__PURE__ */ React.createElement(
-              "div",
+            /* @__PURE__ */ React.createElement(CommandGroup, null, (effectiveOptions.length === 0 || query && filteredOptions.length === 0) && /* @__PURE__ */ React.createElement(
+              CommandEmpty,
               {
                 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"
+                  "p-4 text-center text-grey-800",
+                  getFontVariant(size)
                 )
               },
-              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(
-              Typography,
-              {
-                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
-                  )
-                )
-              );
-              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 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 break-words"
-                    },
-                    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: readOnly ? void 0 : () => toggleOption(option.value),
+                key: "all",
+                onSelect: readOnly ? void 0 : toggleAll,
                 className: cn(
                   "cursor-pointer",
                   readOnly && "cursor-default pointer-events-none hover:bg-transparent"
@@ -764,30 +690,126 @@ const MultiSelect = React.forwardRef(
                 "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(
+                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 break-words"
+                  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 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 break-words"
+                      },
+                      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 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 break-words"
+                  },
+                  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(
+        isTree && /* @__PURE__ */ React.createElement("div", { className: "min-w-[260px] 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",
           {
             className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground",
@@ -818,65 +840,72 @@ const MultiSelect = React.forwardRef(
               SEARCH_INPUT_HEIGHT_CLASSES[size]
             )
           }
-        ))), /* @__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(
+        ))), /* @__PURE__ */ React.createElement(
           "div",
           {
-            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
+            className: "px-2 pb-1 flex-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"
           },
-          /* @__PURE__ */ React.createElement(
+          !treeQuery && treeOptions && treeOptions.length > 0 && /* @__PURE__ */ React.createElement(
             "div",
             {
               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"
-              )
+                "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
             },
-            treeOptions && selectedValues.length === function countAll(nodes) {
-              if (!nodes) return 0;
-              let acc = 0;
-              for (const n of nodes) {
-                const hasChildren = !!(n.children && n.children.length);
-                if (!hasChildren) acc += 1;
-                else
-                  acc += treeSelectionStrategy === "all" ? 1 + countAll(n.children) : countAll(n.children);
-              }
-              return acc;
-            }(treeOptions) ? /* @__PURE__ */ React.createElement(
-              Check,
+            /* @__PURE__ */ React.createElement(
+              "div",
               {
-                className: "!h-3 !w-3 !text-white",
-                strokeWidth: 3
-              }
-            ) : /* @__PURE__ */ React.createElement(
-              Minus,
+                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"
+                )
+              },
+              treeOptions && selectedValues.length === function countAll(nodes) {
+                if (!nodes) return 0;
+                let acc = 0;
+                for (const n of nodes) {
+                  const hasChildren = !!(n.children && n.children.length);
+                  if (!hasChildren) acc += 1;
+                  else
+                    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
+                }
+              )
+            ),
+            /* @__PURE__ */ React.createElement(
+              Typography,
               {
-                className: "!h-3 !w-3 !text-white",
-                strokeWidth: 3
-              }
+                variant: getFontVariant(size),
+                className: "text-grey-800"
+              },
+              selectAllLabel ?? t("multiSelect.selectAll")
             )
           ),
-          /* @__PURE__ */ React.createElement(
-            Typography,
+          !treeOptions || treeOptions.length === 0 || treeQuery && displayedTree.length === 0 ? /* @__PURE__ */ React.createElement(
+            "div",
             {
-              variant: getFontVariant(size),
-              className: "text-grey-800"
+              className: cn(
+                "p-4 text-center text-grey-800",
+                getFontVariant(size)
+              )
             },
-            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)))
+            t("multiSelect.empty")
+          ) : renderTree(displayedTree)
+        ))
       )
     );
   }

package/dist/components/Textarea/Textarea.js

@@ -3,9 +3,8 @@ import { cn } from '../../lib/utils.js';
 import { cva } from 'class-variance-authority';
 
 const textareaVariants = cva(
-  `flex h-20 w-full rounded-sm border border-grey-400 bg-background px-3 py-2 text-grey-800
+  `flex h-20 w-full rounded-sm border bg-background px-3 py-2 text-grey-800
   placeholder:text-grey-500 outline-none
-  hover:border-grey-500 focus:bg-background focus:border-grey-400 focus:ring-grey-600 focus:ring-opacity-15 focus:ring-4
   disabled:cursor-not-allowed disabled:opacity-50
   transition-[border-color,box-shadow,background-color] duration-300`,
   {
@@ -32,22 +31,27 @@ const textareaVariants = cva(
         horizontal: "resize-x",
         vertical: "resize-y",
         "vertical-limited": "resize-y min-h-[40px] max-h-[480px]"
+      },
+      status: {
+        default: "border-grey-400 hover:border-grey-500 focus:bg-background focus:border-grey-400 focus:ring-grey-600 focus:ring-opacity-15 focus:ring-4",
+        error: "border-red-600 hover:border-red-600 focus:border-red-600 focus:ring-0"
       }
     },
     defaultVariants: {
       variant: "default",
       size: "default",
       radius: "default",
-      resize: "default"
+      resize: "default",
+      status: "default"
     }
   }
 );
 const Textarea = React.forwardRef(
-  ({ className, variant, size, radius, resize, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  ({ className, variant, size, radius, resize, status, ...props }, ref) => /* @__PURE__ */ React.createElement(
     "textarea",
     {
       className: cn(
-        textareaVariants({ variant, size, radius, resize, className })
+        textareaVariants({ variant, size, radius, resize, status, className })
       ),
       ref,
       ...props

package/dist/hooks/useDynamicMaxHeight.js

@@ -0,0 +1,49 @@
+import * as React from 'react';
+
+const DEFAULT_BOTTOM_PADDING = 50;
+const DEFAULT_MIN_HEIGHT = 120;
+function useDynamicMaxHeight(options = {}) {
+  const {
+    enabled = false,
+    bottomPadding = DEFAULT_BOTTOM_PADDING,
+    minHeight = DEFAULT_MIN_HEIGHT
+  } = options;
+  const ref = React.useRef(null);
+  const [maxHeight, setMaxHeight] = React.useState(
+    void 0
+  );
+  const lastCalculatedHeight = React.useRef(void 0);
+  React.useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    const calculateHeight = () => {
+      if (!ref.current) return;
+      const rect = ref.current.getBoundingClientRect();
+      const viewportHeight = window.innerHeight;
+      const elementTop = rect.top;
+      const availableHeight = viewportHeight - elementTop - bottomPadding;
+      const finalHeight = Math.max(availableHeight, minHeight);
+      lastCalculatedHeight.current = finalHeight;
+      setMaxHeight(finalHeight);
+    };
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        calculateHeight();
+      });
+    });
+    window.addEventListener("resize", calculateHeight);
+    window.addEventListener("scroll", calculateHeight, true);
+    return () => {
+      window.removeEventListener("resize", calculateHeight);
+      window.removeEventListener("scroll", calculateHeight, true);
+    };
+  }, [enabled, bottomPadding, minHeight]);
+  const style = React.useMemo(() => {
+    if (maxHeight === void 0) return {};
+    return { maxHeight: `${maxHeight}px` };
+  }, [maxHeight]);
+  return { ref, maxHeight, style };
+}
+
+export { useDynamicMaxHeight };

package/dist/i18n/locales/en_us.js

@@ -35,6 +35,10 @@ const language = {
       sortAscendingText: "Sort A-Z",
       sortDescendingText: "Sort Z-A",
       sortDefault: "Restore default"
+    },
+    accordion: {
+      expand: "Expand",
+      collapse: "Collapse"
     }
   }
 };

package/dist/i18n/locales/es_es.js

@@ -35,6 +35,10 @@ const language = {
       sortAscendingText: "Ordenar A-Z",
       sortDescendingText: "Ordenar Z-A",
       sortDefault: "Restaurar predeterminado"
+    },
+    accordion: {
+      expand: "Expandir",
+      collapse: "Contraer"
     }
   }
 };

package/dist/i18n/locales/pt_br.js

@@ -35,6 +35,10 @@ const language = {
       sortAscendingText: "Ordenar A-Z",
       sortDescendingText: "Ordenar Z-A",
       sortDefault: "Restaurar padr\xE3o"
+    },
+    accordion: {
+      expand: "Expandir",
+      collapse: "Retrair"
     }
   }
 };