lecom-ui 5.4.2 → 5.4.4

package/dist/components/MultiSelect/MultiSelect.js

@@ -56,7 +56,8 @@ const MultiSelect = React.forwardRef(
     allowTypoDistance = 0,
     groupedOptions,
     classNameContent,
-    size = "medium"
+    size = "medium",
+    disabled = false
   }, ref) => {
     const { t } = useTranslation();
     const [selectedValues, setSelectedValues] = React.useState(value);
@@ -331,33 +332,63 @@ const MultiSelect = React.forwardRef(
       [treeOptions]
     );
     const collectAllValues = (node) => {
-      const self = treeSelectionStrategy === "all" ? [node.value] : [];
-      if (!node.children || node.children.length === 0) {
-        return treeSelectionStrategy === "all" ? [node.value] : [node.value];
+      if (treeSelectionStrategy === "leaf") {
+        if (!node.children || node.children.length === 0) {
+          return [node.value];
+        }
+        return node.children.flatMap((c) => collectAllValues(c));
+      } else {
+        if (!node.children || node.children.length === 0) {
+          return [node.value];
+        }
+        return [node.value, ...node.children.flatMap((c) => collectAllValues(c))];
       }
-      return [...self, ...node.children.flatMap((c) => collectAllValues(c))];
     };
     const isNodeFullySelected = (node) => {
-      const values = collectAllValues(node);
-      return values.every((v) => selectedValues.includes(v));
+      if (treeSelectionStrategy === "all") {
+        return selectedValues.includes(node.value);
+      } else {
+        const values = collectAllValues(node);
+        return values.every((v) => selectedValues.includes(v));
+      }
     };
     const isNodePartiallySelected = (node) => {
-      const values = collectAllValues(node);
-      const some = values.some((v) => selectedValues.includes(v));
-      const all = values.every((v) => selectedValues.includes(v));
-      return some && !all;
+      if (treeSelectionStrategy === "all") {
+        if (selectedValues.includes(node.value)) return false;
+        if (!node.children || node.children.length === 0) return false;
+        const hasSelectedDescendant = (n) => {
+          if (selectedValues.includes(n.value)) return true;
+          if (n.children) {
+            return n.children.some(hasSelectedDescendant);
+          }
+          return false;
+        };
+        return node.children.some(hasSelectedDescendant);
+      } else {
+        const values = collectAllValues(node);
+        const some = values.some((v) => selectedValues.includes(v));
+        const all = values.every((v) => selectedValues.includes(v));
+        return some && !all;
+      }
     };
     const toggleTreeNode = (node) => {
-      const nodeValues = collectAllValues(node);
-      const allSelected = nodeValues.every((v) => selectedValues.includes(v));
-      let next;
-      if (allSelected) {
-        next = selectedValues.filter((v) => !nodeValues.includes(v));
+      if (treeSelectionStrategy === "all") {
+        const isSelected = selectedValues.includes(node.value);
+        const next = isSelected ? selectedValues.filter((v) => v !== node.value) : [...selectedValues, node.value];
+        setSelectedValues(next);
+        onValueChange(next);
       } else {
-        next = Array.from(/* @__PURE__ */ new Set([...selectedValues, ...nodeValues]));
+        const nodeValues = collectAllValues(node);
+        const allSelected = nodeValues.every((v) => selectedValues.includes(v));
+        let next;
+        if (allSelected) {
+          next = selectedValues.filter((v) => !nodeValues.includes(v));
+        } else {
+          next = Array.from(/* @__PURE__ */ new Set([...selectedValues, ...nodeValues]));
+        }
+        setSelectedValues(next);
+        onValueChange(next);
       }
-      setSelectedValues(next);
-      onValueChange(next);
     };
     const highlight = React.useCallback(
       (label, q) => {
@@ -424,7 +455,6 @@ 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",
-            getFontVariant(size),
             (fully || isSelectedLeaf) && "bg-blue-50"
           ),
           style: { paddingLeft: depth * 14 + 8 }
@@ -447,6 +477,7 @@ const MultiSelect = React.forwardRef(
         /* @__PURE__ */ React.createElement(
           Typography,
           {
+            variant: getFontVariant(size),
             className: "flex-1 truncate cursor-pointer overflow-hidden",
             onClick: (e) => {
               e.stopPropagation();
@@ -484,9 +515,11 @@ const MultiSelect = React.forwardRef(
               transition-all duration-300 outline-none
               [&_svg]:pointer-events-auto`,
             maxCount === void 0 && TRIGGER_HEIGHT_CLASSES[size],
+            disabled && "opacity-50 cursor-not-allowed pointer-events-none",
             className
           ),
-          "aria-expanded": isPopoverOpen
+          "aria-expanded": isPopoverOpen,
+          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) => {
           const selectedOption = options.find((option) => option.value === value2);
@@ -507,7 +540,7 @@ const MultiSelect = React.forwardRef(
               className: "truncate"
             },
             label
-          )), /* @__PURE__ */ React.createElement(
+          )), !disabled && /* @__PURE__ */ React.createElement(
             X,
             {
               className: "h-4 w-4 cursor-pointer flex-shrink-0",
@@ -517,7 +550,7 @@ const MultiSelect = React.forwardRef(
               }
             }
           ));
-        }), selectedValues.length > dynamicMaxCount && /* @__PURE__ */ React.createElement(Tag, { color: "blue", className: "focus:ring-0" }, /* @__PURE__ */ React.createElement(Typography, { variant: getFontVariant(size), className: "text-blue-600" }, `+ ${selectedValues.length - dynamicMaxCount}`))), /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React.createElement(
+        }), selectedValues.length > dynamicMaxCount && /* @__PURE__ */ React.createElement(Tag, { color: "blue", className: "focus:ring-0" }, /* @__PURE__ */ React.createElement(Typography, { variant: getFontVariant(size), 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(
           X,
           {
             className: "h-4 w-4 cursor-pointer text-grey-800",
@@ -532,7 +565,7 @@ const MultiSelect = React.forwardRef(
             orientation: "vertical",
             className: "flex min-h-4 mx-1 h-full"
           }
-        ), isPopoverOpen ? /* @__PURE__ */ React.createElement(ChevronUp, { className: "h-4 w-4 cursor-pointer text-grey-800" }) : /* @__PURE__ */ React.createElement(ChevronDown, { className: "h-4 w-4 cursor-pointer text-grey-800" }))) : /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between w-full mx-auto" }, /* @__PURE__ */ React.createElement(
+        )), isPopoverOpen ? /* @__PURE__ */ React.createElement(ChevronUp, { className: "h-4 w-4 cursor-pointer text-grey-800" }) : /* @__PURE__ */ React.createElement(ChevronDown, { className: "h-4 w-4 cursor-pointer text-grey-800" }))) : /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between w-full mx-auto" }, /* @__PURE__ */ React.createElement(
           Typography,
           {
             variant: getFontVariant(size),

package/dist/components/Typography/Typography.js

@@ -45,7 +45,7 @@ const Typography = ({
   return /* @__PURE__ */ React.createElement(
     Comp,
     {
-      className: cn(typographyVariants({ variant, className }), textColor, ""),
+      className: cn(typographyVariants({ variant }), className, textColor),
       ...props
     },
     children

package/dist/index.d.ts

@@ -990,7 +990,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 | HTMLInputElement | HTMLLabelElement | 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"> & {
+declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement | HTMLElement | HTMLButtonElement | HTMLOListElement | HTMLLIElement | HTMLAnchorElement | HTMLSpanElement | HTMLHeadingElement | HTMLParagraphElement | HTMLInputElement | HTMLLabelElement | 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/package.json

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