lecom-ui 5.4.32 → 5.4.34

package/dist/components/Pagination/Pagination.js

@@ -145,7 +145,8 @@ const PaginationPerPage = ({
   className,
   onChangePerPage,
   perPage,
-  totalRowsSelected = 0
+  totalRowsSelected = 0,
+  maxSelection
 }) => {
   const { t } = useTranslation();
   const perPageOptions = [
@@ -165,6 +166,12 @@ const PaginationPerPage = ({
   if (!onChangePerPage) {
     return null;
   }
+  const getSelectedText = () => {
+    if (maxSelection === 1 && totalRowsSelected === 1) {
+      return `${totalRowsSelected} ${t("pagination.selectedItemSingular")}`;
+    }
+    return `${totalRowsSelected} ${t("pagination.selectedProcess")}`;
+  };
   return /* @__PURE__ */ React.createElement("div", { className: cn("flex items-center gap-4", className) }, /* @__PURE__ */ React.createElement(DropdownMenu, null, /* @__PURE__ */ React.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(Button, { size: "small", color: "grey", variant: "outlined" }, /* @__PURE__ */ React.createElement("span", { className: "max-md:hidden" }, t("pagination.show")), " ", perPage, /* @__PURE__ */ React.createElement(ChevronDown, { size: 20 }))), /* @__PURE__ */ React.createElement(DropdownMenuContent, { side: "top", align: "center" }, perPageOptions.map((option) => /* @__PURE__ */ React.createElement(
     DropdownMenuItem,
     {
@@ -174,7 +181,7 @@ const PaginationPerPage = ({
       }
     },
     option.value.toString()
-  )))), totalRowsSelected > 0 && /* @__PURE__ */ React.createElement(Typography, { variant: "heading-xxsmall-600", textColor: "text-grey-800" }, totalRowsSelected, " ", t("pagination.selectedProcess")));
+  )))), totalRowsSelected > 0 && /* @__PURE__ */ React.createElement(Typography, { variant: "heading-xxsmall-600", textColor: "text-grey-800" }, getSelectedText()));
 };
 PaginationPerPage.displayName = "PaginationPerPage";
 const Pagination = ({
@@ -185,7 +192,8 @@ const Pagination = ({
   onChangePerPage,
   className,
   activeColor,
-  showPerPageSelector = true
+  showPerPageSelector = true,
+  maxSelection
 }) => {
   const { t } = useTranslation();
   const mapPaginationItem = (item) => {
@@ -215,6 +223,12 @@ const Pagination = ({
     };
     return React.createElement(mappedComponents[item.type], componentProps);
   };
+  const getSelectedText = () => {
+    if (maxSelection === 1 && totalRowsSelected === 1) {
+      return `${totalRowsSelected} ${t("pagination.selectedItemSingular")}`;
+    }
+    return `${totalRowsSelected} ${t("pagination.selectedProcess")}`;
+  };
   return /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -225,10 +239,11 @@ const Pagination = ({
       {
         onChangePerPage,
         perPage,
-        totalRowsSelected
+        totalRowsSelected,
+        maxSelection
       }
     ),
-    !showPerPageSelector && totalRowsSelected > 0 && /* @__PURE__ */ React.createElement(Typography, { variant: "heading-xxsmall-600", textColor: "text-grey-800" }, totalRowsSelected, " ", t("pagination.selectedProcess")),
+    !showPerPageSelector && totalRowsSelected > 0 && /* @__PURE__ */ React.createElement(Typography, { variant: "heading-xxsmall-600", textColor: "text-grey-800" }, getSelectedText()),
     /* @__PURE__ */ React.createElement("nav", { role: "navigation", "aria-label": "pagination" }, /* @__PURE__ */ React.createElement(PaginationContent, null, itemsPage.map((item) => /* @__PURE__ */ React.createElement(PaginationItem, { key: item.id }, mapPaginationItem(item)))))
   );
 };

package/dist/components/ScrollArea/ScrollArea.js

@@ -27,7 +27,7 @@ const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...pr
     ),
     ...props
   },
-  /* @__PURE__ */ React.createElement(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
+  /* @__PURE__ */ React.createElement(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border bg-grey-400 hover:bg-gray-500" })
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 

package/dist/components/TagInput/TagInput.js

@@ -5,7 +5,7 @@ import { Tag } from '../Tag/Tag.js';
 import { textareaVariants } from '../Textarea/Textarea.js';
 import { Typography } from '../Typography/Typography.js';
 
-function TagItem({ item, onRemove, readOnly }) {
+function TagItem({ item, onRemove, readOnly, defaultColor }) {
   const handleRemove = React.useCallback(
     (e) => {
       e.stopPropagation();
@@ -13,18 +13,35 @@ 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,
+  const tagColor = item.color || defaultColor;
+  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: tagColor,
+      className: "max-w-[15.625rem] h-6 !px-2 !py-0.5"
+    },
+    /* @__PURE__ */ React.createElement(
+      Typography,
+      {
+        variant: "body-small-400",
+        className: "truncate p-0 [color:inherit]"
+      },
+      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));
+function HiddenCountTag({ count, color }) {
+  return /* @__PURE__ */ React.createElement(Tag, { color, "data-tag": "true" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body-small-400", className: "[color:inherit]" }, "+", count));
 }
 function calculateEstimatedWidths(value) {
   const AVG_CHAR_WIDTH = 8;
@@ -69,7 +86,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 +101,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 +147,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(() => {
@@ -156,6 +181,7 @@ function TagInput(props) {
     className = "",
     variant = "default",
     radius = "default",
+    color = "blue",
     ...restProps
   } = props;
   const ref = React.useRef(null);
@@ -192,17 +218,18 @@ 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,
       {
         key: item.value,
         item,
         onRemove: handleRemove,
-        readOnly
+        readOnly,
+        defaultColor: color
       }
     )),
-    actualHiddenCount > 0 && /* @__PURE__ */ React.createElement(HiddenCountTag, { count: actualHiddenCount })
+    actualHiddenCount > 0 && /* @__PURE__ */ React.createElement(HiddenCountTag, { count: actualHiddenCount, color })
   );
 }
 

package/dist/i18n/locales/en_us.js

@@ -9,7 +9,8 @@ const language = {
     },
     pagination: {
       show: "Show:",
-      selectedProcess: "selected process"
+      selectedProcess: "Item(s) selected",
+      selectedItemSingular: "item selected"
     },
     upload: {
       label: "Drag and drop the file here or click to select it.",
@@ -20,7 +21,8 @@ const language = {
       search: "Type to search",
       empty: "No results found",
       selectAll: "Select all",
-      placeholder: "Select"
+      placeholder: "Select",
+      create: "Create"
     }
   }
 };

package/dist/i18n/locales/es_es.js

@@ -9,7 +9,8 @@ const language = {
     },
     pagination: {
       show: "Mostrar:",
-      selectedProcess: "Item(s) seleccionado(s)"
+      selectedProcess: "Item(s) seleccionado(s)",
+      selectedItemSingular: "item seleccionado"
     },
     upload: {
       label: "Arrastre y suelte el archivo aqu\xED o haga clic para seleccionarlo.",
@@ -20,7 +21,8 @@ const language = {
       search: "Tipo a buscar",
       empty: "No se han encontrado resultados",
       selectAll: "Seleccionar todo",
-      placeholder: "Seleccionar"
+      placeholder: "Seleccionar",
+      create: "Crear"
     }
   }
 };

package/dist/i18n/locales/pt_br.js

@@ -9,7 +9,8 @@ const language = {
     },
     pagination: {
       show: "Mostrar:",
-      selectedProcess: "Item(s) selecionado(s)"
+      selectedProcess: "Item(s) selecionado(s)",
+      selectedItemSingular: "item selecionado"
     },
     upload: {
       label: "Arraste e solte o arquivo aqui ou clique para selecion\xE1-lo.",
@@ -20,7 +21,8 @@ const language = {
       search: "Digite para pesquisar",
       empty: "Nenhum resultado encontrado",
       selectAll: "Selecionar tudo",
-      placeholder: "Selecione"
+      placeholder: "Selecione",
+      create: "Criar"
     }
   }
 };

package/dist/index.d.ts

@@ -306,6 +306,7 @@ interface PaginationProps {
     className?: string;
     activeColor?: BgColor$1;
     showPerPageSelector?: boolean;
+    maxSelection?: number;
 }
 declare const PaginationContent: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React$1.RefAttributes<HTMLUListElement>>;
 declare const PaginationItem: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React$1.RefAttributes<HTMLLIElement>>;
@@ -334,7 +335,7 @@ declare const PaginationIndex: {
     displayName: string;
 };
 declare const Pagination: {
-    ({ currentPage, itemsPage, perPage, totalRowsSelected, onChangePerPage, className, activeColor, showPerPageSelector, }: PaginationProps): React$1.JSX.Element;
+    ({ currentPage, itemsPage, perPage, totalRowsSelected, onChangePerPage, className, activeColor, showPerPageSelector, maxSelection, }: PaginationProps): React$1.JSX.Element;
     displayName: string;
 };
 
@@ -384,6 +385,7 @@ interface Column<TData, TValue> {
     headerClassName?: string;
     headerStyle?: React.CSSProperties;
     cellClassName?: string;
+    showHeaderTooltip?: boolean;
     customHeaderRender?: ({ table, column, }: ColumnSort<TData, TValue>) => React.ReactNode;
     render?: (({ value, row }: ColumnRender<TData, TValue>) => React.ReactNode) | React.ReactNode;
     onSort?: ({ table, column }: ColumnSort<TData, TValue>) => 'asc' | 'desc' | null | void;
@@ -726,6 +728,7 @@ interface SearchInputProps {
     customStyles: CustomStyles$2;
     placeholder?: string;
     isActiveButton?: boolean;
+    value?: string;
     onChangeValue?: (value: string) => void;
     onClickButton?: () => void;
 }
@@ -784,8 +787,8 @@ interface HeaderProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<
 
 declare const inputVariants: (props?: ({
     variant?: "default" | "filled" | "borderless" | null | undefined;
-    size?: "default" | "small" | "large" | null | undefined;
-    radius?: "default" | "small" | "large" | "full" | 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;
@@ -819,7 +822,7 @@ interface SideBarProps {
 }
 interface LayoutProps extends React$1.HTMLAttributes<HTMLDivElement> {
     header: HeaderProps;
-    sideBar: SideBarProps;
+    sideBar?: SideBarProps;
 }
 declare const Layout: {
     ({ children, header, sideBar }: LayoutProps): React$1.JSX.Element;
@@ -860,6 +863,7 @@ interface MultiSelectProps extends React$1.ButtonHTMLAttributes<HTMLButtonElemen
     };
     classNameContent?: string;
     size?: MultiSelectSize;
+    readOnly?: boolean;
 }
 interface MultiSelectTreeOption {
     label: string;
@@ -990,7 +994,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 | HTMLUListElement | HTMLInputElement | 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<HTMLButtonElement | HTMLElement | HTMLDivElement | HTMLHeadingElement | HTMLParagraphElement | HTMLSpanElement | HTMLOListElement | HTMLLIElement | HTMLAnchorElement | HTMLInputElement | HTMLObjectElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLabelElement | 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 | HTMLUListElement | HTMLVideoElement>, "id" | "onResize"> & {
     className?: string;
     collapsedSize?: number | undefined;
     collapsible?: boolean | undefined;
@@ -1085,7 +1089,7 @@ declare const TooltipTrigger: React$1.ForwardRefExoticComponent<TooltipPrimitive
 declare const TooltipArrow: React$1.ForwardRefExoticComponent<TooltipPrimitive.TooltipArrowProps & React$1.RefAttributes<SVGSVGElement>>;
 declare const TooltipPortal: React$1.FC<TooltipPrimitive.TooltipPortalProps>;
 declare const tooltipContentVariants: (props?: ({
-    color?: "black" | "white" | null | undefined;
+    color?: "white" | "black" | null | undefined;
     arrow?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface TooltipContentProps extends React$1.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>, VariantProps<typeof tooltipContentVariants> {
@@ -1157,8 +1161,8 @@ declare const TabsContent: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.
 
 declare const textareaVariants: (props?: ({
     variant?: "default" | "filled" | "borderless" | null | undefined;
-    size?: "default" | "small" | "large" | null | undefined;
-    radius?: "default" | "small" | "large" | "full" | 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> {
@@ -1228,14 +1232,17 @@ type ComboboxProps = {
     rounded?: ComboboxRounded;
     showSearch?: boolean;
     size?: ComboboxSize;
+    allowCreate?: boolean;
+    onCreateOption?: (inputValue: string) => void;
 };
-declare function Combobox({ options, value, onChange, placeholder, disabled, notFoundContent, status, searchTerm, triggerClassName, contentClassName, itemsClassName, rounded, showSearch, size, }: ComboboxProps): React$1.JSX.Element;
+declare function Combobox({ options, value, onChange, placeholder, disabled, notFoundContent, status, searchTerm, triggerClassName, contentClassName, itemsClassName, rounded, showSearch, size, allowCreate, onCreateOption, }: ComboboxProps): React$1.JSX.Element;
 
 interface TagItem {
     label: string;
     value: string;
+    color?: TagProps['color'];
 }
-interface TagInputProps extends React$1.HTMLAttributes<HTMLDivElement> {
+interface TagInputProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'color'> {
     value: TagItem[];
     onRemove: (value: string) => void;
     placeholder?: string;
@@ -1245,6 +1252,7 @@ interface TagInputProps extends React$1.HTMLAttributes<HTMLDivElement> {
     variant?: 'default' | 'filled' | 'borderless';
     radius?: 'default' | 'full';
     maxDisplayCount?: number;
+    color?: TagProps['color'];
 }
 declare function TagInput(props: TagInputProps): React$1.JSX.Element;
 
@@ -1317,8 +1325,9 @@ declare const SheetDescription: React$1.ForwardRefExoticComponent<Omit<DialogPri
 interface CustomTagItem {
     id: string;
     label: string;
+    color?: TagProps['color'];
 }
-interface CustomTagInputProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+interface CustomTagInputProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'onChange' | 'color'> {
     value: CustomTagItem[];
     onChange: (items: CustomTagItem[]) => void;
     placeholder?: string;
@@ -1332,6 +1341,7 @@ interface CustomTagInputProps extends Omit<React$1.HTMLAttributes<HTMLDivElement
     onTagEdit?: (item: CustomTagItem) => void;
     allowDuplicates?: boolean;
     enableReorder?: boolean;
+    color?: TagProps['color'];
 }
 declare function CustomTagInput(props: CustomTagInputProps): React$1.JSX.Element;