@l3mpire/ui 2.18.0 → 2.19.0

package/dist/index.mjs

@@ -5211,7 +5211,7 @@ var DEFAULT_OPERATOR_BY_TYPE = {
   text: "contains",
   number: "=",
   date: "is between",
-  enum: "is",
+  enum: "is any of",
   tags: "contains",
   boolean: "is true",
   relation: "is"
@@ -5248,7 +5248,7 @@ function getValueInputType(type, operator) {
     return ["is any of", "is none of"].includes(operator) ? "MultiRelationPicker" : "RelationPicker";
   return null;
 }
-function formatFilterValue(value, dynamicOptions) {
+function formatFilterValue(value, dynamicOptions, full) {
   if (value == null) return void 0;
   if (typeof value === "boolean") return value ? "Yes" : "No";
   if (value instanceof Date) {
@@ -5267,6 +5267,9 @@ function formatFilterValue(value, dynamicOptions) {
       const fmt = (d) => d.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
       return `${fmt(value[0])} \u2013 ${value[1] instanceof Date ? fmt(value[1]) : "\u2026"}`;
     }
+    if (full) {
+      return value.map((v) => resolveDynamic(String(v), dynamicOptions)).join(", ");
+    }
     const resolved = resolveDynamic(String(value[0]), dynamicOptions);
     return resolved;
   }
@@ -5407,7 +5410,7 @@ var FilterBar = React38.forwardRef(
     {
       ref,
       className: cn(
-        "flex items-center justify-between w-full",
+        "flex items-start justify-between w-full",
         className
       ),
       role: "toolbar",
@@ -6460,7 +6463,9 @@ var DateCalendarValueInput = ({
     if (isRange) {
       if (Array.isArray(value) && value.length === 2) {
         const [from, to] = value;
-        return { from, to };
+        if (from instanceof Date) {
+          return { from, to: to instanceof Date ? to : void 0 };
+        }
       }
       return void 0;
     }
@@ -6475,7 +6480,7 @@ var DateCalendarValueInput = ({
       if (range.from && range.to) {
         onChange([range.from, range.to]);
       } else if (range.from) {
-        onChange([range.from, range.from]);
+        onChange([range.from, null]);
       }
     }
   };
@@ -6645,7 +6650,6 @@ var MultiSelectValueInput = ({
         },
         opt.value
       )),
-      dynamicOptions && dynamicOptions.length > 0 && options.length > 0 && /* @__PURE__ */ jsx47(DynamicOptionsDivider, {}),
       options.map((opt) => {
         const isSelected = selected.includes(opt);
         return /* @__PURE__ */ jsxs42(
@@ -7805,6 +7809,27 @@ var AdvancedRow = ({
     ] }),
     condition.operator && !isNoValueOperator(condition.operator) && (() => {
       const inputType = getValueInputType(propertyDef.type, condition.operator);
+      const isInline = inputType === "TextInput" || inputType === "NumberInput";
+      if (isInline) {
+        return /* @__PURE__ */ jsx56(
+          "input",
+          {
+            type: inputType === "NumberInput" ? "number" : "text",
+            value: condition.value ?? "",
+            onChange: (e) => handleValueChange(
+              inputType === "NumberInput" ? e.target.value === "" ? null : Number(e.target.value) : e.target.value
+            ),
+            placeholder: "Enter value...",
+            className: cn(
+              "flex-1 min-w-[80px] px-base py-sm",
+              "bg-[var(--color-background)] border border-[var(--color-input)] rounded-base",
+              "text-sm font-regular leading-sm text-[var(--color-foreground)]",
+              "placeholder:text-[var(--color-muted-foreground)]",
+              "focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)] focus:ring-offset-0"
+            )
+          }
+        );
+      }
       const dateWide = inputType === "DatePicker" || inputType === "DateRange";
       return /* @__PURE__ */ jsxs50(PopoverPrimitive11.Root, { open: valueOpen, onOpenChange: setValueOpen, children: [
         /* @__PURE__ */ jsx56(PopoverPrimitive11.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs50(
@@ -7820,7 +7845,8 @@ var AdvancedRow = ({
                     "text-sm font-regular leading-sm whitespace-nowrap truncate text-left",
                     hasValue ? "text-[var(--color-foreground)]" : "text-[var(--color-muted-foreground)]"
                   ),
-                  children: hasValue ? displayValue : "Enter a value"
+                  title: hasValue ? displayValue : void 0,
+                  children: hasValue ? displayValue : "Select a value"
                 }
               ),
               /* @__PURE__ */ jsxs50("span", { className: "flex items-center gap-xs shrink-0", children: [
@@ -8247,6 +8273,7 @@ var DraftRow = ({
 // src/components/ui/filter/summary-chip.tsx
 import * as React52 from "react";
 import * as PopoverPrimitive13 from "@radix-ui/react-popover";
+import * as TooltipPrimitive3 from "@radix-ui/react-tooltip";
 import { Icon as Icon36, faFilterOutline as faFilterOutline6, faPlusOutline as faPlusOutline4, faChevronDownOutline as faChevronDownOutline4, faXmarkOutline as faXmarkOutline5 } from "@l3mpire/icons";
 import { jsx as jsx59, jsxs as jsxs53 } from "react/jsx-runtime";
 var ghostBtn2 = [
@@ -8265,7 +8292,8 @@ var SummaryChip = ({
   className,
   open: openProp,
   onOpenChange,
-  collisionBoundary
+  collisionBoundary,
+  tooltipContent
 }) => {
   const [uncontrolledOpen, setUncontrolledOpen] = React52.useState(false);
   const isControlled = openProp !== void 0;
@@ -8406,24 +8434,37 @@ var SummaryChip = ({
       node.id
     );
   };
-  return /* @__PURE__ */ jsxs53(PopoverPrimitive13.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx59(PopoverPrimitive13.Trigger, { asChild: true, children: children ?? /* @__PURE__ */ jsxs53(
-      "button",
+  const trigger = children ?? /* @__PURE__ */ jsxs53(
+    "button",
+    {
+      type: "button",
+      className: cn(
+        "inline-flex items-center gap-sm px-base py-sm",
+        "min-h-[32px] max-h-[32px]",
+        "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-md shadow-sm",
+        "cursor-pointer transition-colors",
+        "hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx59(Icon36, { icon: faFilterOutline6, size: "sm", className: "shrink-0 text-[var(--color-foreground)]" }),
+        /* @__PURE__ */ jsx59("span", { className: "text-sm font-semibold leading-sm whitespace-nowrap text-[var(--color-foreground)]", children: "Filters" }),
+        count > 0 && /* @__PURE__ */ jsx59("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ jsx59("span", { className: "text-[10px] font-semibold leading-2xs text-filter-chip-badge-text", children: count }) })
+      ]
+    }
+  );
+  const hasTooltip = tooltipContent && !open;
+  return /* @__PURE__ */ jsx59(TooltipPrimitive3.Provider, { delayDuration: 300, children: /* @__PURE__ */ jsx59(TooltipPrimitive3.Root, { open: hasTooltip ? void 0 : false, children: /* @__PURE__ */ jsxs53(PopoverPrimitive13.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx59(TooltipPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ jsx59(PopoverPrimitive13.Trigger, { asChild: true, children: trigger }) }),
+    hasTooltip && /* @__PURE__ */ jsx59(TooltipPrimitive3.Portal, { children: /* @__PURE__ */ jsxs53(
+      TooltipPrimitive3.Content,
       {
-        type: "button",
-        className: cn(
-          "inline-flex items-center gap-sm px-base py-sm",
-          "min-h-[32px] max-h-[32px]",
-          "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-md shadow-sm",
-          "cursor-pointer transition-colors",
-          "hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]",
-          className
-        ),
+        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: [
-          /* @__PURE__ */ jsx59(Icon36, { icon: faFilterOutline6, size: "sm", className: "shrink-0 text-[var(--color-foreground)]" }),
-          /* @__PURE__ */ jsx59("span", { className: "text-sm font-semibold leading-sm whitespace-nowrap text-[var(--color-foreground)]", children: "Filters" }),
-          count > 0 && /* @__PURE__ */ jsx59("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ jsx59("span", { className: "text-[10px] font-semibold leading-2xs text-filter-chip-badge-text", children: count }) })
+          tooltipContent,
+          /* @__PURE__ */ jsx59(TooltipPrimitive3.Arrow, { className: "fill-tooltip-default-bg" })
         ]
       }
     ) }),
@@ -8492,7 +8533,7 @@ var SummaryChip = ({
         ]
       }
     ) })
-  ] });
+  ] }) }) });
 };
 SummaryChip.displayName = "SummaryChip";
 var DraftRow2 = ({ properties, onSelect, open: openProp, onOpenChange }) => {
@@ -8654,7 +8695,7 @@ var FilterSystem = ({
   const advancedFilterCount = filterState.advancedFilters.length;
   const showAdvancedChip = hasAdvanced || advancedOpen;
   return /* @__PURE__ */ jsxs54(FilterBar, { ref: containerRef, className, children: [
-    /* @__PURE__ */ jsxs54(FilterBarLeft, { className: "flex-nowrap flex-1 min-w-0 overflow-x-auto scrollbar-none outline-none [&>*]:shrink-0", children: [
+    /* @__PURE__ */ jsxs54(FilterBarLeft, { className: "flex-wrap flex-1 min-w-0", children: [
       children,
       sortFields && filterState.sort && /* @__PURE__ */ jsx60(
         SortButton,
@@ -8683,12 +8724,12 @@ var FilterSystem = ({
           open: summaryOpen,
           onOpenChange: setSummaryOpen,
           collisionBoundary,
+          tooltipContent: totalCount > 0 ? buildFilterTooltip([...filterState.basicFilters, ...filterState.advancedFilters], properties) : void 0,
           children: /* @__PURE__ */ jsx60(
             FilterBarButton,
             {
               iconOnly: isIconOnly,
-              count: totalCount > 0 ? totalCount : void 0,
-              title: buildFilterSummary(filterState.basicFilters, filterState.advancedFilters.length, properties)
+              count: totalCount > 0 ? totalCount : void 0
             }
           )
         }
@@ -8765,23 +8806,46 @@ var FilterSystem = ({
         }
       )
     ] }),
-    actions && /* @__PURE__ */ jsx60(FilterBarRight, { className: "shrink-0 -ml-2xl pl-2xl relative z-10 bg-[linear-gradient(to_right,transparent_0px,var(--filter-bar-bg,var(--color-background,#fff))_24px)]", children: actions })
+    actions && /* @__PURE__ */ jsx60(FilterBarRight, { className: "shrink-0", children: actions })
   ] });
 };
 FilterSystem.displayName = "FilterSystem";
-function buildFilterSummary(filters, advancedCount, properties) {
-  if (filters.length === 0 && advancedCount === 0) return void 0;
-  const lines = [];
-  for (const f of filters) {
-    const prop = properties.find((p) => p.id === f.propertyId);
-    if (!prop) continue;
-    const val = formatFilterValue(f.value, prop.dynamicOptions);
-    lines.push(val ? `${prop.label} ${f.operator} ${val}` : `${prop.label} ${f.operator ?? ""}`);
-  }
-  if (advancedCount > 0) {
-    lines.push(`+ ${advancedCount} advanced filter${advancedCount > 1 ? "s" : ""}`);
-  }
-  return lines.join("\n");
+function buildFilterTooltip(nodes, properties) {
+  const renderNodes = (items, depth) => {
+    const result = [];
+    for (let i = 0; i < items.length; i++) {
+      const node = items[i];
+      const connector = i > 0 ? (node.logicOperator ?? "and").toUpperCase() : null;
+      if ("children" in node && node.type === "group") {
+        if (connector) {
+          result.push(
+            /* @__PURE__ */ jsx60("div", { style: { paddingLeft: depth * 8 }, children: /* @__PURE__ */ jsx60("span", { className: "opacity-50 text-xs", children: connector }) }, `${node.id}-conn`)
+          );
+        }
+        result.push(...renderNodes(node.children, depth + 1));
+      } else {
+        const f = node;
+        const prop = properties.find((p) => p.id === f.propertyId);
+        if (!prop) continue;
+        const val = formatFilterValue(f.value, prop.dynamicOptions, true);
+        result.push(
+          /* @__PURE__ */ jsxs54("div", { style: { paddingLeft: depth * 8 }, children: [
+            connector && /* @__PURE__ */ jsxs54("span", { className: "opacity-50 text-xs", children: [
+              connector,
+              " "
+            ] }),
+            /* @__PURE__ */ jsx60("span", { className: "font-semibold", children: prop.label }),
+            " ",
+            /* @__PURE__ */ jsx60("span", { className: "opacity-60", children: f.operator }),
+            " ",
+            val && /* @__PURE__ */ jsx60("span", { children: val })
+          ] }, f.id)
+        );
+      }
+    }
+    return result;
+  };
+  return /* @__PURE__ */ jsx60("div", { className: "flex flex-col gap-2xs", children: renderNodes(nodes, 0) });
 }
 export {
   AdvancedChip,