lecom-ui 5.4.29 → 5.4.31

package/dist/components/MultiSelect/MultiSelect.js

@@ -57,7 +57,8 @@ const MultiSelect = React.forwardRef(
     groupedOptions,
     classNameContent,
     size = "medium",
-    disabled = false
+    disabled = false,
+    readOnly = false
   }, ref) => {
     const { t } = useTranslation();
     const [selectedValues, setSelectedValues] = React.useState(value);
@@ -169,11 +170,13 @@ const MultiSelect = React.forwardRef(
       }
     };
     const toggleOption = (option) => {
+      if (readOnly) return;
       const newSelectedValues = selectedValues.includes(option) ? selectedValues.filter((value2) => value2 !== option) : [...selectedValues, option];
       setSelectedValues(newSelectedValues);
       onValueChange(newSelectedValues);
     };
     const handleClear = () => {
+      if (readOnly) return;
       setSelectedValues([]);
       onValueChange([]);
     };
@@ -181,6 +184,7 @@ const MultiSelect = React.forwardRef(
       setIsPopoverOpen((prev) => !prev);
     };
     const toggleAll = () => {
+      if (readOnly) return;
       if (treeOptions && treeOptions.length) {
         const gather = (acc, nodes) => {
           for (const n of nodes) {
@@ -377,6 +381,7 @@ const MultiSelect = React.forwardRef(
       }
     };
     const toggleTreeNode = (node) => {
+      if (readOnly) return;
       if (treeSelectionStrategy === "all") {
         const isSelected = selectedValues.includes(node.value);
         const next = isSelected ? selectedValues.filter((v) => v !== node.value) : [...selectedValues, node.value];
@@ -460,7 +465,8 @@ const MultiSelect = React.forwardRef(
         {
           className: cn(
             "flex items-center gap-2 px-2 py-1 cursor-pointer rounded-sm text-grey-800 hover:bg-grey-100",
-            (fully || isSelectedLeaf) && "bg-blue-50"
+            (fully || isSelectedLeaf) && "bg-blue-50",
+            readOnly && "cursor-default hover:bg-transparent"
           ),
           style: { paddingLeft: depth * 14 + 8 }
         },
@@ -473,7 +479,9 @@ const MultiSelect = React.forwardRef(
             ),
             onClick: (e) => {
               e.stopPropagation();
-              toggleTreeNode(n);
+              if (!readOnly) {
+                toggleTreeNode(n);
+              }
             }
           },
           fully && /* @__PURE__ */ React.createElement(Check, { className: "!h-3 !w-3 !text-white", strokeWidth: 3 }),
@@ -486,7 +494,9 @@ const MultiSelect = React.forwardRef(
             className: "flex-1 truncate cursor-pointer overflow-hidden",
             onClick: (e) => {
               e.stopPropagation();
-              toggleTreeNode(n);
+              if (!readOnly) {
+                toggleTreeNode(n);
+              }
             },
             title: n.label
           },
@@ -521,9 +531,11 @@ const MultiSelect = React.forwardRef(
               [&_svg]:pointer-events-auto`,
             maxCount === void 0 && TRIGGER_HEIGHT_CLASSES[size],
             disabled && "opacity-50 cursor-not-allowed pointer-events-none",
+            readOnly && !disabled && "opacity-50 hover:border-grey-400",
             className
           ),
           "aria-expanded": isPopoverOpen,
+          "aria-readonly": readOnly,
           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) => {
@@ -555,7 +567,7 @@ const MultiSelect = React.forwardRef(
               },
               label
             )),
-            !disabled && /* @__PURE__ */ React.createElement(
+            !disabled && !readOnly && /* @__PURE__ */ React.createElement(
               X,
               {
                 className: "h-4 w-4 cursor-pointer flex-shrink-0",
@@ -573,7 +585,7 @@ const MultiSelect = React.forwardRef(
             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(
+        ))), /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between" }, !disabled && !readOnly && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
           X,
           {
             className: "h-4 w-4 cursor-pointer text-grey-800",
@@ -621,7 +633,8 @@ const MultiSelect = React.forwardRef(
               placeholder: treeSearchPlaceholder || t("multiSelect.search"),
               onKeyDown: handleInputKeyDown,
               value: query,
-              onValueChange: (v) => setQuery(v)
+              onValueChange: (v) => setQuery(v),
+              disabled: readOnly
             }
           ),
           /* @__PURE__ */ React.createElement(CommandList, null, /* @__PURE__ */ React.createElement(CommandGroup, null, (effectiveOptions.length === 0 || query && filteredOptions.length === 0) && /* @__PURE__ */ React.createElement(
@@ -637,8 +650,11 @@ const MultiSelect = React.forwardRef(
             CommandItem,
             {
               key: "all",
-              onSelect: toggleAll,
-              className: "cursor-pointer"
+              onSelect: readOnly ? void 0 : toggleAll,
+              className: cn(
+                "cursor-pointer",
+                readOnly && "cursor-default pointer-events-none hover:bg-transparent"
+              )
             },
             /* @__PURE__ */ React.createElement(
               "div",
@@ -688,8 +704,11 @@ const MultiSelect = React.forwardRef(
                   CommandItem,
                   {
                     key: option.value,
-                    onSelect: () => toggleOption(option.value),
-                    className: "cursor-pointer"
+                    onSelect: readOnly ? void 0 : () => toggleOption(option.value),
+                    className: cn(
+                      "cursor-pointer",
+                      readOnly && "cursor-default pointer-events-none hover:bg-transparent"
+                    )
                   },
                   /* @__PURE__ */ React.createElement(
                     "div",
@@ -727,8 +746,11 @@ const MultiSelect = React.forwardRef(
               CommandItem,
               {
                 key: option.value,
-                onSelect: () => toggleOption(option.value),
-                className: "cursor-pointer"
+                onSelect: readOnly ? void 0 : () => toggleOption(option.value),
+                className: cn(
+                  "cursor-pointer",
+                  readOnly && "cursor-default pointer-events-none hover:bg-transparent"
+                )
               },
               /* @__PURE__ */ React.createElement(
                 "div",
@@ -782,6 +804,7 @@ const MultiSelect = React.forwardRef(
             value: treeQuery,
             onChange: (e) => setTreeQuery(e.target.value),
             placeholder: treeSearchPlaceholder || t("multiSelect.search"),
+            disabled: readOnly,
             className: cn(
               "w-full pl-9 pr-3 border-0 focus:outline-none focus:ring-0 bg-transparent placeholder:text-muted-foreground",
               getFontVariant(size),
@@ -791,8 +814,11 @@ const MultiSelect = React.forwardRef(
         ))), /* @__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(
           "div",
           {
-            className: "flex items-center gap-2 px-2 py-1 cursor-pointer rounded-sm hover:bg-accent",
-            onClick: toggleAll
+            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
           },
           /* @__PURE__ */ React.createElement(
             "div",

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/i18n/locales/en_us.js

@@ -9,7 +9,8 @@ const language = {
     },
     pagination: {
       show: "Show:",
-      selectedProcess: "Item(s) selected"
+      selectedProcess: "Item(s) selected",
+      selectedItemSingular: "item selected"
     },
     upload: {
       label: "Drag and drop the file here or click to select it.",

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.",

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.",

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;
 };
 
@@ -862,6 +863,7 @@ interface MultiSelectProps extends React$1.ButtonHTMLAttributes<HTMLButtonElemen
     };
     classNameContent?: string;
     size?: MultiSelectSize;
+    readOnly?: boolean;
 }
 interface MultiSelectTreeOption {
     label: string;
@@ -992,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 | 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 | HTMLHeadingElement | HTMLParagraphElement | HTMLLabelElement | 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 | HTMLUListElement | HTMLVideoElement>, "id" | "onResize"> & {
     className?: string;
     collapsedSize?: number | undefined;
     collapsible?: boolean | undefined;
@@ -1087,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> {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lecom-ui",
-  "version": "5.4.29",
+  "version": "5.4.31",
   "license": "MIT",
   "type": "module",
   "module": "dist/index.js",