@camunda/ccma-saas-frontend 0.0.31

package/lib/esm/components/c4-advanced-search-filters/FiltersSection.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { Stack } from '@carbon/react';
+import { ArrayFieldContainer } from './ArrayFieldContainer.js';
+export const FiltersSection = ({ fields, filterFields, addArrayItem, updateFilter, renderFieldRow, }) => {
+    const groupedFields = filterFields.reduce((groups, field) => {
+        if (field.parentArrayField) {
+            const key = `${field.parentArrayField}-${field.arrayIndex}`;
+            if (!groups[key]) {
+                groups[key] = [];
+            }
+            groups[key].push(field);
+        }
+        else {
+            const key = field.fieldName;
+            if (!groups[key]) {
+                groups[key] = [];
+            }
+            groups[key].push(field);
+        }
+        return groups;
+    }, {});
+    const addedArrayFields = new Set(filterFields
+        .filter((f) => f.parentArrayField)
+        .map((f) => f.parentArrayField));
+    const arrayFieldContainers = Object.keys(fields).filter((fieldName) => fields[fieldName].matchType === 'array' &&
+        (!fields[fieldName].optional || addedArrayFields.has(fieldName)));
+    return (_jsxs(Stack, { gap: 4, children: [Object.entries(groupedFields)
+                .filter(([, groupFields]) => !groupFields[0].parentArrayField)
+                .map(([, groupFields]) => {
+                const firstField = groupFields[0];
+                const spec = fields[firstField.fieldName];
+                if (spec.matchType === 'array') {
+                    return null;
+                }
+                return groupFields.map((field) => renderFieldRow(field, spec));
+            }), arrayFieldContainers.map((fieldName) => {
+                const spec = fields[fieldName];
+                const arrayFields = filterFields.filter((f) => f.parentArrayField === fieldName);
+                const arrayGroups = new Map();
+                arrayFields.forEach((field) => {
+                    const index = field.arrayIndex ?? 0;
+                    if (!arrayGroups.has(index)) {
+                        arrayGroups.set(index, []);
+                    }
+                    arrayGroups.get(index)?.push(field);
+                });
+                return (_jsx(ArrayFieldContainer, { fieldName: fieldName, spec: spec, groups: Array.from(arrayGroups.entries()), onAddItem: () => addArrayItem(fieldName, 'root'), onRemoveItem: (arrayIndex) => {
+                        const updated = filterFields.filter((f) => !(f.parentArrayField === fieldName &&
+                            f.arrayIndex === arrayIndex));
+                        updateFilter(updated);
+                    }, onRemoveAll: spec.optional
+                        ? () => {
+                            const updated = filterFields.filter((f) => f.parentArrayField !== fieldName);
+                            updateFilter(updated);
+                        }
+                        : undefined, renderRow: (f, s) => renderFieldRow(f, s) }, fieldName));
+            })] }));
+};

package/lib/esm/components/c4-advanced-search-filters/OrSection.d.ts

@@ -0,0 +1,16 @@
+import type React from 'react';
+import type { JSX } from 'react';
+import type { FieldSpec } from './c4-advanced-search-filters.types';
+import type { FilterFieldState } from './state.types';
+interface OrSectionProps {
+    sectionId: string;
+    fieldsConfig: Record<string, FieldSpec>;
+    filterFields: FilterFieldState[];
+    addArrayItem: (parentFieldName: string, orSectionId: string) => void;
+    removeOrSection: (sectionId: string) => void;
+    addOptionalFieldToSection: (fieldName: string, sectionId: string) => void;
+    updateFilter: (updatedFields: FilterFieldState[]) => void;
+    renderFieldRow: (field: FilterFieldState, spec: FieldSpec) => JSX.Element;
+}
+export declare const OrSection: React.FC<OrSectionProps>;
+export {};

package/lib/esm/components/c4-advanced-search-filters/OrSection.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { Button, Select, SelectItem } from '@carbon/react';
+import { Close } from '@carbon/react/icons/index.esm.js';
+import { ArrayFieldContainer } from './ArrayFieldContainer.js';
+export const OrSection = ({ sectionId, fieldsConfig, filterFields, addArrayItem, removeOrSection, addOptionalFieldToSection, updateFilter, renderFieldRow, }) => {
+    const sectionFields = filterFields;
+    const availableFields = Object.entries(fieldsConfig)
+        .filter(([fieldName, spec]) => {
+        const addedInSection = sectionFields.some((f) => (f.fieldName === fieldName && !f.parentArrayField) ||
+            f.parentArrayField === fieldName);
+        return spec.optional && !addedInSection;
+    })
+        .map(([fieldName, spec]) => ({ fieldName, spec }))
+        .sort((a, b) => a.spec.label.localeCompare(b.spec.label));
+    const groupedFields = sectionFields.reduce((groups, field) => {
+        if (field.parentArrayField) {
+            const key = `${field.parentArrayField}-${field.arrayIndex}`;
+            if (!groups[key]) {
+                groups[key] = [];
+            }
+            groups[key].push(field);
+        }
+        else {
+            const key = field.fieldName;
+            if (!groups[key]) {
+                groups[key] = [];
+            }
+            groups[key].push(field);
+        }
+        return groups;
+    }, {});
+    const regularFields = Object.entries(groupedFields)
+        .filter(([, groupFields]) => !groupFields[0].parentArrayField)
+        .map(([, groupFields]) => {
+        const firstField = groupFields[0];
+        const spec = fieldsConfig[firstField.fieldName];
+        if (!spec || spec.matchType === 'array') {
+            return null;
+        }
+        return groupFields.map((field) => renderFieldRow(field, spec));
+    })
+        .filter(Boolean);
+    const arrayFieldsInSection = new Set(sectionFields
+        .filter((f) => f.parentArrayField)
+        .map((f) => f.parentArrayField));
+    const arrayFieldElements = Array.from(arrayFieldsInSection).map((fieldName) => {
+        const spec = fieldsConfig[fieldName];
+        if (!spec || spec.matchType !== 'array') {
+            return null;
+        }
+        const arrayFields = sectionFields.filter((f) => f.parentArrayField === fieldName);
+        const arrayGroups = new Map();
+        arrayFields.forEach((field) => {
+            const index = field.arrayIndex ?? 0;
+            if (!arrayGroups.has(index)) {
+                arrayGroups.set(index, []);
+            }
+            arrayGroups.get(index)?.push(field);
+        });
+        return (_jsx(ArrayFieldContainer, { fieldName: fieldName, spec: spec, title: `${spec.label} Array`, groups: Array.from(arrayGroups.entries()), onAddItem: () => addArrayItem(fieldName, sectionId), onRemoveItem: (arrayIndex) => {
+                const updatedFields = filterFields.filter((f) => !(f.parentArrayField === fieldName &&
+                    f.arrayIndex === arrayIndex &&
+                    f.orSectionId === sectionId));
+                updateFilter(updatedFields);
+            }, onRemoveAll: spec.optional
+                ? () => {
+                    const updatedFields = filterFields.filter((f) => !(f.parentArrayField === fieldName &&
+                        f.orSectionId === sectionId));
+                    updateFilter(updatedFields);
+                }
+                : undefined, renderRow: (f, s) => renderFieldRow(f, s) }, fieldName));
+    });
+    return (_jsxs("div", { style: {
+            border: '2px solid var(--cds-border-accent)',
+            borderRadius: 8,
+            padding: '1rem',
+            backgroundColor: 'var(--cds-layer-01)',
+            position: 'relative',
+        }, children: [_jsxs("div", { style: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    marginBottom: '1rem',
+                    paddingBottom: '0.5rem',
+                    borderBottom: '1px solid var(--cds-border-subtle)',
+                }, children: [_jsxs("div", { style: {
+                            fontSize: '0.875rem',
+                            fontWeight: 600,
+                            color: 'var(--cds-text-primary)',
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '0.5rem',
+                        }, children: [_jsx("span", { style: {
+                                    backgroundColor: 'var(--cds-support-info)',
+                                    color: 'white',
+                                    padding: '0.25rem 0.5rem',
+                                    borderRadius: 4,
+                                    fontSize: '0.75rem',
+                                    fontWeight: 500,
+                                }, children: "OR" }), "Alternative Filter Conditions"] }), _jsx(Button, { kind: 'ghost', size: 'sm', renderIcon: Close, iconDescription: 'Remove OR section', onClick: () => removeOrSection(sectionId), hasIconOnly: true })] }), sectionFields.length === 0 ? (_jsx("div", { style: {
+                    textAlign: 'center',
+                    padding: '1rem',
+                    color: 'var(--cds-text-secondary)',
+                    fontSize: '0.875rem',
+                }, children: "No conditions added to this OR section. Add fields below to create alternative filter conditions." })) : (_jsxs("div", { children: [regularFields, arrayFieldElements] })), availableFields.length > 0 && (_jsx("div", { style: { marginTop: '1rem' }, children: _jsxs(Select, { id: `or-section-${sectionId}-field-select`, labelText: 'Add Field to OR Section', value: '', onChange: (e) => {
+                        const fieldName = e.target.value;
+                        if (fieldName) {
+                            addOptionalFieldToSection(fieldName, sectionId);
+                        }
+                    }, children: [_jsx(SelectItem, { value: '', text: 'Select field to add...' }), availableFields.map((field) => (_jsx(SelectItem, { value: field.fieldName, text: field.spec.label }, field.fieldName)))] }) }))] }, sectionId));
+};

package/lib/esm/components/c4-advanced-search-filters/c4-advanced-search-filters.d.ts

@@ -0,0 +1,3 @@
+import { type JSX } from 'react';
+import type { C4AdvancedSearchFiltersProps } from './c4-advanced-search-filters.types';
+export declare const C4AdvancedSearchFilters: ({ fields, onFilterChange, }: C4AdvancedSearchFiltersProps) => JSX.Element;

package/lib/esm/components/c4-advanced-search-filters/c4-advanced-search-filters.js

@@ -0,0 +1,406 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { Button, Select, SelectItem, Stack } from '@carbon/react';
+import { Add } from '@carbon/react/icons/index.esm.js';
+import { useCallback, useEffect, useState } from 'react';
+import { FieldRow } from './FieldRow.js';
+import { FiltersSection } from './FiltersSection.js';
+import { OrSection } from './OrSection.js';
+import { convertDateToISOString, getInitialValue, isArrayOperator, validateComparisonOperatorValue, } from './utils.js';
+export const C4AdvancedSearchFilters = ({ fields, onFilterChange, }) => {
+    const [filterFields, setFilterFields] = useState([]);
+    const [orSections, setOrSections] = useState([]);
+    const [nextId, setNextId] = useState(1);
+    // Initialize with non-optional fields in the root section
+    useEffect(() => {
+        const initialFields = [];
+        Object.entries(fields)
+            .filter(([, spec]) => !spec.optional)
+            .forEach(([fieldName, spec], index) => {
+            if (spec.matchType === 'array' && spec.arrayItems) {
+                Object.entries(spec.arrayItems).forEach(([arrayFieldName, arrayFieldSpec]) => {
+                    initialFields.push({
+                        id: `field-init-${index}-0-${arrayFieldName}`,
+                        fieldName: arrayFieldName,
+                        matchType: arrayFieldSpec.matchType === 'exact-match'
+                            ? 'exact-match'
+                            : arrayFieldSpec.matchType === 'advanced-filter'
+                                ? 'advanced-filter'
+                                : undefined,
+                        operator: arrayFieldSpec.matchType === 'advanced-filter'
+                            ? arrayFieldSpec.operators?.[0]
+                            : undefined,
+                        value: getInitialValue(arrayFieldSpec),
+                        arrayIndex: 0,
+                        arrayFieldName,
+                        parentArrayField: fieldName,
+                        orSectionId: 'root',
+                    });
+                });
+            }
+            else {
+                initialFields.push({
+                    id: `field-init-${index}`,
+                    fieldName,
+                    matchType: spec.matchType === 'exact-match'
+                        ? 'exact-match'
+                        : spec.matchType === 'advanced-filter'
+                            ? 'advanced-filter'
+                            : undefined,
+                    operator: spec.matchType === 'advanced-filter'
+                        ? spec.operators?.[0]
+                        : undefined,
+                    value: getInitialValue(spec),
+                    orSectionId: 'root',
+                });
+            }
+        });
+        setFilterFields(initialFields);
+        setNextId(1000);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [fields]);
+    const createInitialField = useCallback((fieldName, spec, arrayIndex, arrayFieldName, parentArrayField, orSectionId = 'root') => {
+        const id = `field-${nextId}-${Date.now()}-${Math.random()}`;
+        setNextId((prev) => prev + 1);
+        return {
+            id,
+            fieldName,
+            matchType: spec.matchType === 'exact-match'
+                ? 'exact-match'
+                : spec.matchType === 'advanced-filter'
+                    ? 'advanced-filter'
+                    : spec.matchType === 'both'
+                        ? undefined
+                        : undefined,
+            operator: spec.matchType === 'advanced-filter' && spec.operators?.length
+                ? spec.operators[0]
+                : undefined,
+            value: getInitialValue(spec),
+            arrayIndex,
+            arrayFieldName,
+            parentArrayField,
+            orSectionId,
+        };
+    }, [nextId]);
+    const generatePayload = useCallback((fieldsToProcess) => {
+        const payload = {};
+        const rootFields = fieldsToProcess.filter((field) => field.orSectionId === 'root');
+        const orSectionFields = fieldsToProcess.filter((field) => field.orSectionId !== 'root');
+        const processFieldsToPayload = (fieldsList) => {
+            const sectionPayload = {};
+            const arrayFieldGroups = new Map();
+            fieldsList.forEach((field) => {
+                const isExistsOperator = field.operator === '$exists';
+                if (!isExistsOperator &&
+                    !['$in', '$notIn'].includes(field.operator || '') &&
+                    (field.value === undefined ||
+                        field.value === null ||
+                        (typeof field.value === 'string' && !field.value.trim()))) {
+                    return;
+                }
+                if (['$in', '$notIn'].includes(field.operator || '') &&
+                    (!field.arrayValues || field.arrayValues.length === 0)) {
+                    return;
+                }
+                if (field.parentArrayField &&
+                    field.arrayIndex !== undefined &&
+                    field.arrayFieldName) {
+                    if (!arrayFieldGroups.has(field.parentArrayField)) {
+                        arrayFieldGroups.set(field.parentArrayField, new Map());
+                    }
+                    const arrayItems = arrayFieldGroups.get(field.parentArrayField);
+                    if (!arrayItems.has(field.arrayIndex)) {
+                        arrayItems.set(field.arrayIndex, {});
+                    }
+                    const arrayItem = arrayItems.get(field.arrayIndex);
+                    let fieldValue;
+                    if (field.matchType === 'exact-match' || !field.operator) {
+                        fieldValue = convertDateToISOString(field.value);
+                    }
+                    else if (['$in', '$notIn'].includes(field.operator)) {
+                        fieldValue = {
+                            [field.operator]: convertDateToISOString(field.arrayValues),
+                        };
+                    }
+                    else {
+                        fieldValue = {
+                            [field.operator]: convertDateToISOString(field.value),
+                        };
+                    }
+                    arrayItem[field.arrayFieldName] = fieldValue;
+                }
+                else {
+                    let fieldValue;
+                    if (field.matchType === 'exact-match' || !field.operator) {
+                        fieldValue = convertDateToISOString(field.value);
+                    }
+                    else if (['$in', '$notIn'].includes(field.operator)) {
+                        fieldValue = {
+                            [field.operator]: convertDateToISOString(field.arrayValues),
+                        };
+                    }
+                    else {
+                        fieldValue = {
+                            [field.operator]: convertDateToISOString(field.value),
+                        };
+                    }
+                    sectionPayload[field.fieldName] = fieldValue;
+                }
+            });
+            arrayFieldGroups.forEach((arrayItems, parentFieldName) => {
+                const sortedArrayItems = Array.from(arrayItems.entries())
+                    .sort(([a], [b]) => a - b)
+                    .map(([, item]) => item)
+                    .filter((item) => Object.keys(item).length > 0);
+                if (sortedArrayItems.length > 0) {
+                    sectionPayload[parentFieldName] = sortedArrayItems;
+                }
+            });
+            return sectionPayload;
+        };
+        const rootPayload = processFieldsToPayload(rootFields);
+        Object.assign(payload, rootPayload);
+        if (orSectionFields.length > 0) {
+            const orSectionMap = new Map();
+            orSectionFields.forEach((field) => {
+                const sectionId = field.orSectionId;
+                if (!orSectionMap.has(sectionId)) {
+                    orSectionMap.set(sectionId, []);
+                }
+                orSectionMap.get(sectionId)?.push(field);
+            });
+            const orPayloads = [];
+            orSectionMap.forEach((fields) => {
+                const orPayload = processFieldsToPayload(fields);
+                if (Object.keys(orPayload).length > 0) {
+                    orPayloads.push(orPayload);
+                }
+            });
+            if (orPayloads.length > 0) {
+                payload.$or = orPayloads;
+            }
+        }
+        return payload;
+    }, []);
+    const updateFilter = useCallback((updatedFields) => {
+        setFilterFields(updatedFields);
+        const payload = generatePayload(updatedFields);
+        onFilterChange(payload);
+    }, [generatePayload, onFilterChange]);
+    const addOrSection = useCallback(() => {
+        const newSectionId = `or-${Date.now()}`;
+        setOrSections((prev) => [...prev, newSectionId]);
+    }, []);
+    const removeOrSection = useCallback((sectionId) => {
+        const updatedFields = filterFields.filter((field) => field.orSectionId !== sectionId);
+        updateFilter(updatedFields);
+        setOrSections((prev) => prev.filter((id) => id !== sectionId));
+    }, [filterFields, updateFilter]);
+    const addOptionalFieldToSection = useCallback((fieldName, sectionId = 'root') => {
+        const spec = fields[fieldName];
+        if (!spec) {
+            return;
+        }
+        if (spec.matchType === 'array' && spec.arrayItems) {
+            const newFields = [];
+            Object.entries(spec.arrayItems).forEach(([arrayFieldName, arrayFieldSpec]) => {
+                newFields.push(createInitialField(arrayFieldName, arrayFieldSpec, 0, arrayFieldName, fieldName, sectionId));
+            });
+            updateFilter([...filterFields, ...newFields]);
+        }
+        else {
+            const newField = createInitialField(fieldName, spec, undefined, undefined, undefined, sectionId);
+            updateFilter([...filterFields, newField]);
+        }
+    }, [fields, filterFields, createInitialField, updateFilter]);
+    const handleFieldChange = useCallback((fieldId, updates) => {
+        const updatedFields = filterFields.map((field) => {
+            if (field.id === fieldId) {
+                const updatedField = { ...field, ...updates };
+                // Get field spec to determine field type
+                const spec = field.parentArrayField
+                    ? fields[field.parentArrayField]?.arrayItems?.[field.arrayFieldName]
+                    : fields[field.fieldName];
+                // Validate comparison operators for number and date-time fields
+                if (updatedField.operator && updatedField.value && spec) {
+                    const fieldType = spec.type || 'string';
+                    const error = validateComparisonOperatorValue(updatedField.value, updatedField.operator, fieldType);
+                    updatedField.inputError = error;
+                }
+                else {
+                    updatedField.inputError = undefined;
+                }
+                // Reset operator-specific data when operator changes
+                if (updates.operator && updates.operator !== field.operator) {
+                    if (isArrayOperator(updates.operator)) {
+                        updatedField.arrayValues = updatedField.arrayValues || [];
+                        updatedField.value = '';
+                    }
+                    else {
+                        updatedField.arrayValues = undefined;
+                    }
+                }
+                return updatedField;
+            }
+            return field;
+        });
+        updateFilter(updatedFields);
+    }, [filterFields, updateFilter, fields]);
+    const addArrayValue = useCallback((fieldId, value) => {
+        // For dates, use ISO string for comparison and storage
+        const comparisonValue = value instanceof Date ? value.toISOString() : String(value).trim();
+        if (comparisonValue.length === 0) {
+            return;
+        }
+        const updatedFields = filterFields.map((field) => {
+            if (field.id === fieldId) {
+                const currentArrayValues = field.arrayValues || [];
+                // Check if value already exists (use ISO string for dates)
+                const valueExists = currentArrayValues.some((v) => {
+                    const existingValue = v instanceof Date ? v.toISOString() : String(v);
+                    return existingValue === comparisonValue;
+                });
+                if (!valueExists) {
+                    return {
+                        ...field,
+                        arrayValues: [...currentArrayValues, value],
+                        value: getInitialValue(fields[field.fieldName] || fields[field.arrayFieldName]), // Clear input after adding
+                    };
+                }
+            }
+            return field;
+        });
+        updateFilter(updatedFields);
+    }, [filterFields, updateFilter, fields]);
+    const removeArrayValue = useCallback((fieldId, valueToRemove) => {
+        const comparisonValue = valueToRemove instanceof Date
+            ? valueToRemove.toISOString()
+            : String(valueToRemove);
+        const updatedFields = filterFields.map((field) => {
+            if (field.id === fieldId && field.arrayValues) {
+                return {
+                    ...field,
+                    arrayValues: field.arrayValues.filter((v) => {
+                        const existingValue = v instanceof Date ? v.toISOString() : String(v);
+                        return existingValue !== comparisonValue;
+                    }),
+                };
+            }
+            return field;
+        });
+        updateFilter(updatedFields);
+    }, [filterFields, updateFilter]);
+    const addOptionalField = useCallback((fieldName) => {
+        const spec = fields[fieldName];
+        if (!spec) {
+            return;
+        }
+        if (spec.matchType === 'array' && spec.arrayItems) {
+            // For array fields, create initial empty array items
+            // Start with one array item by default
+            const newFields = [];
+            Object.entries(spec.arrayItems).forEach(([arrayFieldName, arrayFieldSpec]) => {
+                newFields.push(createInitialField(arrayFieldName, arrayFieldSpec, 0, // Start with index 0
+                arrayFieldName, fieldName, // parentArrayField
+                'root'));
+            });
+            updateFilter([...filterFields, ...newFields]);
+        }
+        else {
+            // Regular fields
+            const newField = createInitialField(fieldName, spec);
+            updateFilter([...filterFields, newField]);
+        }
+    }, [fields, filterFields, createInitialField, updateFilter]);
+    const removeField = useCallback((fieldId) => {
+        const updatedFields = filterFields.filter((field) => field.id !== fieldId);
+        updateFilter(updatedFields);
+    }, [filterFields, updateFilter]);
+    const addArrayItem = useCallback((parentFieldName, orSectionId = 'root') => {
+        const spec = fields[parentFieldName];
+        if (!spec?.arrayItems) {
+            return;
+        }
+        const existingArrayItems = filterFields.filter((f) => f.parentArrayField === parentFieldName &&
+            f.orSectionId === orSectionId);
+        // Find the highest array index for this parent field in this OR section
+        const maxIndex = existingArrayItems.reduce((max, field) => field.arrayIndex !== undefined
+            ? Math.max(max, field.arrayIndex)
+            : max, -1);
+        const nextIndex = maxIndex + 1;
+        // Create new fields for all array item properties
+        const newFields = [];
+        Object.entries(spec.arrayItems).forEach(([arrayFieldName, arrayFieldSpec]) => {
+            newFields.push(createInitialField(arrayFieldName, arrayFieldSpec, nextIndex, arrayFieldName, parentFieldName, orSectionId));
+        });
+        updateFilter([...filterFields, ...newFields]);
+    }, [fields, filterFields, createInitialField, updateFilter]);
+    const renderFieldRow = (field, spec) => (_jsx(FieldRow, { field: field, spec: spec, onFieldChange: handleFieldChange, onRemove: spec.optional ? removeField : undefined, onAddArrayValue: addArrayValue, onRemoveArrayValue: removeArrayValue }, field.id));
+    const getAvailableOptionalFields = () => {
+        const addedFields = new Set(filterFields
+            .filter((f) => f.orSectionId === 'root' && !f.parentArrayField)
+            .map((f) => f.fieldName));
+        // Also include array fields that have been added
+        const addedArrayFields = new Set(filterFields
+            .filter((f) => f.orSectionId === 'root' && f.parentArrayField)
+            .map((f) => f.parentArrayField));
+        return Object.entries(fields)
+            .filter(([fieldName, spec]) => spec.optional &&
+            !addedFields.has(fieldName) &&
+            !addedArrayFields.has(fieldName))
+            .map(([fieldName, spec]) => ({ fieldName, spec }))
+            .sort((a, b) => a.spec.label.localeCompare(b.spec.label));
+    };
+    return (_jsx(Stack, { gap: 5, children: Object.keys(fields).length === 0 ? (_jsx("div", { style: {
+                textAlign: 'center',
+                padding: '2rem',
+                color: 'var(--cds-text-secondary)',
+                fontSize: '0.875rem',
+            }, children: "No fields are configured for this filter component." })) : (_jsxs(_Fragment, { children: [filterFields.filter((f) => f.orSectionId === 'root').length === 0 &&
+                    getAvailableOptionalFields().length > 0 ? (_jsx("div", { style: {
+                        textAlign: 'center',
+                        padding: '1rem',
+                        color: 'var(--cds-text-secondary)',
+                        fontSize: '0.875rem',
+                        marginBottom: '1rem',
+                    }, children: "No fields are currently selected. Add optional fields below to start filtering." })) : (_jsxs("div", { children: [_jsxs("div", { style: {
+                                fontSize: '1rem',
+                                fontWeight: '600',
+                                color: 'var(--cds-text-primary)',
+                                marginBottom: '1rem',
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: '0.5rem',
+                            }, children: [_jsx("span", { style: {
+                                        backgroundColor: 'var(--cds-support-success)',
+                                        color: 'white',
+                                        padding: '0.25rem 0.5rem',
+                                        borderRadius: '4px',
+                                        fontSize: '0.75rem',
+                                        fontWeight: '500',
+                                    }, children: "AND" }), "Main Filter Conditions"] }), _jsx(FiltersSection, { fields: fields, filterFields: filterFields.filter((f) => f.orSectionId === 'root'), addArrayItem: addArrayItem, updateFilter: updateFilter, renderFieldRow: renderFieldRow })] })), getAvailableOptionalFields().length > 0 && (_jsxs("div", { style: {
+                        marginTop: filterFields.filter((f) => f.orSectionId === 'root')
+                            .length === 0
+                            ? '0'
+                            : '1rem',
+                    }, children: [filterFields.filter((f) => f.orSectionId === 'root').length ===
+                            0 && (_jsx("div", { style: {
+                                marginBottom: '1rem',
+                                color: 'var(--cds-text-primary)',
+                                fontSize: '0.875rem',
+                                fontWeight: '500',
+                            }, children: "Add fields to create your filter:" })), _jsxs(Select, { id: 'optional-field-select', labelText: 'Add Fields to Main Filter', value: '', onChange: (e) => {
+                                const fieldName = e.target.value;
+                                if (fieldName) {
+                                    addOptionalField(fieldName);
+                                }
+                            }, children: [_jsx(SelectItem, { value: '', text: 'Select field to add...' }), getAvailableOptionalFields().map((field) => (_jsx(SelectItem, { value: field.fieldName, text: field.spec.label }, field.fieldName)))] })] })), orSections.map((sectionId) => (_jsx(OrSection, { sectionId: sectionId, fieldsConfig: fields, filterFields: filterFields.filter((f) => f.orSectionId === sectionId), addArrayItem: addArrayItem, removeOrSection: removeOrSection, addOptionalFieldToSection: addOptionalFieldToSection, updateFilter: updateFilter, renderFieldRow: renderFieldRow }, sectionId))), _jsxs("div", { style: { marginTop: '1rem' }, children: [_jsx(Button, { kind: 'tertiary', size: 'sm', renderIcon: Add, onClick: addOrSection, children: "Add OR Condition" }), _jsx("div", { style: {
+                                fontSize: '0.75rem',
+                                color: 'var(--cds-text-secondary)',
+                                marginTop: '0.5rem',
+                            }, children: "OR conditions provide alternative filter criteria. Records matching ANY of these conditions will be included." })] })] })) }));
+};

package/lib/esm/components/c4-advanced-search-filters/c4-advanced-search-filters.types.d.ts

@@ -0,0 +1,32 @@
+export type AdvancedFilterOperator = '$eq' | '$neq' | '$exists' | '$gt' | '$gte' | '$lt' | '$lte' | '$like' | '$in' | '$notIn';
+export type FieldMatchType = 'exact-match' | 'advanced-filter' | 'both' | 'array';
+export type FieldDataType = 'string' | 'number' | 'date-time' | 'enum' | 'boolean';
+export interface FieldSpec {
+    label: string;
+    description: string;
+    matchType: FieldMatchType;
+    type?: FieldDataType;
+    optional: boolean;
+    operators?: AdvancedFilterOperator[];
+    enumValues?: string[];
+    arrayItems?: FieldSpecMap;
+    /**
+     * Optional async suggestion provider. If present (and the field data type is string),
+     * it will be invoked (debounced) after the user stops typing for 500ms.
+     * Returned suggestions (string array) will be rendered beneath the input allowing
+     * quick selection. An empty / falsy result clears the suggestions list.
+     */
+    fetchSuggestions?: (input: string) => Promise<string[]>;
+}
+export interface FieldSpecMap {
+    [fieldName: string]: FieldSpec;
+}
+export interface FilterPayload {
+    [fieldName: string]: unknown;
+    $or?: FilterPayload[];
+}
+export interface C4AdvancedSearchFiltersProps {
+    fields: FieldSpecMap;
+    onFilterChange: (payload: FilterPayload) => void;
+    initialFilters?: FilterPayload;
+}

package/lib/esm/components/c4-advanced-search-filters/c4-advanced-search-filters.types.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+export {};

package/lib/esm/components/c4-advanced-search-filters/state.types.d.ts

@@ -0,0 +1,14 @@
+import type { AdvancedFilterOperator } from './c4-advanced-search-filters.types';
+export interface FilterFieldState {
+    id: string;
+    fieldName: string;
+    matchType?: 'exact-match' | 'advanced-filter';
+    operator?: AdvancedFilterOperator;
+    value: string | number | boolean | Date;
+    arrayValues?: (string | number | boolean | Date)[];
+    inputError?: string;
+    arrayIndex?: number;
+    arrayFieldName?: string;
+    parentArrayField?: string;
+    orSectionId?: string;
+}