@l3mpire/ui 2.18.0 → 2.19.0

package/dist/index.d.mts

@@ -1013,6 +1013,7 @@ interface SummaryChipProps {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     collisionBoundary?: Element | null;
+    tooltipContent?: React.ReactNode;
 }
 declare const SummaryChip: React.FC<SummaryChipProps>;
 

package/dist/index.d.ts

@@ -1013,6 +1013,7 @@ interface SummaryChipProps {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     collisionBoundary?: Element | null;
+    tooltipContent?: React.ReactNode;
 }
 declare const SummaryChip: React.FC<SummaryChipProps>;
 

package/dist/index.js

@@ -5323,7 +5323,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"
@@ -5360,7 +5360,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) {
@@ -5379,6 +5379,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;
   }
@@ -5519,7 +5522,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",
@@ -6563,7 +6566,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;
     }
@@ -6578,7 +6583,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]);
       }
     }
   };
@@ -6748,7 +6753,6 @@ var MultiSelectValueInput = ({
         },
         opt.value
       )),
-      dynamicOptions && dynamicOptions.length > 0 && options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(DynamicOptionsDivider, {}),
       options.map((opt) => {
         const isSelected = selected.includes(opt);
         return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
@@ -7895,6 +7899,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__ */ (0, import_jsx_runtime56.jsx)(
+          "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__ */ (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)(
@@ -7910,7 +7935,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__ */ (0, import_jsx_runtime56.jsxs)("span", { className: "flex items-center gap-xs shrink-0", children: [
@@ -8337,6 +8363,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 import_icons37 = require("@l3mpire/icons");
 var import_jsx_runtime59 = require("react/jsx-runtime");
 var ghostBtn2 = [
@@ -8355,7 +8382,8 @@ var SummaryChip = ({
   className,
   open: openProp,
   onOpenChange,
-  collisionBoundary
+  collisionBoundary,
+  tooltipContent
 }) => {
   const [uncontrolledOpen, setUncontrolledOpen] = React52.useState(false);
   const isControlled = openProp !== void 0;
@@ -8496,24 +8524,37 @@ var SummaryChip = ({
       node.id
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(PopoverPrimitive13.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(PopoverPrimitive13.Trigger, { asChild: true, children: children ?? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
-      "button",
+  const trigger = children ?? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+    "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__ */ (0, import_jsx_runtime59.jsx)(import_icons37.Icon, { icon: import_icons37.faFilterOutline, size: "sm", className: "shrink-0 text-[var(--color-foreground)]" }),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "text-sm font-semibold leading-sm whitespace-nowrap text-[var(--color-foreground)]", children: "Filters" }),
+        count > 0 && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "text-[10px] font-semibold leading-2xs text-filter-chip-badge-text", children: count }) })
+      ]
+    }
+  );
+  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,
       {
-        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__ */ (0, import_jsx_runtime59.jsx)(import_icons37.Icon, { icon: import_icons37.faFilterOutline, size: "sm", className: "shrink-0 text-[var(--color-foreground)]" }),
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "text-sm font-semibold leading-sm whitespace-nowrap text-[var(--color-foreground)]", children: "Filters" }),
-          count > 0 && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "text-[10px] font-semibold leading-2xs text-filter-chip-badge-text", children: count }) })
+          tooltipContent,
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TooltipPrimitive3.Arrow, { className: "fill-tooltip-default-bg" })
         ]
       }
     ) }),
@@ -8582,7 +8623,7 @@ var SummaryChip = ({
         ]
       }
     ) })
-  ] });
+  ] }) }) });
 };
 SummaryChip.displayName = "SummaryChip";
 var DraftRow2 = ({ properties, onSelect, open: openProp, onOpenChange }) => {
@@ -8744,7 +8785,7 @@ var FilterSystem = ({
   const advancedFilterCount = filterState.advancedFilters.length;
   const showAdvancedChip = hasAdvanced || advancedOpen;
   return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(FilterBar, { ref: containerRef, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(FilterBarLeft, { className: "flex-nowrap flex-1 min-w-0 overflow-x-auto scrollbar-none outline-none [&>*]:shrink-0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(FilterBarLeft, { className: "flex-wrap flex-1 min-w-0", children: [
       children,
       sortFields && filterState.sort && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
         SortButton,
@@ -8773,12 +8814,12 @@ var FilterSystem = ({
           open: summaryOpen,
           onOpenChange: setSummaryOpen,
           collisionBoundary,
+          tooltipContent: totalCount > 0 ? buildFilterTooltip([...filterState.basicFilters, ...filterState.advancedFilters], properties) : void 0,
           children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
             FilterBarButton,
             {
               iconOnly: isIconOnly,
-              count: totalCount > 0 ? totalCount : void 0,
-              title: buildFilterSummary(filterState.basicFilters, filterState.advancedFilters.length, properties)
+              count: totalCount > 0 ? totalCount : void 0
             }
           )
         }
@@ -8855,23 +8896,46 @@ var FilterSystem = ({
         }
       )
     ] }),
-    actions && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(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__ */ (0, import_jsx_runtime60.jsx)(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__ */ (0, import_jsx_runtime60.jsx)("div", { style: { paddingLeft: depth * 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("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__ */ (0, import_jsx_runtime60.jsxs)("div", { style: { paddingLeft: depth * 8 }, children: [
+            connector && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("span", { className: "opacity-50 text-xs", children: [
+              connector,
+              " "
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "font-semibold", children: prop.label }),
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "opacity-60", children: f.operator }),
+            " ",
+            val && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { children: val })
+          ] }, f.id)
+        );
+      }
+    }
+    return result;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "flex flex-col gap-2xs", children: renderNodes(nodes, 0) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {