lecom-ui 5.4.30 → 5.4.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/components/MultiSelect/MultiSelect.js +41 -15
  2. package/dist/index.d.ts +3 -2
  3. package/package.json +1 -1
package/dist/components/MultiSelect/MultiSelect.js CHANGED
@@ -57,7 +57,8 @@ const MultiSelect = React.forwardRef(
57
57
  groupedOptions,
58
58
  classNameContent,
59
59
  size = "medium",
60
- disabled = false
60
+ disabled = false,
61
+ readOnly = false
61
62
  }, ref) => {
62
63
  const { t } = useTranslation();
63
64
  const [selectedValues, setSelectedValues] = React.useState(value);
@@ -169,11 +170,13 @@ const MultiSelect = React.forwardRef(
169
170
  }
170
171
  };
171
172
  const toggleOption = (option) => {
173
+ if (readOnly) return;
172
174
  const newSelectedValues = selectedValues.includes(option) ? selectedValues.filter((value2) => value2 !== option) : [...selectedValues, option];
173
175
  setSelectedValues(newSelectedValues);
174
176
  onValueChange(newSelectedValues);
175
177
  };
176
178
  const handleClear = () => {
179
+ if (readOnly) return;
177
180
  setSelectedValues([]);
178
181
  onValueChange([]);
179
182
  };
@@ -181,6 +184,7 @@ const MultiSelect = React.forwardRef(
181
184
  setIsPopoverOpen((prev) => !prev);
182
185
  };
183
186
  const toggleAll = () => {
187
+ if (readOnly) return;
184
188
  if (treeOptions && treeOptions.length) {
185
189
  const gather = (acc, nodes) => {
186
190
  for (const n of nodes) {
@@ -377,6 +381,7 @@ const MultiSelect = React.forwardRef(
377
381
  }
378
382
  };
379
383
  const toggleTreeNode = (node) => {
384
+ if (readOnly) return;
380
385
  if (treeSelectionStrategy === "all") {
381
386
  const isSelected = selectedValues.includes(node.value);
382
387
  const next = isSelected ? selectedValues.filter((v) => v !== node.value) : [...selectedValues, node.value];
@@ -460,7 +465,8 @@ const MultiSelect = React.forwardRef(
460
465
  {
461
466
  className: cn(
462
467
  "flex items-center gap-2 px-2 py-1 cursor-pointer rounded-sm text-grey-800 hover:bg-grey-100",
463
- (fully || isSelectedLeaf) && "bg-blue-50"
468
+ (fully || isSelectedLeaf) && "bg-blue-50",
469
+ readOnly && "cursor-default hover:bg-transparent"
464
470
  ),
465
471
  style: { paddingLeft: depth * 14 + 8 }
466
472
  },
@@ -473,7 +479,9 @@ const MultiSelect = React.forwardRef(
473
479
  ),
474
480
  onClick: (e) => {
475
481
  e.stopPropagation();
476
- toggleTreeNode(n);
482
+ if (!readOnly) {
483
+ toggleTreeNode(n);
484
+ }
477
485
  }
478
486
  },
479
487
  fully && /* @__PURE__ */ React.createElement(Check, { className: "!h-3 !w-3 !text-white", strokeWidth: 3 }),
@@ -486,7 +494,9 @@ const MultiSelect = React.forwardRef(
486
494
  className: "flex-1 truncate cursor-pointer overflow-hidden",
487
495
  onClick: (e) => {
488
496
  e.stopPropagation();
489
- toggleTreeNode(n);
497
+ if (!readOnly) {
498
+ toggleTreeNode(n);
499
+ }
490
500
  },
491
501
  title: n.label
492
502
  },
@@ -521,9 +531,11 @@ const MultiSelect = React.forwardRef(
521
531
  [&_svg]:pointer-events-auto`,
522
532
  maxCount === void 0 && TRIGGER_HEIGHT_CLASSES[size],
523
533
  disabled && "opacity-50 cursor-not-allowed pointer-events-none",
534
+ readOnly && !disabled && "opacity-50 hover:border-grey-400",
524
535
  className
525
536
  ),
526
537
  "aria-expanded": isPopoverOpen,
538
+ "aria-readonly": readOnly,
527
539
  disabled
528
540
  },
529
541
  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(
555
567
  },
556
568
  label
557
569
  )),
558
- !disabled && /* @__PURE__ */ React.createElement(
570
+ !disabled && !readOnly && /* @__PURE__ */ React.createElement(
559
571
  X,
560
572
  {
561
573
  className: "h-4 w-4 cursor-pointer flex-shrink-0",
@@ -573,7 +585,7 @@ const MultiSelect = React.forwardRef(
573
585
  className: "text-blue-600"
574
586
  },
575
587
  `+ ${selectedValues.length - dynamicMaxCount}`
576
- ))), /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between" }, !disabled && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
588
+ ))), /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between" }, !disabled && !readOnly && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
577
589
  X,
578
590
  {
579
591
  className: "h-4 w-4 cursor-pointer text-grey-800",
@@ -621,7 +633,8 @@ const MultiSelect = React.forwardRef(
621
633
  placeholder: treeSearchPlaceholder || t("multiSelect.search"),
622
634
  onKeyDown: handleInputKeyDown,
623
635
  value: query,
624
- onValueChange: (v) => setQuery(v)
636
+ onValueChange: (v) => setQuery(v),
637
+ disabled: readOnly
625
638
  }
626
639
  ),
627
640
  /* @__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(
637
650
  CommandItem,
638
651
  {
639
652
  key: "all",
640
- onSelect: toggleAll,
641
- className: "cursor-pointer"
653
+ onSelect: readOnly ? void 0 : toggleAll,
654
+ className: cn(
655
+ "cursor-pointer",
656
+ readOnly && "cursor-default pointer-events-none hover:bg-transparent"
657
+ )
642
658
  },
643
659
  /* @__PURE__ */ React.createElement(
644
660
  "div",
@@ -688,8 +704,11 @@ const MultiSelect = React.forwardRef(
688
704
  CommandItem,
689
705
  {
690
706
  key: option.value,
691
- onSelect: () => toggleOption(option.value),
692
- className: "cursor-pointer"
707
+ onSelect: readOnly ? void 0 : () => toggleOption(option.value),
708
+ className: cn(
709
+ "cursor-pointer",
710
+ readOnly && "cursor-default pointer-events-none hover:bg-transparent"
711
+ )
693
712
  },
694
713
  /* @__PURE__ */ React.createElement(
695
714
  "div",
@@ -727,8 +746,11 @@ const MultiSelect = React.forwardRef(
727
746
  CommandItem,
728
747
  {
729
748
  key: option.value,
730
- onSelect: () => toggleOption(option.value),
731
- className: "cursor-pointer"
749
+ onSelect: readOnly ? void 0 : () => toggleOption(option.value),
750
+ className: cn(
751
+ "cursor-pointer",
752
+ readOnly && "cursor-default pointer-events-none hover:bg-transparent"
753
+ )
732
754
  },
733
755
  /* @__PURE__ */ React.createElement(
734
756
  "div",
@@ -782,6 +804,7 @@ const MultiSelect = React.forwardRef(
782
804
  value: treeQuery,
783
805
  onChange: (e) => setTreeQuery(e.target.value),
784
806
  placeholder: treeSearchPlaceholder || t("multiSelect.search"),
807
+ disabled: readOnly,
785
808
  className: cn(
786
809
  "w-full pl-9 pr-3 border-0 focus:outline-none focus:ring-0 bg-transparent placeholder:text-muted-foreground",
787
810
  getFontVariant(size),
@@ -791,8 +814,11 @@ const MultiSelect = React.forwardRef(
791
814
  ))), /* @__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(
792
815
  "div",
793
816
  {
794
- className: "flex items-center gap-2 px-2 py-1 cursor-pointer rounded-sm hover:bg-accent",
795
- onClick: toggleAll
817
+ className: cn(
818
+ "flex items-center gap-2 px-2 py-1 cursor-pointer rounded-sm hover:bg-accent",
819
+ readOnly && "cursor-default hover:bg-transparent pointer-events-none"
820
+ ),
821
+ onClick: readOnly ? void 0 : toggleAll
796
822
  },
797
823
  /* @__PURE__ */ React.createElement(
798
824
  "div",
package/dist/index.d.ts CHANGED
@@ -863,6 +863,7 @@ interface MultiSelectProps extends React$1.ButtonHTMLAttributes<HTMLButtonElemen
863
863
  };
864
864
  classNameContent?: string;
865
865
  size?: MultiSelectSize;
866
+ readOnly?: boolean;
866
867
  }
867
868
  interface MultiSelectTreeOption {
868
869
  label: string;
@@ -993,7 +994,7 @@ declare const RadioGroup: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimi
993
994
  declare const RadioGroupItem: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
994
995
 
995
996
  declare const ResizablePanelGroup: ({ className, ...props }: React$1.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => React$1.JSX.Element;
996
- 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"> & {
997
+ 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"> & {
997
998
  className?: string;
998
999
  collapsedSize?: number | undefined;
999
1000
  collapsible?: boolean | undefined;
@@ -1088,7 +1089,7 @@ declare const TooltipTrigger: React$1.ForwardRefExoticComponent<TooltipPrimitive
1088
1089
  declare const TooltipArrow: React$1.ForwardRefExoticComponent<TooltipPrimitive.TooltipArrowProps & React$1.RefAttributes<SVGSVGElement>>;
1089
1090
  declare const TooltipPortal: React$1.FC<TooltipPrimitive.TooltipPortalProps>;
1090
1091
  declare const tooltipContentVariants: (props?: ({
1091
- color?: "black" | "white" | null | undefined;
1092
+ color?: "white" | "black" | null | undefined;
1092
1093
  arrow?: boolean | null | undefined;
1093
1094
  } & class_variance_authority_types.ClassProp) | undefined) => string;
1094
1095
  interface TooltipContentProps extends React$1.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>, VariantProps<typeof tooltipContentVariants> {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lecom-ui",
3
- "version": "5.4.30",
3
+ "version": "5.4.31",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "module": "dist/index.js",