@l3mpire/ui 2.19.1 → 2.20.0

package/dist/index.d.mts

@@ -282,6 +282,7 @@ interface SelectProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>
     errorMessage?: string;
     placeholder?: string;
     value?: string;
+    /** @deprecated Use `tags` instead for multi-select display. */
     multiCount?: number;
     tags?: string[];
     onTagRemove?: (tag: string) => void;

package/dist/index.d.ts

@@ -282,6 +282,7 @@ interface SelectProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>
     errorMessage?: string;
     placeholder?: string;
     value?: string;
+    /** @deprecated Use `tags` instead for multi-select display. */
     multiCount?: number;
     tags?: string[];
     onTagRemove?: (tag: string) => void;

package/dist/index.js

@@ -2783,11 +2783,6 @@ var Select = React20.forwardRef(
                       children: hasValue ? value : placeholder
                     }
                   ),
-                  !hasTags && multiCount != null && multiCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "shrink-0 text-xs leading-normal text-select-text-multi", children: [
-                    "+",
-                    multiCount,
-                    " others"
-                  ] }),
                   /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                     import_icons14.Icon,
                     {
@@ -7662,6 +7657,7 @@ var import_icons36 = require("@l3mpire/icons");
 // src/components/ui/filter/advanced-row.tsx
 var React49 = __toESM(require("react"));
 var PopoverPrimitive11 = __toESM(require("@radix-ui/react-popover"));
+var TooltipPrimitive3 = __toESM(require("@radix-ui/react-tooltip"));
 var import_icons34 = require("@l3mpire/icons");
 
 // src/components/ui/filter/filter-node-actions.tsx
@@ -7809,22 +7805,20 @@ var AdvancedRow = ({
   const badgeCount = getBadgeCount(condition.value);
   const hasValue = displayValue != null;
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex items-center gap-base w-full min-w-0", children: [
-    connector === "Where" ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)]", children: "Where" }) }) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-      "button",
-      {
-        type: "button",
-        disabled: true,
-        title: "Coming soon",
-        className: cn(
-          "shrink-0 flex items-center justify-center",
-          "min-w-[64px] min-h-[32px] max-h-[32px] px-base py-sm",
-          "bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] from-[10%] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)]",
-          "border border-[var(--color-btn-outlined-neutral-border-default)] rounded-base shadow-sm",
-          "text-xs font-semibold leading-xs text-[var(--color-foreground)] opacity-60 cursor-not-allowed"
-        ),
-        children: connector
-      }
-    ),
+    connector === "Where" ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)]", children: "Where" }) }) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TooltipPrimitive3.Provider, { delayDuration: 200, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(TooltipPrimitive3.Root, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TooltipPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)] cursor-default", children: connector }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TooltipPrimitive3.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+        TooltipPrimitive3.Content,
+        {
+          sideOffset: 4,
+          className: "z-50 px-base py-sm rounded-md shadow-lg bg-tooltip-default-bg text-tooltip-default-text text-sm font-regular leading-sm data-[state=delayed-open]:animate-[tooltip-in_150ms_ease-out] data-[state=closed]:animate-[tooltip-out_100ms_ease-in]",
+          children: [
+            '"Or" operator coming soon',
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TooltipPrimitive3.Arrow, { className: "fill-tooltip-default-bg" })
+          ]
+        }
+      ) })
+    ] }) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(PopoverPrimitive11.Root, { open: propertyOpen, onOpenChange: setPropertyOpen, children: [
       /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(PopoverPrimitive11.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("button", { type: "button", className: cn(selectBtnStyle, "min-w-0"), children: [
         /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_icons34.Icon, { icon: propertyDef.icon, size: "sm", className: "shrink-0 text-[var(--color-muted-foreground)]" }),
@@ -7918,14 +7912,19 @@ var AdvancedRow = ({
         );
       }
       const dateWide = inputType === "DatePicker" || inputType === "DateRange";
+      const isMulti = inputType === "MultiSelect" || inputType === "MultiRelationPicker";
+      const multiTags = isMulti && Array.isArray(condition.value) ? condition.value.map((v) => {
+        const dyn = propertyDef.dynamicOptions?.find((o) => o.value === v);
+        return dyn ? dyn.label : v;
+      }) : null;
       return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(PopoverPrimitive11.Root, { open: valueOpen, onOpenChange: setValueOpen, children: [
         /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(PopoverPrimitive11.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
           "button",
           {
             type: "button",
-            className: cn(selectBtnStyle, "flex-1 min-w-[80px] justify-between"),
+            className: cn(selectBtnStyle, "flex-1 min-w-[80px] justify-between overflow-hidden"),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+              multiTags && multiTags.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ValueTagRow, { tags: multiTags }) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
                 "span",
                 {
                   className: cn(
@@ -7936,20 +7935,14 @@ var AdvancedRow = ({
                   children: hasValue ? displayValue : "Select a value"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("span", { className: "flex items-center gap-xs shrink-0", children: [
-                badgeCount != null && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)]", children: [
-                  "+",
-                  badgeCount - 1
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-                  import_icons34.Icon,
-                  {
-                    icon: import_icons34.faChevronDownOutline,
-                    size: "xs",
-                    className: "text-[var(--color-foreground)]"
-                  }
-                )
-              ] })
+              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                import_icons34.Icon,
+                {
+                  icon: import_icons34.faChevronDownOutline,
+                  size: "xs",
+                  className: "shrink-0 text-[var(--color-foreground)]"
+                }
+              )
             ]
           }
         ) }),
@@ -7995,9 +7988,85 @@ var AdvancedRow = ({
   ] });
 };
 AdvancedRow.displayName = "AdvancedRow";
+var tagChip = cn(
+  "inline-flex items-center shrink-0 px-sm rounded-base",
+  "bg-tag-neutral-bg text-tag-neutral-text",
+  "text-xs font-semibold leading-xs whitespace-nowrap",
+  "h-5"
+);
+function ValueTagRow({ tags }) {
+  const containerRef = React49.useRef(null);
+  const measureRef = React49.useRef(null);
+  const [visibleCount, setVisibleCount] = React49.useState(tags.length);
+  React49.useLayoutEffect(() => {
+    const container = containerRef.current;
+    const measureRow = measureRef.current;
+    if (!container || !measureRow) return;
+    const measure = () => {
+      const containerWidth = container.getBoundingClientRect().width;
+      const chips = Array.from(measureRow.children);
+      const overflowBadgeWidth = 32;
+      let usedWidth = 0;
+      let count = 0;
+      for (const chip of chips) {
+        const chipWidth = chip.getBoundingClientRect().width;
+        const gap = count > 0 ? 4 : 0;
+        const projected = usedWidth + gap + chipWidth;
+        const remaining = tags.length - (count + 1);
+        const total = projected + (remaining > 0 ? 4 + overflowBadgeWidth : 0);
+        if (total <= containerWidth) {
+          usedWidth = projected;
+          count++;
+        } else {
+          break;
+        }
+      }
+      setVisibleCount(Math.max(1, count));
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [tags]);
+  const overflowCount = tags.length - visibleCount;
+  const overflowTags = tags.slice(visibleCount);
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex flex-1 items-center gap-xs min-w-0 overflow-hidden relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+      "div",
+      {
+        ref: measureRef,
+        "aria-hidden": true,
+        className: "absolute flex items-center gap-xs pointer-events-none",
+        style: { visibility: "hidden", whiteSpace: "nowrap", top: 0, left: 0 },
+        children: tags.map((t) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: tagChip, children: t }, t))
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { ref: containerRef, className: "flex flex-1 items-center gap-xs overflow-hidden", children: [
+      tags.slice(0, visibleCount).map((t) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: tagChip, children: t }, t)),
+      overflowCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TooltipPrimitive3.Provider, { delayDuration: 200, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(TooltipPrimitive3.Root, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TooltipPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("span", { className: cn(tagChip, "cursor-default bg-filter-chip-badge-bg text-filter-chip-badge-text"), children: [
+          "+",
+          overflowCount
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TooltipPrimitive3.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+          TooltipPrimitive3.Content,
+          {
+            sideOffset: 4,
+            className: "z-50 px-base py-sm rounded-md shadow-lg bg-tooltip-default-bg text-tooltip-default-text text-xs font-regular leading-xs flex flex-col gap-xs data-[state=delayed-open]:animate-[tooltip-in_150ms_ease-out] data-[state=closed]:animate-[tooltip-out_100ms_ease-in]",
+            children: [
+              overflowTags.map((t) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { children: t }, t)),
+              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TooltipPrimitive3.Arrow, { className: "fill-tooltip-default-bg" })
+            ]
+          }
+        ) })
+      ] }) })
+    ] })
+  ] });
+}
 
 // src/components/ui/filter/advanced-group.tsx
 var React50 = __toESM(require("react"));
+var TooltipPrimitive4 = __toESM(require("@radix-ui/react-tooltip"));
 var import_icons35 = require("@l3mpire/icons");
 var import_jsx_runtime57 = require("react/jsx-runtime");
 var AdvancedGroup = ({
@@ -8012,22 +8081,20 @@ var AdvancedGroup = ({
 }) => {
   const [addOpen, setAddOpen] = React50.useState(false);
   return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex items-start gap-base w-full min-w-0", children: [
-    connector === "Where" ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "shrink-0 w-[64px] flex items-center justify-end pt-base", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)]", children: "Where" }) }) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "shrink-0 w-[64px] flex items-center justify-end pt-base", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-      "button",
-      {
-        type: "button",
-        disabled: true,
-        title: "Coming soon",
-        className: cn(
-          "flex items-center justify-center",
-          "min-w-[64px] min-h-[32px] max-h-[32px] px-base py-sm",
-          "bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] from-[10%] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)]",
-          "border border-[var(--color-btn-outlined-neutral-border-default)] rounded-base shadow-sm",
-          "text-xs font-semibold leading-xs text-[var(--color-foreground)] opacity-60 cursor-not-allowed"
-        ),
-        children: connector
-      }
-    ) }),
+    connector === "Where" ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "shrink-0 w-[64px] flex items-center justify-end pt-base", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)]", children: "Where" }) }) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "shrink-0 w-[64px] flex items-center justify-end pt-base", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TooltipPrimitive4.Provider, { delayDuration: 200, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(TooltipPrimitive4.Root, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TooltipPrimitive4.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)] cursor-default", children: connector }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TooltipPrimitive4.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+        TooltipPrimitive4.Content,
+        {
+          sideOffset: 4,
+          className: "z-50 px-base py-sm rounded-md shadow-lg bg-tooltip-default-bg text-tooltip-default-text text-sm font-regular leading-sm data-[state=delayed-open]:animate-[tooltip-in_150ms_ease-out] data-[state=closed]:animate-[tooltip-out_100ms_ease-in]",
+          children: [
+            '"Or" operator coming soon',
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TooltipPrimitive4.Arrow, { className: "fill-tooltip-default-bg" })
+          ]
+        }
+      ) })
+    ] }) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex-1 min-w-0 flex flex-col gap-base p-base border border-[var(--color-border)] rounded-md bg-[var(--color-secondary,var(--color-accent))]", children: [
       children,
       onAddFilter && properties && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
@@ -8357,7 +8424,7 @@ var DraftRow = ({
 // src/components/ui/filter/summary-chip.tsx
 var React52 = __toESM(require("react"));
 var PopoverPrimitive13 = __toESM(require("@radix-ui/react-popover"));
-var TooltipPrimitive3 = __toESM(require("@radix-ui/react-tooltip"));
+var TooltipPrimitive5 = __toESM(require("@radix-ui/react-tooltip"));
 var import_icons37 = require("@l3mpire/icons");
 var import_jsx_runtime59 = require("react/jsx-runtime");
 var ghostBtn2 = [
@@ -8539,16 +8606,16 @@ var SummaryChip = ({
     }
   );
   const hasTooltip = tooltipContent && !open;
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TooltipPrimitive3.Provider, { delayDuration: 300, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TooltipPrimitive3.Root, { open: hasTooltip ? void 0 : false, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(PopoverPrimitive13.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TooltipPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(PopoverPrimitive13.Trigger, { asChild: true, children: trigger }) }),
-    hasTooltip && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TooltipPrimitive3.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
-      TooltipPrimitive3.Content,
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TooltipPrimitive5.Provider, { delayDuration: 300, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TooltipPrimitive5.Root, { open: hasTooltip ? void 0 : false, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(PopoverPrimitive13.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TooltipPrimitive5.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(PopoverPrimitive13.Trigger, { asChild: true, children: trigger }) }),
+    hasTooltip && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TooltipPrimitive5.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+      TooltipPrimitive5.Content,
       {
         sideOffset: 4,
         className: "z-50 px-base py-sm rounded-md shadow-lg bg-tooltip-default-bg text-tooltip-default-text text-sm font-regular leading-sm max-w-[320px] data-[state=delayed-open]:animate-[tooltip-in_150ms_ease-out] data-[state=closed]:animate-[tooltip-out_100ms_ease-in]",
         children: [
           tooltipContent,
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TooltipPrimitive3.Arrow, { className: "fill-tooltip-default-bg" })
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TooltipPrimitive5.Arrow, { className: "fill-tooltip-default-bg" })
         ]
       }
     ) }),