lecom-ui 5.3.78 → 5.3.80

package/dist/components/TagInput/TagInput.js

@@ -13,10 +13,10 @@ function TagItem({ item, onRemove, readOnly }) {
     },
     [item.value, onRemove]
   );
-  return /* @__PURE__ */ React.createElement(Tag, { "data-tag": "true", color: "blue" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body-small-400", className: "text-blue-600" }, item.label), !readOnly && /* @__PURE__ */ React.createElement(
+  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,
     {
-      className: "w-4 h-4 cursor-pointer",
+      className: "w-4 h-4 cursor-pointer flex-shrink-0",
       onClick: handleRemove,
       "aria-label": `Remover ${item.label}`,
       tabIndex: 0
@@ -26,95 +26,93 @@ function TagItem({ item, onRemove, readOnly }) {
 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));
 }
-function useTagVisibility(ref, value) {
-  const getInitialEstimate = React.useCallback((totalTags) => {
-    if (totalTags <= 3) return totalTags;
-    if (totalTags <= 4) return totalTags;
-    return Math.min(5, totalTags);
-  }, []);
-  const [maxVisibleCount, setMaxVisibleCount] = React.useState(
-    () => getInitialEstimate(value.length)
+function useDynamicMaxCount(ref, value, maxDisplayCount) {
+  const [dynamicMaxCount, setDynamicMaxCount] = React.useState(
+    value.length || 1
   );
-  const [hiddenCount, setHiddenCount] = React.useState(0);
-  const calculateVisibleTags = React.useCallback(
-    (children, totalTags) => {
-      if (children.length === 0 || totalTags === 0) {
-        const initialCount = getInitialEstimate(totalTags);
-        return {
-          visibleCount: initialCount,
-          hiddenCount: Math.max(totalTags - initialCount, 0)
-        };
+  React.useEffect(() => {
+    if (maxDisplayCount !== void 0) {
+      setDynamicMaxCount(maxDisplayCount);
+      return;
+    }
+    if (value.length === 0) return;
+    const calculateMaxCount = () => {
+      if (!ref.current) {
+        setTimeout(() => calculateMaxCount(), 10);
+        return;
       }
-      if (totalTags <= 3) return { visibleCount: totalTags, hiddenCount: 0 };
-      const offsetTops = [...new Set(children.map((c) => c.offsetTop))].sort(
-        (a, b) => a - b
-      );
-      if (offsetTops.length <= 1) {
-        return totalTags > 6 ? { visibleCount: 5, hiddenCount: totalTags - 5 } : { visibleCount: totalTags, hiddenCount: 0 };
+      const containerWidth = ref.current.offsetWidth;
+      if (containerWidth === 0) {
+        setTimeout(() => calculateMaxCount(), 10);
+        return;
       }
-      const firstLineTop = offsetTops[0];
-      const secondLineTop = offsetTops[1];
-      let firstLineCount = 0;
-      let secondLineCount = 0;
-      for (const child of children) {
-        if (child.offsetTop === firstLineTop) firstLineCount++;
-        else if (child.offsetTop === secondLineTop) secondLineCount++;
+      const COUNTER_TAG_WIDTH = 60;
+      const TAG_GAP = 4;
+      const CONTAINER_PADDING = 12;
+      const AVG_CHAR_WIDTH = 8;
+      const TAG_PADDING = 24;
+      const MAX_LINES = 2;
+      const availableWidth = containerWidth - CONTAINER_PADDING * 2;
+      if (availableWidth <= 0) {
+        setDynamicMaxCount(1);
+        return;
       }
-      const visibleCount = firstLineCount + secondLineCount;
-      return {
-        visibleCount,
-        hiddenCount: Math.max(totalTags - visibleCount, 0)
-      };
-    },
-    [getInitialEstimate]
-  );
-  const calculateMaxVisible = React.useCallback(() => {
-    const container = ref.current;
-    if (!container) return;
-    const children = Array.from(container.children).filter(
-      (el) => el.dataset.tag === "true" && !el.textContent?.startsWith("+")
-    );
-    const { visibleCount, hiddenCount: newHiddenCount } = calculateVisibleTags(
-      children,
-      value.length
-    );
-    setMaxVisibleCount(visibleCount);
-    setHiddenCount(newHiddenCount);
-  }, [ref, calculateVisibleTags, value.length]);
-  React.useLayoutEffect(() => {
-    const calculateWhenVisible = () => {
-      requestAnimationFrame(() => requestAnimationFrame(calculateMaxVisible));
+      const estimatedWidths = [];
+      for (let i = 0; i < value.length; i++) {
+        const label = value[i].label;
+        const textLength = label.length;
+        const calculatedWidth = textLength * AVG_CHAR_WIDTH + TAG_PADDING;
+        const estimatedWidth = Math.min(calculatedWidth, 250);
+        estimatedWidths.push(estimatedWidth);
+      }
+      let totalWidth = 0;
+      for (let i = 0; i < estimatedWidths.length; i++) {
+        totalWidth += estimatedWidths[i] + (i > 0 ? TAG_GAP : 0);
+      }
+      if (totalWidth <= availableWidth) {
+        setDynamicMaxCount(value.length);
+        return;
+      }
+      const totalAvailableWidth = availableWidth * MAX_LINES;
+      if (totalWidth <= totalAvailableWidth) {
+        setDynamicMaxCount(value.length);
+        return;
+      }
+      const availableWithCounter = totalAvailableWidth - 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++;
+        } else {
+          break;
+        }
+      }
+      setDynamicMaxCount(Math.max(1, count));
     };
-    const observer = new IntersectionObserver((entries) => {
-      if (entries.some((entry) => entry.isIntersecting)) calculateWhenVisible();
+    const rafId = requestAnimationFrame(() => {
+      calculateMaxCount();
+    });
+    const resizeObserver = new ResizeObserver(() => {
+      calculateMaxCount();
     });
-    const resizeObserver = new ResizeObserver(calculateMaxVisible);
     if (ref.current) {
-      observer.observe(ref.current);
       resizeObserver.observe(ref.current);
-      if (ref.current.offsetParent !== null) {
-        calculateWhenVisible();
-      }
     }
     return () => {
-      observer.disconnect();
+      cancelAnimationFrame(rafId);
       resizeObserver.disconnect();
     };
-  }, [value, calculateMaxVisible, ref]);
-  React.useEffect(() => {
-    const timeout = setTimeout(calculateMaxVisible, 150);
-    return () => clearTimeout(timeout);
-  }, [value.length, calculateMaxVisible]);
-  React.useLayoutEffect(() => {
-    calculateMaxVisible();
-  }, [value.length, calculateMaxVisible]);
-  return { maxVisibleCount, hiddenCount };
+  }, [maxDisplayCount, value, ref]);
+  return dynamicMaxCount;
 }
 function TagInput(props) {
   const {
     value,
     onRemove,
-    maxDisplayCount = 7,
+    maxDisplayCount,
     placeholder = "Nenhum item selecionado",
     disabled = false,
     readOnly = false,
@@ -124,14 +122,14 @@ function TagInput(props) {
     ...restProps
   } = props;
   const ref = React.useRef(null);
-  useTagVisibility(ref, value);
-  const visibleCount = Math.min(maxDisplayCount, value.length);
+  const dynamicMaxCount = useDynamicMaxCount(ref, value, maxDisplayCount);
+  const visibleCount = Math.min(dynamicMaxCount, value.length);
   const displayTags = value.slice(0, visibleCount);
   const actualHiddenCount = Math.max(value.length - visibleCount, 0);
   const textareaRadius = radius === "full" ? "large" : radius;
   const containerClassNames = cn(
     textareaVariants({ variant, radius: textareaRadius }),
-    "flex flex-wrap items-start min-h-10 gap-1 py-2 px-3",
+    "flex flex-wrap items-start min-h-10 gap-x-1 gap-y-0.5 py-1 px-3",
     disabled && "opacity-50 pointer-events-none",
     className
   );

package/dist/index.d.ts

@@ -756,9 +756,9 @@ interface HeaderProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<
 }
 
 declare const inputVariants: (props?: ({
-    variant?: "filled" | "default" | "borderless" | null | undefined;
-    size?: "small" | "large" | "default" | null | undefined;
-    radius?: "small" | "large" | "default" | "full" | null | undefined;
+    variant?: "default" | "filled" | "borderless" | null | undefined;
+    size?: "small" | "default" | "large" | null | undefined;
+    radius?: "small" | "default" | "large" | "full" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface InputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'size' | 'sufix' | 'prefix'>, VariantProps<typeof inputVariants> {
     sufix?: React$1.ReactNode;
@@ -799,6 +799,8 @@ declare const Layout: {
     displayName: string;
 };
 
+type MultiSelectSize = 'small' | 'medium' | 'large';
+type MultiSelectFont = 'body-small-400' | 'body-medium-400' | 'body-large-400';
 interface MultiSelectProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
     options?: {
         label: string;
@@ -834,6 +836,7 @@ interface MultiSelectProps extends React$1.ButtonHTMLAttributes<HTMLButtonElemen
         }[];
     };
     classNameContent?: string;
+    size?: MultiSelectSize;
 }
 interface MultiSelectTreeOption {
     label: string;
@@ -1126,9 +1129,9 @@ declare const TabsTrigger: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.
 declare const TabsContent: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
 declare const textareaVariants: (props?: ({
-    variant?: "filled" | "default" | "borderless" | null | undefined;
-    size?: "small" | "large" | "default" | null | undefined;
-    radius?: "small" | "large" | "default" | "full" | null | undefined;
+    variant?: "default" | "filled" | "borderless" | null | undefined;
+    size?: "small" | "default" | "large" | null | undefined;
+    radius?: "small" | "default" | "large" | "full" | null | undefined;
     resize?: "default" | "both" | "horizontal" | "vertical" | "vertical-limited" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface TextareaProps extends React$1.ComponentProps<'textarea'>, VariantProps<typeof textareaVariants> {
@@ -1289,4 +1292,4 @@ interface DateInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputEleme
 declare const DateInput: React$1.ForwardRefExoticComponent<DateInputProps & React$1.RefAttributes<HTMLInputElement>>;
 
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CadastroFacil, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, ColorPicker, Combobox, CustomDivider, MemoizedDataTable as DataTable, DateInput, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogScroll, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, ErrorEmptyDisplay, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Input, Layout, LogoLecom, LogoLecomBrand, ModoTeste, MultiSelect, Notification, NumberControl, Pagination, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationIndex, PaginationItem, PaginationLast, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverTrigger, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, Rpa, SairModoTeste, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Spin, Steps, Switch, SyntaxHighlighter, TOAST_REMOVE_DELAY, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TagInput, Textarea, ToggleGroup, ToggleGroupItem, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Translations, TypeMessageNotification, Typography, Upload, accordionVariants, buttonVariants, colors, fonts, initializeI18n, inputVariants, notificationVariants, reducer, tagVariants, textareaVariants, toast, typographyVariants, useFormField, useIsMobile, useNotificationToast, usePagination, useSidebar };
-export type { BgColor, BuildCellSelect, BuildColumns, BuildHeaderSelect, ButtonProps, CadastroFacilProps, CalloutNotificationProps, ChartConfig, CheckboxProps, CheckedCell, CheckedCellChange, CheckedHeader, CheckedHeaderChange, Color, ColorToken, Column, ColumnRender, ColumnSort, ColumnSortClient, ColumnTitle, ComboboxFont, ComboboxGroup, ComboboxOption, ComboboxProps, ComboboxRounded, ComboboxSize, ComboboxStatus, CustomStyles$1 as CustomStyles, DataTableProps, DateInputProps, DatePickerProps, DialogContentProps, ErrorEmptyDisplayProps, File, FillColor, Fonts, Header, HeaderProps, InlineNotificationProps, InputProps, LayoutProps, LogoLecomBrandProps, LogoLecomProps, Meta, ModoTesteProps, MultiSelectTreeOption, NotificationProps, PaginationProps, Row, RpaProps, SideBarProps, SpinProps, StepsProps, SwitchProps, TableProps, TagInputProps, TagItem, TagProps, TextColor, TextareaProps, TimelineStepItem, ToastNotificationProps, ToasterToast, TooltipContentProps, TypographyProps, UploadProps, UsePaginationItem };
+export type { BgColor, BuildCellSelect, BuildColumns, BuildHeaderSelect, ButtonProps, CadastroFacilProps, CalloutNotificationProps, ChartConfig, CheckboxProps, CheckedCell, CheckedCellChange, CheckedHeader, CheckedHeaderChange, Color, ColorToken, Column, ColumnRender, ColumnSort, ColumnSortClient, ColumnTitle, ComboboxFont, ComboboxGroup, ComboboxOption, ComboboxProps, ComboboxRounded, ComboboxSize, ComboboxStatus, CustomStyles$1 as CustomStyles, DataTableProps, DateInputProps, DatePickerProps, DialogContentProps, ErrorEmptyDisplayProps, File, FillColor, Fonts, Header, HeaderProps, InlineNotificationProps, InputProps, LayoutProps, LogoLecomBrandProps, LogoLecomProps, Meta, ModoTesteProps, MultiSelectFont, MultiSelectSize, MultiSelectTreeOption, NotificationProps, PaginationProps, Row, RpaProps, SideBarProps, SpinProps, StepsProps, SwitchProps, TableProps, TagInputProps, TagItem, TagProps, TextColor, TextareaProps, TimelineStepItem, ToastNotificationProps, ToasterToast, TooltipContentProps, TypographyProps, UploadProps, UsePaginationItem };

package/dist/plugin/extend.js

@@ -1,78 +1,78 @@
-const extend = {
-  colors: {
-    background: 'hsl(var(--background))',
-    foreground: 'hsl(var(--foreground))',
-    card: {
-      DEFAULT: 'hsl(var(--card))',
-      foreground: 'hsl(var(--card-foreground))',
-    },
-    popover: {
-      DEFAULT: 'hsl(var(--popover))',
-      foreground: 'hsl(var(--popover-foreground))',
-    },
-    primary: {
-      DEFAULT: 'hsl(var(--primary))',
-      foreground: 'hsl(var(--primary-foreground))',
-    },
-    secondary: {
-      DEFAULT: 'hsl(var(--secondary))',
-      foreground: 'hsl(var(--secondary-foreground))',
-    },
-    muted: {
-      DEFAULT: 'hsl(var(--muted))',
-      foreground: 'hsl(var(--muted-foreground))',
-    },
-    accent: {
-      DEFAULT: 'hsl(var(--accent))',
-      foreground: 'hsl(var(--accent-foreground))',
-    },
-    destructive: {
-      DEFAULT: 'hsl(var(--destructive))',
-      foreground: 'hsl(var(--destructive-foreground))',
-    },
-    border: 'hsl(var(--border))',
-    input: 'hsl(var(--input))',
-    ring: 'hsl(var(--ring))',
-    chart: {
-      1: 'hsl(var(--chart-1))',
-      2: 'hsl(var(--chart-2))',
-      3: 'hsl(var(--chart-3))',
-      4: 'hsl(var(--chart-4))',
-      5: 'hsl(var(--chart-5))',
-      6: 'hsl(var(--chart-6))',
-      7: 'hsl(var(--chart-7))',
-      8: 'hsl(var(--chart-8))',
-    },
-    sidebar: {
-      DEFAULT: 'hsl(var(--sidebar-background))',
-      foreground: 'hsl(var(--sidebar-foreground))',
-      primary: 'hsl(var(--sidebar-primary))',
-      'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
-      accent: 'hsl(var(--sidebar-accent))',
-      'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
-      border: 'hsl(var(--sidebar-border))',
-      ring: 'hsl(var(--sidebar-ring))',
-    },
-  },
-  borderRadius: {
-    lg: 'var(--radius)',
-    md: 'calc(var(--radius) - 2px)',
-    sm: 'calc(var(--radius) - 4px)',
-  },
-  keyframes: {
-    'accordion-down': {
-      from: { height: '0' },
-      to: { height: 'var(--radix-accordion-content-height)' },
-    },
-    'accordion-up': {
-      from: { height: 'var(--radix-accordion-content-height)' },
-      to: { height: '0' },
-    },
-  },
-  animation: {
-    'accordion-down': 'accordion-down 0.2s ease-out',
-    'accordion-up': 'accordion-up 0.2s ease-out',
-  },
-};
-
-export { extend };
+const extend = {
+  colors: {
+    background: 'hsl(var(--background))',
+    foreground: 'hsl(var(--foreground))',
+    card: {
+      DEFAULT: 'hsl(var(--card))',
+      foreground: 'hsl(var(--card-foreground))',
+    },
+    popover: {
+      DEFAULT: 'hsl(var(--popover))',
+      foreground: 'hsl(var(--popover-foreground))',
+    },
+    primary: {
+      DEFAULT: 'hsl(var(--primary))',
+      foreground: 'hsl(var(--primary-foreground))',
+    },
+    secondary: {
+      DEFAULT: 'hsl(var(--secondary))',
+      foreground: 'hsl(var(--secondary-foreground))',
+    },
+    muted: {
+      DEFAULT: 'hsl(var(--muted))',
+      foreground: 'hsl(var(--muted-foreground))',
+    },
+    accent: {
+      DEFAULT: 'hsl(var(--accent))',
+      foreground: 'hsl(var(--accent-foreground))',
+    },
+    destructive: {
+      DEFAULT: 'hsl(var(--destructive))',
+      foreground: 'hsl(var(--destructive-foreground))',
+    },
+    border: 'hsl(var(--border))',
+    input: 'hsl(var(--input))',
+    ring: 'hsl(var(--ring))',
+    chart: {
+      1: 'hsl(var(--chart-1))',
+      2: 'hsl(var(--chart-2))',
+      3: 'hsl(var(--chart-3))',
+      4: 'hsl(var(--chart-4))',
+      5: 'hsl(var(--chart-5))',
+      6: 'hsl(var(--chart-6))',
+      7: 'hsl(var(--chart-7))',
+      8: 'hsl(var(--chart-8))',
+    },
+    sidebar: {
+      DEFAULT: 'hsl(var(--sidebar-background))',
+      foreground: 'hsl(var(--sidebar-foreground))',
+      primary: 'hsl(var(--sidebar-primary))',
+      'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+      accent: 'hsl(var(--sidebar-accent))',
+      'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+      border: 'hsl(var(--sidebar-border))',
+      ring: 'hsl(var(--sidebar-ring))',
+    },
+  },
+  borderRadius: {
+    lg: 'var(--radius)',
+    md: 'calc(var(--radius) - 2px)',
+    sm: 'calc(var(--radius) - 4px)',
+  },
+  keyframes: {
+    'accordion-down': {
+      from: { height: '0' },
+      to: { height: 'var(--radix-accordion-content-height)' },
+    },
+    'accordion-up': {
+      from: { height: 'var(--radix-accordion-content-height)' },
+      to: { height: '0' },
+    },
+  },
+  animation: {
+    'accordion-down': 'accordion-down 0.2s ease-out',
+    'accordion-up': 'accordion-up 0.2s ease-out',
+  },
+};
+
+export { extend };