@l3mpire/ui 2.11.0 → 2.13.0

package/USAGE.md

@@ -946,12 +946,38 @@ import {
 | `SummaryChip` | Minimal mode: "Filters (N)" with interactive popover |
 
 **Responsive:** FilterSystem auto-detects container width via `ResizeObserver`:
-- **Default** (>600px): full chips, labels, "Filters" button
-- **Minimal** (≤600px): SummaryChip "Filters (N)" with interactive popover, icon-only Sort/Filter buttons
+- **Default** (>breakpoint): full chips, labels, "Filters" button
+- **Minimal** (≤breakpoint): SummaryChip "Filters (N)" with interactive popover, icon-only Sort/Filter buttons
+- The breakpoint is configurable via the `breakpoint` prop on `FilterSystem` (default: `600`).
 
 **Built-in Clear:** appears inline after the last filter chip ("Clear" text in default, × icon in minimal). Separate from "Discard changes" which goes in `actions` (right side) to revert a saved view.
 
-**And/Or toggle:** each row in the advanced popover has an independent And/Or toggle button (click to switch).
+**And/Or toggle:** each row in the advanced popover has an independent And/Or toggle button. The choice is **persisted on each `FilterCondition` as `logicOperator: "and" | "or"`** (defaults to `"and"` when undefined), so it survives remounts and can be serialized.
+
+**Advanced filter shortcut:** the PropertySelector footer shows an "Advanced filter · N rule(s)" item. Clicking it closes the property selector and opens the advanced popover directly in its initial empty state — where the user picks the first property inline via a "Where | [Select property ▾]" draft row. When no advanced filters exist yet, clicking this shortcut makes the AdvancedChip appear with the popover already open; closing without adding a filter removes the chip automatically.
+
+**Dynamic options ("Me", "Unassigned", …):** enum/tags/relation properties accept a `dynamicOptions` array. Each entry is `{ value, label, description?, icon? }` and is rendered at the top of the SingleSelect / MultiSelect dropdown with a divider separating it from the regular options. The `value` is a sentinel string stored on `FilterCondition.value` — the DS only renders, the consuming app resolves it at query time (e.g. `"__me__"` → `currentUser.id`). This keeps session/business logic out of the DS while still getting a consistent visual treatment.
+
+```tsx
+{
+  id: "contact_owner",
+  label: "Contact owner",
+  type: "enum",
+  icon: faUserOutline,
+  group: "contact",
+  groupLabel: "Contact",
+  options: ["Quentin", "Simon", "Philippe"],
+  dynamicOptions: [
+    {
+      value: "__me__",
+      label: "Me",
+      description: "This value is dynamically applied to the current user",
+      icon: faBoltOutline,
+    },
+    { value: "__deactivated__", label: "All deactivated and removed owners", icon: faBoltOutline },
+  ],
+}
+```
 
 | Utility | Purpose |
 |---|---|

package/dist/index.d.mts

@@ -357,7 +357,7 @@ interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputEleme
 declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
 
 declare const typographyVariants: (props?: ({
-    variant?: "xs" | "sm" | "md" | "lg" | "h2" | "h3" | "h1" | null | undefined;
+    variant?: "xs" | "sm" | "md" | "lg" | "h1" | "h2" | "h3" | null | undefined;
     weight?: "bold" | "regular" | "semibold" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface TypographyProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof typographyVariants> {
@@ -676,12 +676,28 @@ declare const FilterChip: React.ForwardRefExoticComponent<FilterChipProps & Reac
 type DataType = "text" | "number" | "date" | "enum" | "tags" | "boolean" | "relation";
 type TextOperator = "contains" | "does not contain" | "is" | "is not" | "starts with" | "ends with" | "is empty" | "is not empty";
 type NumberOperator = "=" | "≠" | ">" | "<" | "≥" | "≤" | "is between" | "is empty" | "is not empty";
-type DateOperator = "is" | "is before" | "is after" | "is on or before" | "is on or after" | "is between" | "is relative" | "is empty" | "is not empty";
+type DateOperator = "is" | "is before" | "is after" | "is on or before" | "is on or after" | "is between" | "is empty" | "is not empty";
 type EnumOperator = "is" | "is not" | "is any of" | "is none of" | "is empty" | "is not empty";
 type TagsOperator = "contains" | "does not contain" | "contains any of" | "contains all of" | "is empty" | "is not empty";
 type BooleanOperator = "is true" | "is false";
 type RelationOperator = "is" | "is not" | "is any of" | "is none of" | "is empty" | "is not empty";
 type OperatorType = TextOperator | NumberOperator | DateOperator | EnumOperator | TagsOperator | BooleanOperator | RelationOperator;
+/**
+ * A "smart" / dynamic option shown at the top of a relation or enum selector
+ * (e.g. "Me", "My team", "Unassigned"). The value is a sentinel string that
+ * the consuming app resolves at query time (e.g. `__me__` → `currentUser.id`).
+ *
+ * The design system only handles the rendering (icon + label + description +
+ * divider above the regular options). Resolving the sentinels is an app
+ * concern.
+ */
+interface DynamicOption {
+    /** Sentinel value stored on FilterCondition.value (e.g. "__me__"). */
+    value: string;
+    label: string;
+    description?: string;
+    icon?: _l3mpire_icons.IconDefinition;
+}
 interface PropertyDefinition {
     id: string;
     label: string;
@@ -690,6 +706,12 @@ interface PropertyDefinition {
     group: string;
     groupLabel: string;
     options?: string[];
+    /**
+     * Dynamic/smart options rendered at the top of the value selector with a
+     * divider. Only used for enum, tags, and relation types. The app resolves
+     * the sentinel values at query time.
+     */
+    dynamicOptions?: DynamicOption[];
     relationConfig?: {
         entity: string;
         displayProperty: string;
@@ -698,11 +720,14 @@ interface PropertyDefinition {
     };
 }
 type FilterValue = string | number | boolean | Date | [number, number] | [Date, Date] | string[] | null;
+type LogicOperator = "and" | "or";
 interface FilterCondition {
     id: string;
     propertyId: string;
     operator: OperatorType | null;
     value: FilterValue;
+    /** Logic connector to the previous filter. Defaults to "and". */
+    logicOperator?: LogicOperator;
 }
 interface FilterState {
     basicFilters: FilterCondition[];
@@ -811,6 +836,8 @@ interface ValueInputProps {
     onChange: (value: FilterValue) => void;
     onSubmit?: () => void;
     options?: string[];
+    /** Dynamic/smart entries rendered at the top with a divider. */
+    dynamicOptions?: DynamicOption[];
     className?: string;
 }
 declare const ValueInput: React.FC<ValueInputProps>;
@@ -821,6 +848,13 @@ interface PropertySelectorProps {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     children?: React.ReactNode;
+    /**
+     * When provided, renders an "Advanced filter" item at the bottom of the
+     * popover with a divider above it.
+     */
+    onAdvancedFilter?: () => void;
+    /** Count of existing advanced filter rules, displayed next to the item. */
+    advancedFilterCount?: number;
 }
 declare const PropertySelector: React.FC<PropertySelectorProps>;
 
@@ -865,10 +899,10 @@ declare const InteractiveFilterChip: React.FC<InteractiveFilterChipProps>;
 type FilterBarMode = "default" | "minimal";
 /**
  * Observes the container width and returns the appropriate FilterBar mode.
- * - default: > 600px
- * - minimal: ≤ 600px
+ * - default: > breakpoint
+ * - minimal: ≤ breakpoint
  */
-declare function useFilterBarMode(ref: React.RefObject<HTMLElement | null>, override?: FilterBarMode): FilterBarMode;
+declare function useFilterBarMode(ref: React.RefObject<HTMLElement | null>, override?: FilterBarMode, breakpoint?: number): FilterBarMode;
 
 interface FilterSystemProps {
     properties: PropertyDefinition[];
@@ -877,6 +911,8 @@ interface FilterSystemProps {
     sortFields?: SortField[];
     /** Force a specific mode instead of auto-detecting via ResizeObserver. */
     mode?: FilterBarMode;
+    /** Width breakpoint (px) for switching to minimal mode. Default: 600. */
+    breakpoint?: number;
     children?: React.ReactNode;
     actions?: React.ReactNode;
     className?: string;
@@ -924,6 +960,9 @@ interface SummaryChipProps {
     /** Custom trigger element. When omitted, renders the default "Filters (N)" button. */
     children?: React.ReactNode;
     className?: string;
+    /** Controlled open state. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
 }
 declare const SummaryChip: React.FC<SummaryChipProps>;
 

package/dist/index.d.ts

@@ -357,7 +357,7 @@ interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputEleme
 declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
 
 declare const typographyVariants: (props?: ({
-    variant?: "xs" | "sm" | "md" | "lg" | "h2" | "h3" | "h1" | null | undefined;
+    variant?: "xs" | "sm" | "md" | "lg" | "h1" | "h2" | "h3" | null | undefined;
     weight?: "bold" | "regular" | "semibold" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface TypographyProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof typographyVariants> {
@@ -676,12 +676,28 @@ declare const FilterChip: React.ForwardRefExoticComponent<FilterChipProps & Reac
 type DataType = "text" | "number" | "date" | "enum" | "tags" | "boolean" | "relation";
 type TextOperator = "contains" | "does not contain" | "is" | "is not" | "starts with" | "ends with" | "is empty" | "is not empty";
 type NumberOperator = "=" | "≠" | ">" | "<" | "≥" | "≤" | "is between" | "is empty" | "is not empty";
-type DateOperator = "is" | "is before" | "is after" | "is on or before" | "is on or after" | "is between" | "is relative" | "is empty" | "is not empty";
+type DateOperator = "is" | "is before" | "is after" | "is on or before" | "is on or after" | "is between" | "is empty" | "is not empty";
 type EnumOperator = "is" | "is not" | "is any of" | "is none of" | "is empty" | "is not empty";
 type TagsOperator = "contains" | "does not contain" | "contains any of" | "contains all of" | "is empty" | "is not empty";
 type BooleanOperator = "is true" | "is false";
 type RelationOperator = "is" | "is not" | "is any of" | "is none of" | "is empty" | "is not empty";
 type OperatorType = TextOperator | NumberOperator | DateOperator | EnumOperator | TagsOperator | BooleanOperator | RelationOperator;
+/**
+ * A "smart" / dynamic option shown at the top of a relation or enum selector
+ * (e.g. "Me", "My team", "Unassigned"). The value is a sentinel string that
+ * the consuming app resolves at query time (e.g. `__me__` → `currentUser.id`).
+ *
+ * The design system only handles the rendering (icon + label + description +
+ * divider above the regular options). Resolving the sentinels is an app
+ * concern.
+ */
+interface DynamicOption {
+    /** Sentinel value stored on FilterCondition.value (e.g. "__me__"). */
+    value: string;
+    label: string;
+    description?: string;
+    icon?: _l3mpire_icons.IconDefinition;
+}
 interface PropertyDefinition {
     id: string;
     label: string;
@@ -690,6 +706,12 @@ interface PropertyDefinition {
     group: string;
     groupLabel: string;
     options?: string[];
+    /**
+     * Dynamic/smart options rendered at the top of the value selector with a
+     * divider. Only used for enum, tags, and relation types. The app resolves
+     * the sentinel values at query time.
+     */
+    dynamicOptions?: DynamicOption[];
     relationConfig?: {
         entity: string;
         displayProperty: string;
@@ -698,11 +720,14 @@ interface PropertyDefinition {
     };
 }
 type FilterValue = string | number | boolean | Date | [number, number] | [Date, Date] | string[] | null;
+type LogicOperator = "and" | "or";
 interface FilterCondition {
     id: string;
     propertyId: string;
     operator: OperatorType | null;
     value: FilterValue;
+    /** Logic connector to the previous filter. Defaults to "and". */
+    logicOperator?: LogicOperator;
 }
 interface FilterState {
     basicFilters: FilterCondition[];
@@ -811,6 +836,8 @@ interface ValueInputProps {
     onChange: (value: FilterValue) => void;
     onSubmit?: () => void;
     options?: string[];
+    /** Dynamic/smart entries rendered at the top with a divider. */
+    dynamicOptions?: DynamicOption[];
     className?: string;
 }
 declare const ValueInput: React.FC<ValueInputProps>;
@@ -821,6 +848,13 @@ interface PropertySelectorProps {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     children?: React.ReactNode;
+    /**
+     * When provided, renders an "Advanced filter" item at the bottom of the
+     * popover with a divider above it.
+     */
+    onAdvancedFilter?: () => void;
+    /** Count of existing advanced filter rules, displayed next to the item. */
+    advancedFilterCount?: number;
 }
 declare const PropertySelector: React.FC<PropertySelectorProps>;
 
@@ -865,10 +899,10 @@ declare const InteractiveFilterChip: React.FC<InteractiveFilterChipProps>;
 type FilterBarMode = "default" | "minimal";
 /**
  * Observes the container width and returns the appropriate FilterBar mode.
- * - default: > 600px
- * - minimal: ≤ 600px
+ * - default: > breakpoint
+ * - minimal: ≤ breakpoint
  */
-declare function useFilterBarMode(ref: React.RefObject<HTMLElement | null>, override?: FilterBarMode): FilterBarMode;
+declare function useFilterBarMode(ref: React.RefObject<HTMLElement | null>, override?: FilterBarMode, breakpoint?: number): FilterBarMode;
 
 interface FilterSystemProps {
     properties: PropertyDefinition[];
@@ -877,6 +911,8 @@ interface FilterSystemProps {
     sortFields?: SortField[];
     /** Force a specific mode instead of auto-detecting via ResizeObserver. */
     mode?: FilterBarMode;
+    /** Width breakpoint (px) for switching to minimal mode. Default: 600. */
+    breakpoint?: number;
     children?: React.ReactNode;
     actions?: React.ReactNode;
     className?: string;
@@ -924,6 +960,9 @@ interface SummaryChipProps {
     /** Custom trigger element. When omitted, renders the default "Filters (N)" button. */
     children?: React.ReactNode;
     className?: string;
+    /** Controlled open state. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
 }
 declare const SummaryChip: React.FC<SummaryChipProps>;