@camunda/ccma-saas-frontend 0.0.31

package/README.md

@@ -0,0 +1,40 @@
+# Camunda Console Composite Components
+
+Storybook: [Link](https://c8c4.pages.dev)
+
+## Dev
+
+```bash
+# install
+pnpm install
+
+# start storybook
+pnpm build-storybook
+pnpm start
+
+# build components
+pnpm build
+```
+
+## Release
+
+Bump version in `package.json` and create a [new release](https://github.com/camunda-cloud/camunda-console-composite-components/releases/new). This will start a github action to publish the package to the github package repository.
+
+Pushing to `main` will update the storybook available under [cloudflare page](https://c8c4.pages.dev).
+
+## Usage
+
+Example for navbar:
+
+```tsx
+import { C4WorkflowInformation } from '@camunda/ccma-saas-frontend'
+
+// ...
+
+return (
+  <C4WorkflowInformation
+    isLoading={true}
+    // ...
+  />
+)
+```

package/lib/esm/components/c4-actionable-notification/c4-actionable-notification.d.ts

@@ -0,0 +1,3 @@
+import type { JSX } from 'react';
+import type { C4ActionableNotificationProps } from './c4-actionable-notification.types';
+export declare const C4ActionableNotification: (props: C4ActionableNotificationProps) => JSX.Element;

package/lib/esm/components/c4-actionable-notification/c4-actionable-notification.js

@@ -0,0 +1,25 @@
+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 { C3ResponsiveStack } from '@camunda/camunda-composite-components';
+import { Callout } from '@carbon/react';
+import { C4LinkButton } from '../c4-link-button/c4-link-button.js';
+export const C4ActionableNotification = (props) => (_jsxs(Callout, { title: '', kind: props.kind, lowContrast: props.lowContrast, style: { maxWidth: '100%', overflow: 'hidden' }, children: [_jsx("div", { style: {
+                position: 'absolute',
+                paddingRight: '62px',
+                width: '100%',
+            }, children: _jsxs(C3ResponsiveStack, { alignItems: 'center', justifyContent: 'space-between', children: [_jsxs(C3ResponsiveStack, { orientation: props?.orientation ?? 'horizontal', gap: 1, children: [_jsx("span", { className: 'cds--actionable-notification__title', children: props.title }), _jsx("p", { children: props.subtitle })] }), _jsx(C4LinkButton, { label: props.actionButtonLabel, onClick: props.onActionButtonClick, style: {
+                            alignSelf: 'flex-start',
+                            flexShrink: 0,
+                            whiteSpace: 'nowrap',
+                        } })] }) }), _jsx("div", { style: {
+                width: '100%',
+                visibility: 'hidden',
+            }, children: _jsxs(C3ResponsiveStack, { alignItems: 'center', justifyContent: 'space-between', children: [_jsxs(C3ResponsiveStack, { orientation: props?.orientation ?? 'horizontal', gap: 1, children: [_jsx("span", { className: 'cds--actionable-notification__title', children: props.title }), _jsx("p", { children: props.subtitle })] }), _jsx(C4LinkButton, { label: props.actionButtonLabel, onClick: props.onActionButtonClick, style: {
+                            alignSelf: 'flex-start',
+                            flexShrink: 0,
+                            whiteSpace: 'nowrap',
+                        } })] }) })] }));

package/lib/esm/components/c4-actionable-notification/c4-actionable-notification.types.d.ts

@@ -0,0 +1,9 @@
+export interface C4ActionableNotificationProps {
+    kind: string;
+    title: string;
+    subtitle: string;
+    actionButtonLabel: string;
+    onActionButtonClick: () => void;
+    lowContrast: boolean;
+    orientation?: 'horizontal' | 'vertical';
+}

package/lib/esm/components/c4-actionable-notification/c4-actionable-notification.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-activity-graph/c4-activity-graph.d.ts

@@ -0,0 +1,3 @@
+import type { JSX } from 'react';
+import type { C4ActivityGraphProps } from './c4-activity-graph.types';
+export declare const C4ActivityGraph: ({ dataPoints, options, }: C4ActivityGraphProps) => JSX.Element;

package/lib/esm/components/c4-activity-graph/c4-activity-graph.js

@@ -0,0 +1,135 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const C4ActivityGraph = ({ dataPoints, options, }) => {
+    const componentOptions = {
+        lastWeeks: options?.lastWeeks ?? 25,
+        width: options?.width ?? '100%',
+        height: options?.height ?? '300px',
+        gap: options?.gap ?? '0.5rem',
+    };
+    const getDayOfWeek = (date) => {
+        const dayOfWeek = date.getDay();
+        return dayOfWeek === 0 ? 6 : dayOfWeek - 1;
+    };
+    // calculate aggregated data points
+    const DAY = 24 * 60 * 60 * 1000;
+    let currentStart = new Date();
+    currentStart.setHours(0, 0, 0, 0);
+    const currentDayOfWeek = getDayOfWeek(currentStart);
+    const numberOfDays = componentOptions.lastWeeks * 7 - (7 - currentDayOfWeek);
+    const activityDataPoints = [];
+    let currentWeek = -1;
+    let weekIndex = componentOptions.lastWeeks;
+    let months = [];
+    let currentMonth = -1;
+    let maxActivities = 0;
+    for (let i = 0; i < numberOfDays; i++) {
+        const range = {
+            start: currentStart.getTime(),
+            end: currentStart.getTime() + DAY,
+        };
+        const dayOfWeek = getDayOfWeek(currentStart);
+        if (currentWeek < 0) {
+            currentWeek = Math.ceil((currentStart.getTime() -
+                new Date(currentStart.getFullYear(), 0, 1).getTime()) /
+                DAY /
+                7);
+        }
+        if (dayOfWeek === 6) {
+            weekIndex--;
+            currentWeek--;
+        }
+        const dataPoint = {
+            index: numberOfDays - i,
+            range,
+            dataPoints: dataPoints.filter((dataPoint) => dataPoint.timestamp >= range.start && dataPoint.timestamp < range.end),
+            dayOfWeek,
+            weekOfYear: currentWeek,
+            grid: {
+                x: weekIndex,
+                y: dayOfWeek,
+            },
+        };
+        maxActivities = Math.max(maxActivities, dataPoint.dataPoints.length);
+        activityDataPoints.push(dataPoint);
+        currentStart = new Date(currentStart.getTime() - DAY);
+    }
+    activityDataPoints.reverse();
+    for (const dataPoint of activityDataPoints) {
+        const currentStart = new Date(dataPoint.range.start);
+        if (currentMonth < 0 || currentMonth !== currentStart.getMonth()) {
+            currentMonth = currentStart.getMonth();
+            months = months.filter((month) => month.column !== dataPoint.grid.x);
+            months.push({
+                month: currentMonth,
+                column: dataPoint.grid.x,
+            });
+        }
+    }
+    const colors = ['#edf5ff', '#a6c8ff', '#4589ff', '#0f62fe', '#0043ce'];
+    const DAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+    const MONTHS = [
+        'Jan',
+        'Feb',
+        'Mar',
+        'Apr',
+        'May',
+        'Jun',
+        'Jul',
+        'Aug',
+        'Sep',
+        'Oct',
+        'Nov',
+        'Dec',
+    ];
+    const component = (_jsxs("div", { style: {
+            display: 'grid',
+            gridTemplateRows: 'repeat(9, 1fr)',
+            gridTemplateColumns: `repeat(${componentOptions.lastWeeks + 1}, 1fr)`,
+            width: componentOptions.width,
+            height: componentOptions.height,
+            gap: componentOptions.gap,
+        }, children: [DAYS.map((day, index) => {
+                return (_jsx("div", { style: {
+                        gridRow: index + 2,
+                        gridColumn: 0,
+                        alignSelf: 'center',
+                        justifySelf: 'center',
+                        fontSize: '0.8rem',
+                    }, children: day }, `${index}`));
+            }), months.map((month, index) => {
+                return (_jsx("div", { style: {
+                        gridRow: 1,
+                        gridColumn: month.column,
+                        alignSelf: 'center',
+                        justifySelf: 'center',
+                        fontSize: '0.8rem',
+                    }, children: MONTHS[month.month] }, `${index}`));
+            }), activityDataPoints.map((dataPoint) => {
+                let color = colors[0];
+                if (dataPoint.dataPoints.length > 0.8 * maxActivities) {
+                    color = colors[4];
+                }
+                else if (dataPoint.dataPoints.length > 0.5 * maxActivities) {
+                    color = colors[3];
+                }
+                else if (dataPoint.dataPoints.length > 0.2 * maxActivities) {
+                    color = colors[2];
+                }
+                else if (dataPoint.dataPoints.length > 0) {
+                    color = colors[1];
+                }
+                const titles = [
+                    new Date(dataPoint.range.start + 6 * 60 * 60 * 1000)
+                        .toISOString()
+                        .substring(0, 10),
+                    `${dataPoint.dataPoints.length} activities`,
+                ];
+                return (_jsx("div", { style: {
+                        gridRow: dataPoint.grid.y + 2,
+                        gridColumn: dataPoint.grid.x,
+                        backgroundColor: color,
+                    }, title: titles.join('\n') }, `${dataPoint.index}`));
+            })] }));
+    // TODO: Add component content
+    return component;
+};

package/lib/esm/components/c4-activity-graph/c4-activity-graph.types.d.ts

@@ -0,0 +1,13 @@
+export interface C4ActivityGraphDataPoint {
+    timestamp: number;
+    activity: string;
+}
+export interface C4ActivityGraphProps {
+    dataPoints: C4ActivityGraphDataPoint[];
+    options?: {
+        lastWeeks?: number;
+        width?: string;
+        height?: string;
+        gap?: string;
+    };
+}

package/lib/esm/components/c4-activity-graph/c4-activity-graph.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/ArrayFieldContainer.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 ArrayFieldContainerProps {
+    fieldName: string;
+    spec: FieldSpec;
+    title?: string;
+    groups: Array<[number, FilterFieldState[]]>;
+    onAddItem: () => void;
+    onRemoveItem: (index: number) => void;
+    onRemoveAll?: () => void;
+    renderRow: (field: FilterFieldState, spec: FieldSpec) => JSX.Element;
+}
+export declare const ArrayFieldContainer: React.FC<ArrayFieldContainerProps>;
+export {};

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

@@ -0,0 +1,39 @@
+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, FormLabel, Stack } from '@carbon/react';
+import { Add, Close } from '@carbon/react/icons/index.esm.js';
+export const ArrayFieldContainer = ({ fieldName, spec, title, groups, onAddItem, onRemoveItem, onRemoveAll, renderRow, }) => {
+    return (_jsxs(Stack, { gap: 2, children: [_jsxs("div", { style: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                }, children: [_jsx(FormLabel, { children: title || `${spec.label} Array` }), _jsxs("div", { style: { display: 'flex', gap: '0.5rem', alignItems: 'center' }, children: [_jsxs(Button, { kind: 'ghost', size: 'sm', renderIcon: Add, onClick: onAddItem, children: ["Add ", spec.label, " Item"] }), spec.optional && onRemoveAll && (_jsx(Button, { kind: 'ghost', size: 'sm', renderIcon: Close, iconDescription: `Remove ${spec.label} Array`, onClick: onRemoveAll, hasIconOnly: true }))] })] }), groups
+                .sort(([a], [b]) => a - b)
+                .map(([arrayIndex, arrayFieldGroup]) => (_jsxs("div", { style: {
+                    border: '2px solid var(--cds-border-strong)',
+                    borderRadius: 8,
+                    padding: '1rem',
+                    backgroundColor: 'var(--cds-layer-02)',
+                    position: 'relative',
+                }, children: [_jsxs("div", { style: {
+                            position: 'absolute',
+                            top: -10,
+                            left: 12,
+                            backgroundColor: 'var(--cds-background)',
+                            padding: '0 8px',
+                            fontSize: '0.875rem',
+                            fontWeight: 600,
+                            color: 'var(--cds-text-primary)',
+                        }, children: [spec.label, " Item ", arrayIndex + 1] }), _jsx("div", { style: {
+                            display: 'flex',
+                            justifyContent: 'flex-end',
+                            marginBottom: '1rem',
+                        }, children: _jsx(Button, { kind: 'ghost', size: 'sm', renderIcon: Close, iconDescription: 'Remove array item', onClick: () => onRemoveItem(arrayIndex), hasIconOnly: true }) }), _jsx(Stack, { gap: 2, children: arrayFieldGroup.map((field) => {
+                            const fieldSpec = spec.arrayItems?.[field.arrayFieldName];
+                            return fieldSpec ? renderRow(field, fieldSpec) : null;
+                        }) })] }, `${fieldName}-${arrayIndex}`)))] }, fieldName));
+};

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

@@ -0,0 +1,16 @@
+import type React from 'react';
+interface AutosuggestInputProps {
+    id: string;
+    value: string;
+    placeholder?: string;
+    labelText?: string;
+    invalid?: boolean;
+    invalidText?: string;
+    fetchSuggestions?: (q: string) => Promise<string[]>;
+    isArrayOp?: boolean;
+    onChange: (v: string) => void;
+    onEnterAdd?: () => void;
+    onPick?: (v: string) => void;
+}
+export declare const AutosuggestInput: React.FC<AutosuggestInputProps>;
+export {};

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

@@ -0,0 +1,147 @@
+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, TextInput } from '@carbon/react';
+import { useEffect, useRef, useState } from 'react';
+export const AutosuggestInput = ({ id, value, placeholder, labelText = 'Value', invalid, invalidText, fetchSuggestions, isArrayOp, onChange, onEnterAdd, onPick, }) => {
+    const [focused, setFocused] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [suggestions, setSuggestions] = useState([]);
+    const [active, setActive] = useState(-1);
+    const wrapperRef = useRef(null);
+    const timerRef = useRef(null);
+    const lastValRef = useRef('');
+    useEffect(() => {
+        const onDocDown = (e) => {
+            if (!focused) {
+                return;
+            }
+            if (wrapperRef.current &&
+                !wrapperRef.current.contains(e.target)) {
+                setFocused(false);
+            }
+        };
+        document.addEventListener('mousedown', onDocDown);
+        return () => document.removeEventListener('mousedown', onDocDown);
+    }, [focused]);
+    useEffect(() => {
+        if (!fetchSuggestions) {
+            return;
+        }
+        if (lastValRef.current === value) {
+            return;
+        }
+        lastValRef.current = value;
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+        }
+        if (!value.trim()) {
+            setSuggestions([]);
+            setActive(-1);
+            return;
+        }
+        timerRef.current = window.setTimeout(async () => {
+            setLoading(true);
+            try {
+                const res = await fetchSuggestions(value);
+                setSuggestions(res || []);
+                setActive(-1);
+            }
+            catch {
+                setSuggestions([]);
+            }
+            finally {
+                setLoading(false);
+            }
+        }, 500);
+        return () => {
+            if (timerRef.current) {
+                clearTimeout(timerRef.current);
+            }
+        };
+    }, [value, fetchSuggestions]);
+    return (_jsxs("div", { ref: wrapperRef, style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 4,
+            position: 'relative',
+        }, children: [_jsxs("div", { style: { display: 'flex', gap: 8, alignItems: 'flex-start' }, children: [_jsx(TextInput, { id: id, value: value, onChange: (e) => onChange(e.target.value), onFocus: () => setFocused(true), onKeyDown: (e) => {
+                            if (focused && suggestions.length) {
+                                if (e.key === 'ArrowDown') {
+                                    e.preventDefault();
+                                    setActive((prev) => prev + 1 >= suggestions.length ? 0 : prev + 1);
+                                    return;
+                                }
+                                if (e.key === 'ArrowUp') {
+                                    e.preventDefault();
+                                    setActive((prev) => prev - 1 < 0 ? suggestions.length - 1 : prev - 1);
+                                    return;
+                                }
+                                if (e.key === 'Enter') {
+                                    if (active >= 0 && active < suggestions.length) {
+                                        e.preventDefault();
+                                        const chosen = suggestions[active];
+                                        onChange(chosen);
+                                        onPick?.(chosen);
+                                        setSuggestions([]);
+                                        setActive(-1);
+                                        return;
+                                    }
+                                }
+                                if (e.key === 'Escape') {
+                                    setSuggestions([]);
+                                    setActive(-1);
+                                    return;
+                                }
+                            }
+                            if (e.key === 'Enter' && isArrayOp && onEnterAdd) {
+                                e.preventDefault();
+                                onEnterAdd();
+                            }
+                        }, placeholder: placeholder, size: 'sm', labelText: labelText, invalid: invalid, invalidText: invalidText, style: { flex: 1 } }), isArrayOp && (_jsx(Button, { kind: 'secondary', size: 'sm', onClick: onEnterAdd, disabled: !value.trim(), children: "Add" }))] }), fetchSuggestions && focused && (_jsxs(_Fragment, { children: [loading && (_jsx("div", { style: {
+                            position: 'absolute',
+                            top: '100%',
+                            left: 0,
+                            marginTop: 2,
+                            fontSize: '0.75rem',
+                            color: 'var(--cds-text-secondary)',
+                            background: 'var(--cds-layer)',
+                            padding: '0.25rem 0.5rem',
+                            border: '1px solid var(--cds-border-subtle)',
+                            borderRadius: 4,
+                            zIndex: 6000,
+                        }, children: "Loading suggestions..." })), !loading && suggestions.length > 0 && (_jsx("div", { role: 'listbox', "aria-label": `${labelText} suggestions`, style: {
+                            position: 'absolute',
+                            top: '100%',
+                            left: 0,
+                            width: '100%',
+                            marginTop: 2,
+                            border: '1px solid var(--cds-border-subtle)',
+                            borderRadius: 4,
+                            background: 'var(--cds-layer)',
+                            maxHeight: 200,
+                            overflowY: 'auto',
+                            padding: 0,
+                            margin: 0,
+                            listStyle: 'none',
+                            boxShadow: '0 2px 6px rgba(0,0,0,0.2)',
+                            zIndex: 6000,
+                        }, children: suggestions.map((s, idx) => (_jsx("div", { role: 'option', "aria-selected": active === idx, onMouseDown: (e) => e.preventDefault(), onClick: () => {
+                                onChange(s);
+                                onPick?.(s);
+                                setSuggestions([]);
+                                setActive(-1);
+                            }, style: {
+                                padding: '0.35rem 0.5rem',
+                                cursor: 'pointer',
+                                fontSize: '0.75rem',
+                                borderTop: idx === 0 ? 'none' : '1px solid var(--cds-border-subtle)',
+                                backgroundColor: active === idx
+                                    ? 'var(--cds-layer-accent)'
+                                    : 'transparent',
+                            }, onMouseEnter: () => setActive(idx), children: s }, idx))) }))] }))] }));
+};

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

@@ -0,0 +1,14 @@
+import type React from 'react';
+import type { FieldSpec } from './c4-advanced-search-filters.types';
+import type { FilterFieldState } from './state.types';
+interface FieldRowProps {
+    field: FilterFieldState;
+    spec: FieldSpec;
+    suggestionsFetcher?: FieldSpec['fetchSuggestions'];
+    onFieldChange: (id: string, updates: Partial<FilterFieldState>) => void;
+    onRemove?: (id: string) => void;
+    onAddArrayValue: (id: string, v: string | number | boolean | Date) => void;
+    onRemoveArrayValue: (id: string, v: string | number | boolean | Date) => void;
+}
+export declare const FieldRow: React.FC<FieldRowProps>;
+export {};

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

@@ -0,0 +1,133 @@
+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, Checkbox, DatePicker, DatePickerInput, FormLabel, NumberInput, Select, SelectItem, Tag, } from '@carbon/react';
+import { Close } from '@carbon/react/icons/index.esm.js';
+import { AutosuggestInput } from './AutosuggestInput.js';
+import { isArrayOperator } from './utils.js';
+export const FieldRow = ({ field, spec, onFieldChange, onRemove, onAddArrayValue, onRemoveArrayValue, }) => {
+    const isOptional = spec.optional;
+    const showOperator = field.matchType === 'advanced-filter' && spec.operators?.length;
+    const showEqualSign = field.matchType === 'exact-match' || spec.matchType === 'exact-match';
+    const isArrayOp = isArrayOperator(field.operator);
+    const fieldType = spec.type || 'string';
+    const renderOperatorDropdown = () => {
+        if (!spec.operators?.length) {
+            return null;
+        }
+        return (_jsxs(Select, { id: `operator-${field.id}`, value: field.operator || '', onChange: (e) => onFieldChange(field.id, {
+                operator: e.target.value,
+            }), size: 'sm', labelText: 'Operator', children: [_jsx(SelectItem, { value: '', text: 'Select operator', disabled: true }), spec.operators.map((op) => (_jsx(SelectItem, { value: op, text: op }, op)))] }));
+    };
+    const renderMatchTypeDropdown = () => {
+        if (spec.matchType !== 'both') {
+            return null;
+        }
+        return (_jsxs(Select, { id: `match-type-${field.id}`, value: field.matchType || '', onChange: (e) => {
+                const matchType = e.target.value;
+                const updates = { matchType };
+                if (matchType === 'advanced-filter' && spec.operators?.length) {
+                    updates.operator = spec.operators[0];
+                }
+                else if (matchType === 'exact-match') {
+                    updates.operator = undefined;
+                }
+                onFieldChange(field.id, updates);
+            }, size: 'sm', labelText: 'Type', children: [_jsx(SelectItem, { value: '', text: 'Select match type', disabled: true }), _jsx(SelectItem, { value: 'exact-match', text: 'Exact Match' }), _jsx(SelectItem, { value: 'advanced-filter', text: 'Advanced Filter' })] }));
+    };
+    const renderFieldInput = () => {
+        const isExistsOp = field.operator === '$exists';
+        if (isExistsOp) {
+            return (_jsx(Checkbox, { id: `value-${field.id}`, checked: Boolean(field.value), onChange: (_, { checked }) => onFieldChange(field.id, { value: checked }), labelText: 'Field exists' }));
+        }
+        const placeholder = isArrayOp
+            ? 'Type value and press Enter to add'
+            : spec.description;
+        switch (fieldType) {
+            case 'number':
+                return (_jsx(NumberInput, { id: `value-${field.id}`, value: Number(field.value) || 0, onChange: (_, { value }) => {
+                        const numValue = value === '' ? 0 : Number(value);
+                        onFieldChange(field.id, { value: numValue });
+                    }, onKeyDown: (e) => {
+                        if (e.key === 'Enter' && isArrayOp) {
+                            e.preventDefault();
+                            onAddArrayValue(field.id, field.value);
+                        }
+                    }, placeholder: placeholder, size: 'sm', label: 'Value', invalid: !!field.inputError, invalidText: field.inputError }));
+            case 'boolean':
+                if (isArrayOp) {
+                    return (_jsxs("div", { style: { display: 'flex', gap: '0.5rem', alignItems: 'center' }, children: [_jsx(Button, { kind: 'ghost', size: 'sm', onClick: () => onAddArrayValue(field.id, true), children: "Add True" }), _jsx(Button, { kind: 'ghost', size: 'sm', onClick: () => onAddArrayValue(field.id, false), children: "Add False" })] }));
+                }
+                return (_jsx(Checkbox, { id: `value-${field.id}`, checked: Boolean(field.value), onChange: (_, { checked }) => onFieldChange(field.id, { value: checked }), labelText: 'Value' }));
+            case 'date-time':
+                if (isArrayOp) {
+                    return (_jsx("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: '0.5rem',
+                        }, children: _jsx(DatePicker, { datePickerType: 'single', dateFormat: 'Y-m-d', value: field.value instanceof Date
+                                ? field.value.toISOString().split('T')[0]
+                                : '', onChange: ([date]) => {
+                                if (date) {
+                                    const newDate = new Date(date);
+                                    onFieldChange(field.id, { value: newDate });
+                                    onAddArrayValue(field.id, newDate);
+                                }
+                            }, children: _jsx(DatePickerInput, { id: `value-${field.id}`, placeholder: 'Select date to add', labelText: 'Value', size: 'sm', invalid: !!field.inputError, invalidText: field.inputError }) }) }));
+                }
+                return (_jsx(DatePicker, { datePickerType: 'single', dateFormat: 'Y-m-d', value: field.value instanceof Date
+                        ? field.value.toISOString().split('T')[0]
+                        : '', onChange: ([date]) => {
+                        if (date) {
+                            onFieldChange(field.id, { value: new Date(date) });
+                        }
+                    }, children: _jsx(DatePickerInput, { id: `value-${field.id}`, placeholder: 'yyyy-mm-dd', labelText: 'Value', size: 'sm', invalid: !!field.inputError, invalidText: field.inputError }) }));
+            case 'enum':
+                if (isArrayOp) {
+                    return (_jsxs(Select, { id: `value-${field.id}`, value: String(field.value), onChange: (e) => {
+                            const selectedValue = e.target.value;
+                            onFieldChange(field.id, { value: selectedValue });
+                            if (selectedValue) {
+                                onAddArrayValue(field.id, selectedValue);
+                            }
+                        }, size: 'sm', labelText: 'Value', invalid: !!field.inputError, invalidText: field.inputError, children: [_jsx(SelectItem, { value: '', text: 'Select value to add...', disabled: true }), spec.enumValues?.map((enumValue) => (_jsx(SelectItem, { value: enumValue, text: enumValue }, enumValue)))] }));
+                }
+                return (_jsxs(Select, { id: `value-${field.id}`, value: String(field.value), onChange: (e) => onFieldChange(field.id, { value: e.target.value }), size: 'sm', labelText: 'Value', invalid: !!field.inputError, invalidText: field.inputError, children: [_jsx(SelectItem, { value: '', text: 'Select value...', disabled: true }), spec.enumValues?.map((enumValue) => (_jsx(SelectItem, { value: enumValue, text: enumValue }, enumValue)))] }));
+            default:
+                return (_jsx(AutosuggestInput, { id: `value-${field.id}`, value: String(field.value), placeholder: placeholder, invalid: !!field.inputError, invalidText: field.inputError, fetchSuggestions: spec.fetchSuggestions, isArrayOp: isArrayOp, onChange: (v) => onFieldChange(field.id, { value: v }), onEnterAdd: () => onAddArrayValue(field.id, field.value), onPick: (v) => {
+                        if (isArrayOp) {
+                            onAddArrayValue(field.id, v);
+                        }
+                    } }));
+        }
+    };
+    return (_jsxs("div", { style: { marginBottom: '1rem' }, children: [_jsx(FormLabel, { style: {
+                    marginBottom: '0.5rem',
+                    display: 'block',
+                    fontSize: '0.875rem',
+                    fontWeight: 600,
+                    color: 'var(--cds-text-primary)',
+                }, children: spec.label }), _jsxs("div", { style: {
+                    display: 'grid',
+                    gridTemplateColumns: 'auto auto 1fr auto',
+                    gap: '0.5rem',
+                    alignItems: 'end',
+                    width: '100%',
+                    padding: '0.5rem',
+                    border: '1px solid var(--cds-border-subtle)',
+                    borderRadius: 4,
+                    backgroundColor: 'var(--cds-field)',
+                }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'end', gap: '0.5rem' }, children: [renderMatchTypeDropdown(), showEqualSign && (_jsx("div", { style: {
+                                    paddingBottom: '0.5rem',
+                                    fontSize: '1rem',
+                                    fontWeight: 600,
+                                }, children: "=" })), showOperator && renderOperatorDropdown()] }), _jsx("div", { style: { minWidth: 80 } }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '0.5rem' }, children: [renderFieldInput(), isArrayOp && field.arrayValues && field.arrayValues.length > 0 && (_jsx("div", { style: { display: 'flex', flexWrap: 'wrap', gap: '0.25rem' }, children: field.arrayValues.map((value, index) => {
+                                    const displayValue = value instanceof Date
+                                        ? value.toISOString().split('T')[0]
+                                        : String(value);
+                                    return (_jsx(Tag, { filter: true, onClose: () => onRemoveArrayValue(field.id, value), title: `Remove ${displayValue}`, children: displayValue }, `${field.id}-${index}`));
+                                }) }))] }), isOptional && onRemove && (_jsx("div", { style: { alignSelf: 'end', paddingBottom: '0.5rem' }, children: _jsx(Button, { kind: 'ghost', size: 'sm', renderIcon: Close, iconDescription: 'Remove field', onClick: () => onRemove(field.id), hasIconOnly: true }) }))] })] }, field.id));
+};

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

@@ -0,0 +1,13 @@
+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 FiltersSectionProps {
+    fields: Record<string, FieldSpec>;
+    filterFields: FilterFieldState[];
+    addArrayItem: (parentFieldName: string, orSectionId?: string) => void;
+    updateFilter: (updatedFields: FilterFieldState[]) => void;
+    renderFieldRow: (field: FilterFieldState, spec: FieldSpec) => JSX.Element;
+}
+export declare const FiltersSection: React.FC<FiltersSectionProps>;
+export {};