lecom-ui 5.4.56 → 5.4.57

package/README.md

@@ -1 +1 @@
-lecom-ui
+lecom-ui

package/dist/components/Header/Header.js

@@ -63,16 +63,24 @@ const Header = ({
       ...props
     },
     /* @__PURE__ */ React.createElement(Tooltip, { delayDuration: 0 }, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
-      Menu,
+      "button",
       {
-        className: "text-white transition-all duration-300 hover:cursor-pointer hover:opacity-70 shrink-0",
-        size: 32,
+        type: "button",
+        className: "appearance-none border-none bg-transparent p-0 transition-all duration-300 hover:cursor-pointer hover:opacity-70 focus-visible:opacity-70 shrink-0",
         onClick: () => {
           onOpenMenuChange?.();
           toggleSidebar();
         },
-        style: { color: customStyles.textColor }
-      }
+        "aria-label": open ? t("header.collapseMenu") : t("header.expandMenu")
+      },
+      /* @__PURE__ */ React.createElement(
+        Menu,
+        {
+          className: "text-white",
+          size: 32,
+          style: { color: customStyles.textColor }
+        }
+      )
     )), /* @__PURE__ */ React.createElement(TooltipContent, { color: "black", align: "start", side: "bottom" }, open ? t("header.collapseMenu") : t("header.expandMenu"))),
     /* @__PURE__ */ React.createElement("div", { className: "flex items-center grow gap-[100px]" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-12" }, /* @__PURE__ */ React.createElement(ImgBrand, { src: customImgSrc }), module && /* @__PURE__ */ React.createElement(
       Typography,

package/dist/components/Header/HelpMenu.js

@@ -24,11 +24,13 @@ const Item = ({
     onClick?.();
   };
   return /* @__PURE__ */ React.createElement(
-    "div",
+    "button",
     {
+      type: "button",
       onClick: handleClickItem,
+      disabled,
       className: cn(
-        "flex gap-4 items-center justify-center p-2 rounded-md hover:bg-grey-200/70 hover:cursor-pointer transition-all duration-300",
+        "flex gap-4 items-center justify-center p-2 rounded-md hover:bg-grey-200/70 hover:cursor-pointer transition-all duration-300 w-full text-left appearance-none border-none bg-transparent focus:outline-none focus-visible:bg-grey-200/70",
         !!disabled && "opacity-50 hover:cursor-not-allowed"
       )
     },
@@ -72,14 +74,11 @@ const HelpMenu = ({
     {
       side: "bottom",
       align: "end",
-      className: "w-[200x] p-2",
-      sideOffset: 16,
-      onOpenAutoFocus: (e) => {
-        e.preventDefault();
-      }
+      className: "w-[200x] pl-2 pt-2 pb-2 pr-0",
+      sideOffset: 16
     },
     title && /* @__PURE__ */ React.createElement("span", { className: "body-large-400 p-2 block" }, title),
-    /* @__PURE__ */ React.createElement(ScrollArea, { style: { height: scrollAreaHeight } }, items?.map((item, i) => /* @__PURE__ */ React.createElement(Item, { key: i, ...item })))
+    /* @__PURE__ */ React.createElement(ScrollArea, { style: { height: scrollAreaHeight }, className: "pr-2" }, items?.map((item, i) => /* @__PURE__ */ React.createElement(Item, { key: i, ...item })))
   ));
 };
 HelpMenu.displayName = "HelpMenu";

package/dist/components/Header/ModulesMenu.js

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button } from '../Button/Button.js';
+import { Popover, PopoverContent, PopoverTrigger } from '../Popover/Popover.js';
+import { ScrollArea } from '../ScrollArea/ScrollArea.js';
 import { LogoLecom } from '../../icons/Brand/LogoLecom.js';
 import '../../icons/Brand/LogoLecomBrand.js';
 import '../../icons/Brand/FooterInfo.js';
@@ -9,8 +11,6 @@ import '../../icons/Features/CadastroFacil.js';
 import '../../icons/Features/Rpa.js';
 import '../../icons/Features/ModoTeste.js';
 import '../../icons/UI/NewUpdate.js';
-import { Popover, PopoverContent, PopoverTrigger } from '../Popover/Popover.js';
-import { ScrollArea } from '../ScrollArea/ScrollArea.js';
 import { cn } from '../../lib/utils.js';
 import { Tooltip, TooltipTrigger, TooltipPortal, TooltipContent } from '../Tooltip/Tooltip.js';
 
@@ -23,7 +23,7 @@ const Icon = ({
   if (!icon) {
     return null;
   }
-  const containerIconStyles = !containerIconBgColor ? { style: { backgroundColor: bgColor, color: textColor } } : {};
+  const containerIconStyles = containerIconBgColor ? {} : { style: { backgroundColor: bgColor, color: textColor } };
   return /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -66,11 +66,13 @@ const Item = ({
     return highlight;
   };
   return /* @__PURE__ */ React.createElement(
-    "div",
+    "button",
     {
+      type: "button",
       onClick: handleClickItem,
+      disabled,
       className: cn(
-        "flex gap-4 items-center p-2 rounded-md transition-all duration-300",
+        "flex gap-4 items-center p-2 rounded-md transition-all duration-300 w-full text-left appearance-none border-none bg-transparent focus:outline-none focus-visible:bg-grey-200/70",
         !disabled && !noHover && "hover:bg-grey-200/70 hover:cursor-pointer",
         (disabled || noHover) && "cursor-default",
         disabled && "opacity-50 cursor-not-allowed"
@@ -116,14 +118,11 @@ const ModulesMenu = ({
     {
       side: "bottom",
       align: "end",
-      className: "w-[424px] p-2 max-md:w-full",
-      sideOffset: 16,
-      onOpenAutoFocus: (e) => {
-        e.preventDefault();
-      }
+      className: "w-[424px] pl-2 pt-2 pb-2 pr-0 max-md:w-full",
+      sideOffset: 16
     },
     title && /* @__PURE__ */ React.createElement("span", { className: "body-large-400 p-2 block" }, title),
-    /* @__PURE__ */ React.createElement(ScrollArea, { style: { height: scrollAreaHeight } }, items?.map((item, i) => /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(ScrollArea, { style: { height: scrollAreaHeight }, className: "pr-2" }, items?.map((item, i) => /* @__PURE__ */ React.createElement(
       Item,
       {
         key: i,

package/dist/components/Header/UserMenu.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button } from '../Button/Button.js';
+import { Combobox } from '../Combobox/Combobox.js';
 import { Popover, PopoverContent, PopoverTrigger } from '../Popover/Popover.js';
 import { ScrollArea } from '../ScrollArea/ScrollArea.js';
-import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../Select/Select.js';
 import { useIsMobile } from '../../hooks/useIsMobile.js';
 import { User } from 'lucide-react';
 import i18n from 'i18next';
@@ -27,17 +27,25 @@ const UserMenu = ({
       return language.render;
     }
     const handleValueChange = (value) => {
-      i18n.changeLanguage(value);
-      language.select?.onChange?.(value);
+      if (value) {
+        i18n.changeLanguage(value);
+        language.select?.onChange?.(value);
+      }
     };
-    return /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-4 p-2 rounded-md hover:bg-grey-200/70 hover:cursor-pointer transition-all duration-300" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center gap-2 body-large-400 [&>svg]:!w-5 [&>svg]:!h-5" }, language.icon, language.label), /* @__PURE__ */ React.createElement(
-      Select,
+    const comboboxOptions = language.select?.options.map((option) => ({
+      label: option.name,
+      value: option.id
+    })) ?? [];
+    return /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-4 p-2 rounded-md transition-all duration-300" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center gap-2 body-large-400 [&>svg]:!w-5 [&>svg]:!h-5" }, language.icon, language.label), /* @__PURE__ */ React.createElement(
+      Combobox,
       {
-        value: language.select?.value,
-        onValueChange: handleValueChange
-      },
-      /* @__PURE__ */ React.createElement(SelectTrigger, { className: "h-7" }, /* @__PURE__ */ React.createElement(SelectValue, null)),
-      /* @__PURE__ */ React.createElement(SelectContent, null, language.select?.options.map((option) => /* @__PURE__ */ React.createElement(SelectItem, { key: option.id, value: option.id }, option.name)))
+        options: comboboxOptions,
+        value: language.select?.value ?? null,
+        onChange: handleValueChange,
+        showSearch: false,
+        size: "small",
+        dynamicHeight: false
+      }
     ));
   };
   const renderLogout = () => {
@@ -48,9 +56,10 @@ const UserMenu = ({
       return logout.render;
     }
     return /* @__PURE__ */ React.createElement(
-      "div",
+      "button",
       {
-        className: "flex items-center gap-2 body-large-400 p-2 rounded-md hover:bg-grey-200/70 hover:cursor-pointer transition-all duration-300 [&>svg]:!w-5 [&>svg]:!h-5",
+        type: "button",
+        className: "flex items-center gap-2 body-large-400 p-2 rounded-md hover:bg-grey-200/70 hover:cursor-pointer transition-all duration-300 [&>svg]:!w-5 [&>svg]:!h-5 w-full text-left appearance-none border-none bg-transparent focus:outline-none focus-visible:bg-grey-200/70",
         onClick: logout.onClick
       },
       logout.icon,
@@ -81,13 +90,10 @@ const UserMenu = ({
     {
       side: "bottom",
       align: "end",
-      className: "w-[274px] p-2",
-      sideOffset: 16,
-      onOpenAutoFocus: (e) => {
-        e.preventDefault();
-      }
+      className: "w-[274px] pl-2 pt-2 pb-2 pr-0",
+      sideOffset: 16
     },
-    /* @__PURE__ */ React.createElement("div", { className: "flex flex-col justify-center" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 p-2" }, /* @__PURE__ */ React.createElement("div", { className: "bg-grey-400/30 rounded-full w-9 h-9 flex items-center justify-center [&>svg]:!w-6 [&>svg]:!h-6 shrink-0" }, /* @__PURE__ */ React.createElement(User, { className: "text-grey-600" })), /* @__PURE__ */ React.createElement("div", { className: "grow" }, /* @__PURE__ */ React.createElement("span", { className: "block body-large-400 break-words" }, user?.name), /* @__PURE__ */ React.createElement("span", { className: "block body-medium-400 break-all" }, user?.email))), /* @__PURE__ */ React.createElement(ScrollArea, { style: { height: scrollAreaHeight } }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col justify-center" }, renderLanguage(), renderLogout())))
+    /* @__PURE__ */ React.createElement("div", { className: "flex flex-col justify-center pr-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 p-2" }, /* @__PURE__ */ React.createElement("div", { className: "bg-grey-400/30 rounded-full w-9 h-9 flex items-center justify-center [&>svg]:!w-6 [&>svg]:!h-6 shrink-0" }, /* @__PURE__ */ React.createElement(User, { className: "text-grey-600" })), /* @__PURE__ */ React.createElement("div", { className: "grow" }, /* @__PURE__ */ React.createElement("span", { className: "block body-large-400 break-words" }, user?.name), /* @__PURE__ */ React.createElement("span", { className: "block body-medium-400 break-all" }, user?.email))), /* @__PURE__ */ React.createElement(ScrollArea, { style: { height: scrollAreaHeight }, className: "pr-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col justify-center" }, renderLanguage(), renderLogout())))
   ));
 };
 UserMenu.displayName = "UserMenu";

package/dist/index.d.ts

@@ -1009,7 +1009,7 @@ declare const RadioGroup: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimi
 declare const RadioGroupItem: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
 declare const ResizablePanelGroup: ({ className, ...props }: React$1.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => React$1.JSX.Element;
-declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement | HTMLElement | HTMLButtonElement | HTMLOListElement | HTMLLIElement | HTMLAnchorElement | HTMLSpanElement | HTMLHeadingElement | HTMLParagraphElement | HTMLLabelElement | HTMLInputElement | HTMLUListElement | HTMLObjectElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLegendElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLStyleElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLVideoElement>, "id" | "onResize"> & {
+declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement | HTMLElement | HTMLButtonElement | HTMLOListElement | HTMLLIElement | HTMLAnchorElement | HTMLSpanElement | HTMLLabelElement | HTMLHeadingElement | HTMLParagraphElement | HTMLInputElement | HTMLUListElement | HTMLObjectElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLegendElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLStyleElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLVideoElement>, "id" | "onResize"> & {
     className?: string;
     collapsedSize?: number | undefined;
     collapsible?: boolean | undefined;

package/dist/plugin/extend.js

@@ -1,79 +1,79 @@
-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',
-    'spin-slow': 'spin 2s linear infinite',
-  },
-};
-
-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',
+    'spin-slow': 'spin 2s linear infinite',
+  },
+};
+
+export { extend };