@l3mpire/ui 2.17.0 → 2.18.1

package/dist/index.d.mts

@@ -899,6 +899,8 @@ declare const PropertySelector: React.FC<PropertySelectorProps>;
 
 interface KebabMenuProps {
     onConvertToAdvanced?: () => void;
+    /** When true, label reads "Add to advanced filters" instead of "Convert to advanced". */
+    hasAdvancedFilters?: boolean;
     onDelete?: () => void;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
@@ -931,6 +933,7 @@ interface InteractiveFilterChipProps {
     onPropertyChange?: (property: PropertyDefinition) => void;
     onDelete: () => void;
     onConvertToAdvanced?: () => void;
+    hasAdvancedFilters?: boolean;
     className?: string;
 }
 declare const InteractiveFilterChip: React.FC<InteractiveFilterChipProps>;
@@ -952,6 +955,12 @@ interface FilterSystemProps {
     mode?: FilterBarMode;
     /** Width breakpoint (px) for switching to minimal mode. Default: 600. */
     breakpoint?: number;
+    /**
+     * Constrain popovers to stay within the container bounds. Use this when
+     * FilterSystem lives inside an iframe or a fixed-width panel where content
+     * must not overflow.
+     */
+    bounded?: boolean;
     children?: React.ReactNode;
     actions?: React.ReactNode;
     className?: string;
@@ -989,6 +998,7 @@ interface AdvancedPopoverProps {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     children?: React.ReactNode;
+    collisionBoundary?: Element | null;
 }
 declare const AdvancedPopover: React.FC<AdvancedPopoverProps>;
 
@@ -1002,6 +1012,7 @@ interface SummaryChipProps {
     className?: string;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
+    collisionBoundary?: Element | null;
 }
 declare const SummaryChip: React.FC<SummaryChipProps>;
 

package/dist/index.d.ts

@@ -899,6 +899,8 @@ declare const PropertySelector: React.FC<PropertySelectorProps>;
 
 interface KebabMenuProps {
     onConvertToAdvanced?: () => void;
+    /** When true, label reads "Add to advanced filters" instead of "Convert to advanced". */
+    hasAdvancedFilters?: boolean;
     onDelete?: () => void;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
@@ -931,6 +933,7 @@ interface InteractiveFilterChipProps {
     onPropertyChange?: (property: PropertyDefinition) => void;
     onDelete: () => void;
     onConvertToAdvanced?: () => void;
+    hasAdvancedFilters?: boolean;
     className?: string;
 }
 declare const InteractiveFilterChip: React.FC<InteractiveFilterChipProps>;
@@ -952,6 +955,12 @@ interface FilterSystemProps {
     mode?: FilterBarMode;
     /** Width breakpoint (px) for switching to minimal mode. Default: 600. */
     breakpoint?: number;
+    /**
+     * Constrain popovers to stay within the container bounds. Use this when
+     * FilterSystem lives inside an iframe or a fixed-width panel where content
+     * must not overflow.
+     */
+    bounded?: boolean;
     children?: React.ReactNode;
     actions?: React.ReactNode;
     className?: string;
@@ -989,6 +998,7 @@ interface AdvancedPopoverProps {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     children?: React.ReactNode;
+    collisionBoundary?: Element | null;
 }
 declare const AdvancedPopover: React.FC<AdvancedPopoverProps>;
 
@@ -1002,6 +1012,7 @@ interface SummaryChipProps {
     className?: string;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
+    collisionBoundary?: Element | null;
 }
 declare const SummaryChip: React.FC<SummaryChipProps>;
 

package/dist/index.js

@@ -7183,6 +7183,7 @@ var import_icons30 = require("@l3mpire/icons");
 var import_jsx_runtime51 = require("react/jsx-runtime");
 var KebabMenu = ({
   onConvertToAdvanced,
+  hasAdvancedFilters = false,
   onDelete,
   open,
   onOpenChange,
@@ -7221,7 +7222,7 @@ var KebabMenu = ({
                   className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)]", children: "Convert to advanced" })
+              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)]", children: hasAdvancedFilters ? "Add to advanced filters" : "Convert to advanced" })
             ]
           }
         ),
@@ -7408,6 +7409,7 @@ var InteractiveFilterChip = ({
   onPropertyChange,
   onDelete,
   onConvertToAdvanced,
+  hasAdvancedFilters = false,
   className
 }) => {
   const [operatorOpen, setOperatorOpen] = React46.useState(false);
@@ -7563,6 +7565,7 @@ var InteractiveFilterChip = ({
             open: kebabOpen,
             onOpenChange: setKebabOpen,
             onConvertToAdvanced,
+            hasAdvancedFilters,
             onDelete,
             children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
               FilterChipSegment,
@@ -7892,6 +7895,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)(
@@ -7907,7 +7931,7 @@ 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"
+                  children: hasValue ? displayValue : "Select a value"
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("span", { className: "flex items-center gap-xs shrink-0", children: [
@@ -8061,7 +8085,8 @@ var AdvancedPopover = ({
   onFiltersChange,
   open,
   onOpenChange,
-  children
+  children,
+  collisionBoundary
 }) => {
   const [addSelectorOpen, setAddSelectorOpen] = React51.useState(false);
   const [draftPickerOpen, setDraftPickerOpen] = React51.useState(false);
@@ -8209,6 +8234,7 @@ var AdvancedPopover = ({
         sideOffset: 4,
         align: "start",
         collisionPadding: 16,
+        collisionBoundary: collisionBoundary ?? void 0,
         onOpenAutoFocus: (e) => e.preventDefault(),
         className: cn(
           "z-50 flex flex-col",
@@ -8216,7 +8242,7 @@ var AdvancedPopover = ({
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
           "data-[side=bottom]:slide-in-from-top-2",
-          "w-[min(640px,calc(100vw-32px))] min-w-[360px]"
+          collisionBoundary ? "w-[min(640px,var(--radix-popover-content-available-width))] min-w-0" : "w-[min(640px,calc(100vw-32px))] min-w-[360px]"
         ),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "flex flex-col gap-base p-base", children: filters.length > 0 ? filters.map((node, i) => renderNode(node, i)) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
@@ -8349,7 +8375,8 @@ var SummaryChip = ({
   children,
   className,
   open: openProp,
-  onOpenChange
+  onOpenChange,
+  collisionBoundary
 }) => {
   const [uncontrolledOpen, setUncontrolledOpen] = React52.useState(false);
   const isControlled = openProp !== void 0;
@@ -8517,6 +8544,7 @@ var SummaryChip = ({
         sideOffset: 4,
         align: "start",
         collisionPadding: 16,
+        collisionBoundary: collisionBoundary ?? void 0,
         onOpenAutoFocus: (e) => e.preventDefault(),
         className: cn(
           "z-50 flex flex-col overflow-clip",
@@ -8524,7 +8552,7 @@ var SummaryChip = ({
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
           "data-[side=bottom]:slide-in-from-top-2",
-          "w-[min(640px,calc(100vw-32px))]"
+          collisionBoundary ? "w-[min(640px,var(--radix-popover-content-available-width))]" : "w-[min(640px,calc(100vw-32px))]"
         ),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "flex flex-col gap-base p-base", children: filters.length > 0 ? filters.map((node, i) => renderNode(node, i)) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
@@ -8638,12 +8666,14 @@ var FilterSystem = ({
   sortFields,
   mode: modeOverride,
   breakpoint,
+  bounded = false,
   children,
   actions,
   className
 }) => {
   const containerRef = React54.useRef(null);
   const mode = useFilterBarMode(containerRef, modeOverride, breakpoint);
+  const collisionBoundary = bounded ? containerRef.current : void 0;
   const [propertySelectorOpen, setPropertySelectorOpen] = React54.useState(false);
   const [advancedOpen, setAdvancedOpen] = React54.useState(false);
   const [summaryOpen, setSummaryOpen] = React54.useState(false);
@@ -8763,6 +8793,7 @@ var FilterSystem = ({
           onClearAll: handleClearAll,
           open: summaryOpen,
           onOpenChange: setSummaryOpen,
+          collisionBoundary,
           children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
             FilterBarButton,
             {
@@ -8783,6 +8814,7 @@ var FilterSystem = ({
               onFiltersChange: handleAdvancedFiltersChange,
               open: advancedOpen,
               onOpenChange: setAdvancedOpen,
+              collisionBoundary,
               children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                 AdvancedChip,
                 {
@@ -8807,7 +8839,8 @@ var FilterSystem = ({
                 onUpdate: handleUpdateFilter,
                 onPropertyChange: (newProp) => handlePropertyChange(filter.id, newProp),
                 onDelete: () => handleDeleteFilter(filter.id),
-                onConvertToAdvanced: () => handleConvertToAdvanced(filter.id)
+                onConvertToAdvanced: () => handleConvertToAdvanced(filter.id),
+                hasAdvancedFilters: hasAdvanced
               },
               filter.id
             );